Facebook Post Link Bild

95

Wenn jemand einen Link auf Facebook veröffentlicht, durchsucht ein Skript diesen Link normalerweise nach Bildern und zeigt eine kurze Miniaturansicht neben dem Beitrag an. Für bestimmte URLs (einschließlich meiner) scheint FB jedoch nichts aufzunehmen, obwohl es sich um eine Reihe von Bildern auf dieser Seite handelt.

Ich habe gelesen, dass FB das rel-Tag "image_src" für das Bild bevorzugt, das der Benutzer angeben möchte, aber dies generiert auch keine Miniaturansicht für meine Site.

Meine URL geht direkt zum DNS und wird nicht weitergeleitet, daher kann ich mir nicht vorstellen, dass dies auch das Problem sein könnte.

Hat jemand eine Idee, warum FB keine Thumbnails von meiner Site generieren kann?

facebook  thumbnails 
— GEOCHET
quelle
Es wäre hilfreich, wenn Sie uns einen Link zu Ihrer Website geben würden (oder einen anderen, der nicht funktioniert) - dies könnte einige Ideen hervorrufen.
— Nick Fortescue
Hier können Sie sehen, wie es funktioniert! Ich baue es mit PHP + jQuery. Der Quellcode steht zum Download zur Verfügung. Ich hoffe dir gefällt es! lab.leocardz.com/facebook-link-preview-php--jquery
— Leonardo Cardoso
und wenn Sie das gleiche auf Google Plus tun möchten, ist hier der am besten referenzierte Link, den ich finden konnte: stackoverflow.com/questions/7985398/…
— cregox
— dcorking

Antworten:

119

Der einfachste Weg ist nur ein Link-Tag:

<link rel="image_src" href="http://stackoverflow.com/images/logo.gif" />

Es gibt jedoch noch einige andere Dinge, die Sie Ihrer Website hinzufügen können, um sie Social Media-freundlicher zu gestalten:

Öffnen Sie Graph Tags

Open Graph-Tags sind Tags, die Sie <head>der Website hinzufügen, um die Entität zu beschreiben, die Ihre Seite darstellt, unabhängig davon, ob es sich um eine Band, ein Restaurant, einen Blog oder etwas anderes handelt.

Ein Open Graph-Tag sieht folgendermaßen aus:

<meta property="og:tag name" content="tag value"/>

Wenn Sie Open Graph-Tags verwenden, sind die folgenden sechs erforderlich:

  • og:title - Der Titel des Unternehmens.
  • og:type- Der Entitätstyp. Sie müssen einen Typ aus der Liste der Open Graph-Typen auswählen.
  • og:image- Die URL zu einem Bild, das die Entität darstellt. Bilder müssen mindestens 50 x 50 Pixel groß sein. Quadratische Bilder funktionieren am besten, aber Sie dürfen Bilder verwenden, die bis zu dreimal so breit wie hoch sind.
  • og:url- Die kanonische, permanente URL der Seite, die die Entität darstellt. Wenn Sie Open Graph-Tags verwenden, wird über die Schaltfläche "Gefällt mir" ein Link zu og:urlder URL anstelle der URL im Code der Schaltfläche "Gefällt mir" angezeigt.
  • og:site_name - Ein für Menschen lesbarer Name für Ihre Site, z. B. "IMDb".
  • fb:adminsoder fb:app_id- Eine durch Kommas getrennte Liste der Facebook-IDs von Seitenadministratoren oder einer Facebook-Plattform-Anwendungs-ID. Geben Sie mindestens nur Ihre eigene Facebook-ID an.

Weitere Informationen zu Open Graph-Tags und Details zur Verwaltung Ihrer Seite finden Sie in der Open Graph-Protokolldokumentation.

http://developers.facebook.com/docs/reference/plugins/like

— WyrdNEXUS
quelle
5
Ich habe diesen Fehler vom Flusenwerkzeug erhalten. All the images referenced by og:image must be at least 200px in both dimensions. Please check all the images with tag og:image in the given url and ensure that it meets the minimum specification.. Nur ein Fyi
— Trevor
Ich habe og-Tags in meinen Code eingefügt und als ich ihn mit dem og object debugger-Tool von Facebook getestet habe, werden mir die korrekten Informationen angezeigt, die ich in og-Tags gespeichert habe. Wenn ich jedoch versuche, die Seite in meinem fb-Konto zu verknüpfen, wird die angezeigt Nur zwischengespeicherte Kopie. Wie viel Zeit fb hält die zwischengespeicherte Kopie? Gibt es eine andere Möglichkeit, die zwischengespeicherte Kopie zu leeren?
— KAsh
Um Sie wissen zu lassen, besteht die einzige Möglichkeit, einem Beitrag ein Bild hinzuzufügen, wenn Sie AppLinks ( applinks.org ) in der Facebook-App verwenden, darin, das <link> -Tag zu verwenden, wobei ein <meta> -Tag mit og: image NICHT funktioniert .
— Emerino
Dies hat eine Liste von Typen usw. und einige andere nützliche Informationen.
— Wilf
61

Ich weiß, dass diese Frage alt ist, aber ich habe mich kürzlich mit genau dem gleichen Problem befasst und ein paar Wochen lang darüber nachgedacht. Bei mehreren Suchanfragen bei Google wurden viele nützliche Informationen gefunden, die sich jedoch größtenteils auf Open Graph-Tags konzentrierten, an deren Verwendung ich nicht interessiert war. Es stellte sich heraus, dass meine Website mehrere Probleme hatte, aber hier sind einige der Grundlagen.

  1. Stellen Sie, wie EightyEight sagte, sicher, dass Ihr HTML gültig ist - und dasselbe gilt für Ihr Javascript und den serverseitigen Code (PHP, ASP usw.). Ich hatte einen kleinen PHP-Fehler in einem Code, der als separater Aufruf des Servers von der Hauptseite ausgeführt wurde. Aufgrund einer Reihe bizarrer Zufälle erzeugte dieser Code einen Fehler von 500 - jedoch NUR für IE6 und strenge Parsing-Engines wie den W3C-Validator und den Facebook-Seiten-Crawler. Das Problem trat in modernen Browsern (Chrome 4, FF 3.5, IE 8 usw.) nicht auf, sodass ich es nicht sofort sah, aber ältere / strengere Clients zeigten jedes Mal die 500 an, und das war der Hauptgrund, warum FB nicht war Crawlen Sie unsere Seite nicht (wenn alles andere korrekt zu sein schien).

  2. In Bezug auf Randys Antwort hat er Recht, dass Facebook eine alte zwischengespeicherte Kopie Ihrer Seite lange nach der Aktualisierung aufbewahrt. FB behauptet, dass es nur 24 Stunden gehalten wird, aber ich habe viel längere Zeiten erlebt. Glücklicherweise hat FB sein "URL Linter" -Tool veröffentlicht, das Ihnen eine Vorschau zeigt, wie Ihre Seite angezeigt wird, wenn sie auf FB geteilt wird, und FB dazu zwingt, den Cache Ihrer Seite sofort zu aktualisieren. Dies war ein lebensrettendes Werkzeug. Sie finden es unter http://developers.facebook.com/tools/lint/

  3. Beachten Sie beim URL Linter-Tool, dass jede Variation einer URL separat auf Facebook zwischengespeichert wird, sodass "www.example.com" nicht mit "example.com" identisch ist. Außerdem wird eine eindeutige Großschreibung gespeichert, sodass "ExampleOne.com" nicht mit "exampleone.com" identisch ist. (Dies führte zu großer Verwirrung zwischen meinem Client und mir, als sich herausstellte, dass der Cache einwandfrei aktualisiert wurde und der Client behauptete, die Updates nicht zu sehen. Es stellte sich heraus, dass ich auf exampleone.com schaute und verwendet hatte Linter, um den Cache zu aktualisieren, aber sie haben sich exampleOne.com angesehen, das ich nicht an Linter gesendet hatte. Infolgedessen habe ich einige Variationen der URL an Linter gesendet, nur um die Grundlagen abzudecken.)

  4. Der Rat von WyrdNEXUS, das Link-Tag image_src zu verwenden, ist genau richtig. Auf diese Weise können Sie sicher sein, dass FB das bestmögliche Bild für Ihre Seite erstellt. Es gibt verschiedene Richtlinien, welche Spezifikationen die Bilddatei haben sollte, aber ich habe erfolgreich ein quadratisches Bild mit 128 Pixel verwendet und auch ein Bild mit 130 x 97 Pixel gesehen. Hier ist die offizielle Dokumentation von Facebook unter http://developers.facebook.com/docs/reference/plugins/like/ :

    Bilder müssen mindestens 50 x 50 Pixel groß sein. Quadratische Bilder funktionieren am besten, aber Sie dürfen Bilder verwenden, die bis zu dreimal so breit wie hoch sind.

    Natürlich ändert FB die Größe eines großen Bildes für Sie, aber Sie erzielen fast immer bessere Ergebnisse, wenn Sie die Größe zuvor selbst ändern.

  5. Vermeiden Sie in Bezug auf den Link von Mike Cooper zum eHow-Artikel die Verwendung von Schritt 1 in diesem Artikel. Es war ein gültiger Rat, als der Artikel geschrieben wurde und als Mike den Link veröffentlichte. Jetzt ist es besser, das URL Linter-Tool zu verwenden, um eine Vorschau der Darstellung Ihrer Seite beim Teilen anzuzeigen. Wenn Sie Linter verwenden, wird FB keine (möglicherweise) fehlerhafte Kopie der Seite zwischenspeichern, bevor Sie die Möglichkeit haben, sie zu optimieren.

— OneRuler
quelle
Ich hatte tagelang Probleme und hatte mein Miniaturbild nicht richtig aktualisiert. Das Facebook Linter Tool hat mein Problem sofort behoben - es hat Facebook dazu gebracht, seinen Cache zu aktualisieren! Hurra!
— Hady
Vielen Dank für das Linter-Tool. Einige Beiträge in meinem Blog zeigten Bilder, andere nicht, obwohl es sich um eine datenbankgesteuerte Website handelt. Wenn Sie die URL der betreffenden Seite in die URL Linter einfügen, wird das Bild zwischengespeichert! Woo-HOO!
— Kristina Childs
4
Das Fusselwerkzeug hat seinen Namen geändert. jetzt ist es nur noch debuggen : developer.facebook.com/tools/debug - soweit ich das beurteilen kann, ist dies die tl; dr- version von all dem: benutze einfach das tool!
— Cregox
11

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 (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
Bitte posten Sie nicht genau dieselbe Antwort auf mehrere Fragen: Entweder passt sie nicht für alle oder die Fragen sind Duplikate, die als solche gekennzeichnet / geschlossen werden sollten.
— Kleopatra
Hallo Kleopatra, ich dachte daran, die Antwort zu posten, um anderen zu helfen. Ich denke, Ihr Punkt ist völlig gültig. Ich werde mich darum kümmern. Danke Freund
— Gaurav123
@ Gaurav123 der Testlink ist tot. Ich habe es jedoch überprüft, indem ich mich auf Facebook gemeldet habe. Vielen Dank für die sehr hilfreiche Antwort!
— Gsamaras
2

Wenn Sie bereits versucht haben, diese Seite auf Facebook zu verlinken, bevor Sie den Link "image_src" hinzufügen, verwendet Facebook weiterhin die alte zwischengespeicherte Kopie und sieht Ihre Änderungen nicht einmal. Versuchen Sie, die URL zu ändern, indem Sie das 'www' entfernen oder hinzufügen, oder duplizieren Sie Ihre Seite, um sie zu testen.

— Geil
quelle
1

Ich habe festgestellt, dass Facebook keine Miniaturansichten von Websites nimmt, wenn diese mit https beginnen. Ist das vielleicht Ihr Fall?

— raRaRa
quelle
1

hatte das gleiche Problem und stellte fest, dass mein Kopfschließungsetikett an der falschen Stelle war

— Diego
quelle
0

Alte Frage, aber vor kurzem schien ich auf dasselbe Problem zu stoßen, da Miniaturbilder von meinem Link nicht in Statusaktualisierungen auf Facebook angezeigt wurden. Ich poste für viele Kunden und das ist relativ neu.

FB scheint keine langen URLs mehr zu mögen. Wenn Sie einen URL-Shortener wie goo.gl oder bitly.com verwenden, wird das Miniaturbild Ihres Links / Posts in Ihrem FB-Update angezeigt.

— Karen Kouf
quelle
0

Versuchen Sie Folgendes:

<link rel="image_src" href="http://yoursite.com/graphics/yourimage.jpg" /link>`

Scheint in Firefox einwandfrei zu funktionieren, solange Sie einen vollständigen Pfad zu Ihrem Bild verwenden.

Das Problem ist, dass es aus irgendeinem Grund vertikal nach unten versetzt wird. Das Bild ist 200 x 200, wie irgendwo empfohlen.

— user2494810
quelle
Ich beabsichtige, den Code für ein Link-Tag zu veröffentlichen, das nicht veröffentlicht wurde, weil ich dumm bin. Es tut uns leid.
— user2494810
-1

Wenn Sie ein Plugin für SEO verwendet haben, überprüfen Sie zunächst Ihre SEO-Plugin-Einstellungen. Finden Sie dann die Noindex-Einstellung heraus, wenn Sie Medien für Noindex aktivieren, und deaktivieren Sie sie.

— Milon Patowary
quelle
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.