Set dynamische Meta-Tags und Open Graph-tags mit jQuery

Ich versuche, die add dynamic-tags mit jQuery, aber es scheint nicht zu funktionieren. Ich lade mein script direkt nach dem laden der Seite.

Dies ist mein HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <script type="text/javascript" src="script.js"></script>
  </head>
  <body>
  </body>
</html>

Dies ist, wie ich die tags hinzuzufügen, auf jQuery.

$(function() {
      $('head').append('<meta property="og:type" content="profile"/>'); 
      $('head').append('<meta property="og:url" content=""/>');
      $('head').append("<meta property='og:title' content="+text+"'/>");
      $('head').append("<meta property='og:image' content="+imageUrl+"'/>");
  });

Warum ich dies Tue? Nachdem der Benutzer den Besuch der Seite example.com/?link=HDI635
Ich möchte Ihnen einen kleinen überblick über den Inhalt. Deshalb mache ich einen API-Aufruf mit jQuery nach, dass ich hinzufügen möchte, die Werte aus der API-Antwort auf die Open Graph-tags.

InformationsquelleAutor BilalReffas | 2017-05-29
  1. 5

    Wenn der Zweck des tags ist für die Erstellung von Inhalten previews auf Seiten wie Facebook, dann die Verwendung von jQuery wird wahrscheinlich nicht funktionieren, weil die meisten web-crawler kein JavaScript ausführen, die Sie einfach laden Sie einfach den HTML-Code und Lesen Sie, wie es ist.

    Für Sie, um korrekt zu arbeiten, müssen Sie zum generieren der tags auf der server-Seite.

    Können Sie Debuggen Ihre tags mit Facebook ist sharing-debugger:
    https://developers.facebook.com/tools/debug/

    InformationsquelleAutor alan0xd7
  2. 1

    Als Alan erklärte, die meisten web-crawler kein JavaScript ausführen, die Sie einfach laden Sie einfach den HTML-Code und Lesen Sie, wie es ist. Heute, FB-crawler nicht.

    Eine gute Lösung für dieses ist mit einem server (nginx ist genug) zu erkennen, den User-Agent des Besuchers, und wenn es Facebook ist UA (https://developers.facebook.com/docs/sharing/webmasters/crawler/) dienen einer einfachen HTML-mit den OG-tags. Sonst dienen die web-app.

    InformationsquelleAutor Rayjax
Schreibe einen Kommentar