Wie wählt Facebook Sharer Bilder und andere Metadaten aus, wenn ich meine URL teile?

393

Bei Verwendung von Facebook Sharer bietet Facebook dem Benutzer die Möglichkeit, eines der wenigen aus der Quelle gezogenen Bilder als Vorschau für seinen Link zu verwenden. Wie werden diese Bilder ausgewählt und wie kann ich sicherstellen, dass ein bestimmtes Bild auf meiner Seite immer in dieser Liste enthalten ist?

facebook facebook-opengraph facebook-sharer Sampson
quelle
Es funktioniert zwar, wenn die Meta-Eigenschaft verwendet wird, aber es ist ungültiges HTML, was ich sehr seltsam finde! Versuchen Sie es durch einen Validator und Sie werden sehen. Es verwirrt mich, warum um alles in der Welt sie dies nicht dazu bringen können, mit gültigem HTML zu arbeiten?
1
siehe developer.facebook.com/docs/opengraph <html xmlns: og = " opengraphprotocol.org/schema " ...
Cope360
3
Tipp: Nachdem Sie Änderungen vorgenommen haben. Führen Sie Ihre Seite durch den Linter, und Facebook aktualisiert die Miniaturansichten usw. für diese Seite. Developers.facebook.com/tools/lint
Ich fand den folgenden Artikel auch sehr nützlich: So
passen Sie

Antworten:

593

Wie kann ich Facebook mitteilen, welches Bild verwendet werden soll, wenn meine Seite freigegeben wird?

Facebook verfügt über eine Reihe von Open-Graph-Meta-Tags , anhand derer entschieden wird, welches Bild angezeigt werden soll.

Die Schlüssel für das Facebook-Bild sind:

<meta property="og:image" content="http://ia.media-imdb.com/rock.jpg"/>
<meta property="og:image:secure_url" content="https://secure.example.com/ogp.jpg" />

und es sollte im <head></head>Tag oben auf Ihrer Seite vorhanden sein.

Wenn diese Tags nicht vorhanden sind, wird nach der älteren Methode zur Angabe eines Bildes gesucht : <link rel="image_src" href="https://stackoverflow.com/myimage.jpg"/>. Wenn beides nicht vorhanden ist, überprüft Facebook den Inhalt Ihrer Seite und wählt Bilder von Ihrer Seite aus, die die Kriterien für das Teilen von Bildern erfüllen: Das Bild muss mindestens 200 x 200 Pixel groß sein, ein maximales Seitenverhältnis von 3: 1 haben und in PNG. JPEG- oder GIF-Format.

Kann ich mehrere Bilder angeben, damit der Benutzer ein Bild auswählen kann?

Ja, Sie müssen nur mehrere Bild-Meta-Tags in der Reihenfolge hinzufügen, in der sie angezeigt werden sollen. Dem Benutzer wird dann ein Bildauswahldialog angezeigt:
Facebook Bildauswahl

Ich habe die entsprechenden Bild-Meta-Tags angegeben. Warum akzeptiert Facebook die Änderungen nicht?

Sobald eine URL freigegeben wurde, greift der Crawler von Facebook mit einem Benutzeragenten facebookexternalhit/1.1 (+https://www.facebook.com/externalhit_uatext.php)auf Ihre Seite zu und speichert die Metainformationen zwischen. Um Facebook-Server zum Löschen des Caches zu zwingen, verwenden Sie das im Juni 2010 gestartete Facebook Url Debugger / Linter-Tool , um den Cache zu aktualisieren und Probleme mit Meta-Tags auf Ihrer Seite zu beheben.

Außerdem müssen die Bilder auf der Seite für den Facebook-Crawler öffentlich zugänglich sein. Sie sollten absolute URLs wie http://example.com/yourimage.jpg anstelle von /yourimage.jpg angeben.

Kann ich diese Meta-Tags mit clientseitigem Code wie Javascript oder jQuery aktualisieren? Nein. Ähnlich wie Suchmaschinen-Crawler führt der Facebook-Scraper keine Skripte aus, sodass alle Meta-Tags, die beim Herunterladen der Seite vorhanden sind, die Meta-Tags sind, die für die Bildauswahl verwendet werden.

Das Hinzufügen dieser Tags führt dazu, dass meine Seite nicht mehr überprüft wird. Wie kann ich das beheben?

Sie können Ihrem Tag die erforderlichen Facebook-Namespaces hinzufügen und Ihre Seite sollte dann die Validierung bestehen:

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:og="http://ogp.me/ns#"
      xmlns:fb="https://www.facebook.com/2008/fbml">
bkaid
quelle
1
Ein anderer Ort, an dem es aussieht: <link rel="apple-touch-icon" href="...">(So ​​erhält es das SO-Bild)
Yarin
2
@ Yarin Ich bin nicht sicher, ob das stimmt. Für StackOverflow ist die Eigenschaft image_src festgelegt, die verwendet wird. Der Dateiname für das Apple-Touch-Symbol ist unterschiedlich und wird nicht verwendet.
Bkaid
3
Kann ich die Reihenfolge des Bildes wählen? In meinem Fall werden vor dem Bild der Meta-Tags weitere Bilder angezeigt.
Vicenrele
23
Die minimale Bildgröße beträgt jetzt 200x200px.
Tr1stan
1
Woot! Ich habe die Größe des Bilds auf 300px eingestellt, jetzt scheint es zu funktionieren. Danke @ Tr1stan
Urs
37

Wenn Sie für Facebook teilen, müssen Sie in Ihrem HTML-Code im Kopfbereich die nächsten Meta-Tags hinzufügen: 

<meta property="og:title" content="title" />
<meta property="og:description" content="description" />
<meta property="og:image" content="thumbnail_image" />

Und das ist es!

Fügen Sie die Schaltfläche wie gewünscht hinzu, je nachdem, was FB Ihnen sagt.

Alle Informationen, die Sie benötigen, finden Sie unter www.facebook.com/share/

Matias
quelle
28

Ab 2013 können Sie, wenn Sie facebook.com/sharer.php (PHP) verwenden, einfach eine beliebige Schaltfläche / einen Link wie folgt erstellen:

<a class="btn" target="_blank" href="http://www.facebook.com/sharer.php?s=100&amp;p[title]=<?php echo urlencode(YOUR_TITLE);?>&amp;p[summary]=<?php echo urlencode(YOUR_PAGE_DESCRIPTION) ?>&amp;p[url]=<?php echo urlencode(YOUR_PAGE_URL); ?>&amp;p[images][0]=<?php echo urlencode(YOUR_LINK_THUMBNAIL); ?>">share on facebook</a>

Link-Abfrageparameter:

p[title] = Define a page title
p[summary] = An URL description, most likely describing the contents of the page
p[url] = The absolute URL for the page you're sharing 
p[images][0] = The URL of the thumbnail image to be used as post thumbnail on facebook

Es ist ganz einfach: Sie benötigen keine JS oder andere Einstellungen. Ist nur ein HTML-Rohlink. Gestalten Sie das A-Tag nach Ihren Wünschen.

Antonio Max
quelle
p[images][0]war genau das, was ich brauchte. ogTags funktionieren für die Freigabe des gleichen Bildes, aber ich muss mehrere Bilder von derselben Seite freigeben.
thekingoftruth
4
Dies sollte die neue "akzeptierte Antwort" sein - so einfach und unkompliziert. Danke dafür, Kumpel.
Mike
Antonio, hast du einen Quelllink zu dem, was du oben gezeigt hast? Ich versuche, dies in developer.facebook.com zu suchen, kann aber nichts anderes als dies finden . Bitte helfen Sie.
Mr_Green
@ Mr_Green das war's auch schon. Diese Funktion war "veraltet", kehrt aber jetzt zu den offiziellen Dokumenten zurück. Wie auch immer, ich glaube, meine Antwort deckt die Grundeinstellungen ab, damit es funktioniert.
Antonio Max
@AntonioMax bitte erkläre was s=100in deinem Beitrag steht?
Mr_Green
13

Fügen Sie das folgende Tag in das Feld ein head:

<link rel="image_src" href="/path/to/your/image"/>

Von http://www.facebook.com/share_partners.php

Ich bin mir nicht sicher, was als Standard in Abwesenheit dieses Tags ausgewählt wird.

Matt Bridges
quelle
12

Nach meiner Erfahrung verwendet http://www.facebook.com/sharer.php keine Meta-Tags. Es wird die Zeichenfolge verwendet, die Sie übergeben. Siehe unten.

http://www.facebook.com/sharer.php?s=100&p[title weiblich=Dies ist mein Titel & p [Zusammenfassung] = Dies ist meine Zusammenfassung & p [url] = http: //www.MYURL.com&&p [Bilder] [ 0] = http: //www.MYURL.com/img/IMAGEADDRESS

Die Meta-Tags funktionieren ebenso wie die anderen Open Graph-Informationen mit den Like / Send-Schaltflächen von Facebook-Entwicklern. Wenn Sie also eines der tatsächlichen Elemente von Facebook wie die Kommentare und dergleichen verwenden, wird dies alles mit dem Open Graph-Material verknüpft.

UPDATE: Es gibt zwei Möglichkeiten, den Sharer * zu verwenden. Beachten Sie das? S gegenüber dem? U-Wert in der Abfragezeichenfolge
1 ==> STRING: http://www.facebook.com/sharer.php?s + Inhalt von oben
~ ~> Zieht Informationen aus der Zeichenfolge.
2 ==> URL: http://www.facebook.com/sharer.php?u=url wobei url einer tatsächlichen URL entspricht
~~> Kratzt die im URL-Wert angegebene Seite
~~> Sie können die Werte testen hier: https://developers.facebook.com/tools/debug

Jason Lydon
quelle
Sehr hilfreich. Vielen Dank! : D
Aaron Gray
Gibt es eine legale Möglichkeit, diesen Sharer auf einer anderen Website zu verwenden, um den Inhalt von einer URL abzurufen? Ich weiß nicht viel über Facebook API und so ...
Lyth
Versuchen Sie es mit der URL-Option. Wenn die Seite OG-Tags hat, kratzt FB diese. Testen Sie die Seite, die Sie verwenden möchten, hier: developer.facebook.com/tools/debug
Jason Lydon
11

Alter Weg, funktioniert nicht mehr:

<link rel="image_src" href="http://yoururl/yourimage"/>

Neuer Weg gemeldet, funktioniert auch nicht:

<meta property="og:image" content="http://yoururl/yourimage"/>

Es hat zufällig am ersten Tag, an dem ich es implementiert habe, ab und zu funktioniert und seitdem überhaupt nicht mehr funktioniert.

Die Facebook-Linter-Seite, ein Dienstprogramm, das Ihre Seite überprüft, meldet, dass alles korrekt ist und zeigt die von mir ausgewählte Miniaturansicht an ... nur, dass die share.php-Seite selbst nicht zu funktionieren scheint. Es muss ein Fehler bei Facebook sein, den sie anscheinend nicht beheben möchten, da jeder Fehlerbericht zu diesem Problem, den ich in ihrem System gesehen habe, alle als behoben oder behoben gilt.

Das Ö
quelle
Ich habe auch dieses Problem. Der Linter meldet keinen Fehler und zeigt mein Bild korrekt an. Wenn ich jedoch auf meiner Website auf die Schaltfläche "Teilen" klicke, befindet sich absolut kein Bild in der Freigabeoberfläche.
Luke Griffiths
image_src funktioniert nicht mehr für Facebook, ABER einige Dienste verwenden es noch (Telegramm-Clients usw.)
Andres SK
10

Um Titel, Beschreibung und Bild zu ändern, müssen wir einige Meta-Tags unter dem Head-Tag hinzufügen.

SCHRITT 1:
Fügen Sie Meta-Tags unter dem Head-Tag hinzu 

<html>
<head>
    <meta property="og:url" content="http://www.test.com/" />
    <meta property="og:image" content="http://www.test.com/img/fb-logo.png" />
    <meta property="og:title" content="Prepaid Phone Cards, low rates for International calls with Lucky Prepay" />
    <meta property="og:description" content="Cheap prepaid Phone Cards. Low rates for international calls anywhere in the world." />

NÄCHSTER SCHRITT:
Klicken Sie auf den folgenden Link
https://developers.facebook.com/tools/debug

Fügen Sie Ihre URL in das Textfeld ein (z. B. http://www.test.com/). ) ein, in dem Sie die Tags erwähnt haben. Klicken Sie auf die Schaltfläche DEBUG.

Es ist fertig.

Sie können dies hier überprüfen: https://www.facebook.com/sharer/sharer.php?u=http://www.test.com/

In der obigen URL ist u = Ihr Website-Link

GENIESSEN !!!!

Gaurav123
quelle
Der Debugger war hilfreich.
konsolebox
2

Für sicheres HTTPS 

<meta property="og:image:secure_url" content="https://image.path.png" />
Stefan Michev
quelle
1

Dies hat bei mir funktioniert: Ich habe das gewünschte Miniaturbild direkt nach dem Tag auf der Seite platziert und es zu klein gemacht, um es zu sehen.

<img src="imagename.jpg" width="1" height="1" />

Ich habe es nicht mit Höhe 0 und Breite 0 getestet, aber es wird wahrscheinlich immer noch funktionieren. Dies garantiert nicht, dass der Benutzer dieses Bild auswählt.

AUCH es scheint, als würde Facebook die Miniaturansichten auf Ihrer Seite zwischenspeichern und nicht immer nach neuen suchen. Versuchen Sie, diese auf einer anderen Seite Ihrer Website hinzuzufügen, und Sie werden sehen, dass sie funktioniert.

daniel bernal
quelle
1
nach dem Tag - meinst du: "nach dem BODY-Tag"?
Alexis Wilke
Ja, ich glaube, das meinen sie. Ich habe dies vor langer Zeit auf einer Site gemacht, aber verwendet, style="display:none;"anstatt es auf 1x1 Pixel zu setzen.
Mike
1

Verwenden Sie den Facebook-Feed-Dialog anstelle des Freigabedialogs, um benutzerdefinierte Bilder anzuzeigen

Beispiel:

https://www.facebook.com/dialog/feed?app_id=1389892087910588
&redirect_uri=https://scotch.io
&link=https://scotch.io
&picture=http://placekitten.com/500/500
&caption=This%20is%20the%20caption
&description=This%20is%20the%20description
Kittu
quelle
0

Ich konnte Facebook nicht dazu bringen, das richtige Bild aus einem bestimmten Beitrag auszuwählen, also habe ich das getan, was auf dieser Seite beschrieben ist:

/webapps/18468/adding-meta-tags-to-individual-blogger-posts

Mit anderen Worten, so etwas:

<b:if cond='data:blog.url == "http://urlofyourpost.com"'>
  <meta content='http://urlofyourimage.png' property='og:image'/>
 </b:if>

Grundsätzlich werden Sie eine if-Anweisung im HTML-Code Ihrer Website hart codieren, damit der Meta-Inhalt für alles geändert wird, was Sie für diesen einen Beitrag geändert haben. Es ist eine unordentliche Lösung, aber es funktioniert.

Michelle Glauser
quelle