Verwendung des Meta-Tags 'og' (Open Graph) für die Facebook-Freigabe

118

Facebook holt alle Bilder von meiner Seite.

Ich möchte nur ein Bild teilen, das sich auf dieser Seite befindet.

Ich habe von dem ogMeta-Tag gehört, weiß aber nicht, wie ich es ausdrücken soll.

facebook-opengraph meta Vignesh Babu MD
quelle

Antworten:

355

Verwenden:

<!-- For Google -->
<meta name="description" content="" />
<meta name="keywords" content="" />

<meta name="author" content="" />
<meta name="copyright" content="" />
<meta name="application-name" content="" />

<!-- For Facebook -->
<meta property="og:title" content="" />
<meta property="og:type" content="article" />
<meta property="og:image" content="" />
<meta property="og:url" content="" />
<meta property="og:description" content="" />

<!-- For Twitter -->
<meta name="twitter:card" content="summary" />
<meta name="twitter:title" content="" />
<meta name="twitter:description" content="" />
<meta name="twitter:image" content="" />

Füllen Sie den Inhalt = "..." entsprechend dem Inhalt Ihrer Seite.

Weitere Informationen finden Sie unter 18 Meta-Tags, die jede Webseite 2013 haben sollte .

CarlosPinedaT
quelle

Wissen Sie, ob das authorTag den Autorennamen oder einen Link zu einer Profil-URL haben sollte?

tobek

Ich denke beides ist möglich. Wenn Sie Ihr Profilbild auf der linken Seite Ihres Beitrags auf der Google-Suchseite haben möchten, sollten Sie den Link zu Ihrem Google + -Profil bereitstellen.

Jurihandl

Meta-Tag authorbedeutet Autor der Website oder Autor des aktuellen Artikels (Beispiel für die Verwendung in einem Blog-Artikel)?

LuiGi

Ist das eine gute Ausführung? Wird Google / Facebook / Twitter dabei keine Fehler finden?

Jeromie Devera

1) Facebook liest das <meta name = "author"> -Tag und zeigt es in der Vorschau an, wenn jemand eine Seite teilt. 2) Facebook unterstützt jetzt <meta property = "article: author"> (Details unter giannopoulos.net/). 2015/06/20 /… ) und zeigt einen Link zu Ihrem Facebook-Profil an (wenn Sie tatsächlich einen Link in Artikel: Autor einfügen) 3) Google sucht jetzt nach umfangreichen Daten in Form von so genannten "Rich Snippets". ( developer.google.com/structured-data )

MarkG

Facebook verwendet das sogenannte Open Graph-Protokoll , um zu entscheiden, welche Dinge angezeigt werden sollen, wenn Sie einen Link freigeben. Das OGP betrachtet Ihre Seite und versucht zu entscheiden, welche Inhalte angezeigt werden sollen. Wir können helfen und Facebook tatsächlich mitteilen, was von unserer Seite zu nehmen ist.

Wir machen das mit og:metaTags.

Die Tags sehen ungefähr so aus -

  <meta property="og:title" content="Stuffed Cookies" />
  <meta property="og:image" content="http://fbwerks.com:8000/zhen/cookie.jpg" />
  <meta property="og:description" content="The Turducken of Cookies" />
  <meta property="og:url" content="http://fbwerks.com:8000/zhen/cookie.html">

Sie müssen diese oder ähnliche Meta-Tags in <head>Ihre HTML-Datei einfügen. Vergessen Sie nicht, die Werte durch Ihre eigenen zu ersetzen!

Weitere Informationen darüber, wie Facebook diese Meta-Tags verwendet, finden Sie in der Dokumentation. Hier ist eines der Tutorials von dort - https://developers.facebook.com/docs/opengraph/tutorial/

Facebook bietet uns ein großartiges kleines Tool, das uns beim Umgang mit diesen Meta-Tags hilft. Sie können den Debugger verwenden, um zu sehen, wie Facebook Ihre URL sieht, und es wird Ihnen sogar mitteilen, ob es Probleme damit gibt.

Hierbei ist zu beachten, dass Sie jedes Mal, wenn Sie Änderungen an den Meta-Tags vornehmen, die URL erneut über den Debugger eingeben müssen , damit Facebook alle auf Ihren Servern zwischengespeicherten Daten über Ihre URL löscht.

Lix
quelle

Ich sehe HTML-Tags in meiner Beschreibung. Wissen Sie, wie Sie das umgehen können?

Neil

Ich habe ein Tool zur Meta-Generierung erstellt. Es konfiguriert Einträge für Facebook, Google+ und Twitter vor und Sie können es hier kostenlos verwenden: http://www.groovymeta.com

Um die Frage etwas genauer zu beantworten, OGfunktionieren Tags (Open Graph) ähnlich wie Meta-Tags und sollten im HEAD-Bereich Ihrer HTML-Datei platziert werden. Siehe Facebook Best Practices für mehr Informationen darüber , wie effektiv OG - Tags zu verwenden.

Louis Otto
quelle

Danke @Mogsdad Ich habe meine Antwort entsprechend erweitert.

Louis Otto

Link leider kaputt!

Vincent Sels