facebook - scrappen - og:image




Wie wählt Facebook Sharer beim Teilen meiner URL Bilder und andere Metadaten aus? (8)

Wie sage ich Facebook, welches Bild verwendet werden soll, wenn meine Seite geteilt wird?

Facebook verfügt über eine Reihe von Open-Graph-Meta-Tags , anhand derer sich entscheiden lässt, 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, sucht sie nach ihrer älteren Methode zur Angabe eines Bildes: <link rel="image_src" href="/myimage.jpg"/> . Wenn keine vorhanden sind, prü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. JPEG- oder GIF-Format.

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

Ja, Sie müssen nur mehrere Bildmetatags in der Reihenfolge hinzufügen, in der sie angezeigt werden sollen. Dem Benutzer wird dann ein Bildauswahldialog angezeigt:

Ich habe die entsprechenden Bildmetatags angegeben. Warum akzeptiert Facebook die Änderungen nicht?

Sobald eine URL freigegeben wurde, greift der Crawler von Facebook, der über einen User-Agent von facebookexternalhit/1.1 (+https://www.facebook.com/externalhit_uatext.php) , auf Ihre Seite zu und speichert die Metainformationen zwischen. Um zu erzwingen, dass Facebook-Server den Cache leeren, verwenden Sie das Facebook URL Debugger / Linter Tool , das im Juni 2010 gestartet wurde , 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 anstatt nur /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, also sind alle Metatags, die beim Herunterladen der Seite vorhanden sind, die Meta-Tags, die für die Bildauswahl verwendet werden.

Durch das Hinzufügen dieser Tags wird meine Seite nicht mehr validiert. 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">  

Bei der Nutzung von Facebook Sharer bietet Facebook dem Nutzer die Möglichkeit, eines der wenigen Bilder aus der Quelle 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?


Ab 2013 können Sie, wenn Sie facebook.com/sharer.php (PHP) verwenden, einfach einen Button / 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>

Abfrageparameter verknüpfen:

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 brauchen keine js oder andere Einstellungen. Ist nur ein HTML-Rohlink. Formatieren Sie das A-Tag auf beliebige Weise.


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

http://www.facebook.com/sharer.php?s=100&p[title]=THIS IST MEIN TITEL & p [Zusammenfassung] = DAS IST MEINE ZUSAMMENFASSUNG & p [url] = http://www.MYURL.com&&p[images][0]=http://www.MYURL.com/img/IMAGEADDRESS

Die Meta-Tags funktionieren mit den Facebook-Entwicklern Like / Send-Buttons, ebenso wie die anderen Open Graph-Informationen. Wenn Sie also eines von Facebooks tatsächlichen Elementen wie den Kommentaren und so verwenden, wird das alles mit den Open Graph-Dingen zusammenhängen.

UPDATE: Es gibt zwei Möglichkeiten, den Sharer zu verwenden: * Notieren Sie sich den? S-Wert im Vergleich zum u-Wert in der Abfragezeichenfolge
1 ==> STRING: http://www.facebook.com/sharer.php?s + Inhalt von oben
~~> Wird Informationen aus der Zeichenfolge ziehen.
2 ==> URL: http://www.facebook.com/sharer.php?u=url wobei URL gleich einer tatsächlichen URL ist
~~> Schabt die im URL-Wert angegebene Seite
~~> Sie können die Werte hier testen: https://developers.facebook.com/tools/debug


Das hat bei mir funktioniert: Ich habe das gewünschte Miniaturbild direkt nach dem Tag auf die Seite gelegt 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ählen wird ..

AUCH scheint Facebook die Thumbnails auf Ihrer Seite zwischenzuspeichern und prüft sie nicht immer auf neue. Versuchen Sie, diese Seite zu einer anderen Seite Ihrer Site hinzuzufügen, und Sie werden sehen, dass es funktioniert.



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

https://webapps.stackexchange.com/questions/18468/adding-meta-tags-to-individual-blogger-posts

Mit anderen Worten, etwa so:

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

Im Grunde werden Sie eine if-Anweisung hart in den HTML-Code Ihrer Site codieren, damit sie den Meta-Inhalt für das ändert, was Sie für diesen einen Beitrag geändert haben. Es ist eine chaotische Lösung, aber es funktioniert.


Um den Titel, die Beschreibung und das Bild zu ändern, müssen einige Meta-Tags unter dem Kopf-Tag hinzugefügt werden.

SCHRITT 1 :
Fügen Sie Meta-Tags unter dem Kopf-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/ ), wo Sie die Tags erwähnt haben. Klicken Sie auf DEBUG-Schaltfläche.

Es ist fertig.

Sie können hier https://www.facebook.com/sharer/sharer.php?u=http://www.test.com/ verifizieren

In der obigen URL, u = Ihr Website-Link

GENIESSEN !!!!


Wenn Sie für Facebook freigeben, müssen Sie in Ihrem Kopfabschnitt 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 entsprechend dem FB hinzu.

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





facebook-sharer