Neben den üblichen RSS-Feeds biete ich die Benachrichtigung über neue Beiträge auch in den „sozialen Medien“ an. Über Google Plus, Twitter und natürlich auch über Facebook könnt ihr euch informieren lassen, wenn es einen neuen Beitrag auf dieser Seite gibt. Das ist ja soweit nichts Neues und viele Leser nutzen diese Möglichkeiten ja schon. Nach ein paar Umstrukturierungen ist mir dann aber aufgefallen, dass vor allem bei Facebooks die shared-Links nicht sonderlich schön dargestellt werden. Wer will kann sich vom „war“-Zustand auf der Facebook-Page überzeugen. Dies sollte ja doch auch anders gehen, also habe ich mich mit dem Sharing auseinander gesetzt und Spannendes recherchiert.
Wenn man bei Facebook einen Link teilt, dann sieht man eine kurze Vorschau, bestehend aus einem Bild, kurzem Anriss-Text, Link etc. Diese Informationen werden von Facebook von einem Skript erstellt, das die URL die man teilen möchte besucht und aus den dort vorhandenen Daten genau diese Vorschau generiert. Wie das bei solchen Skripten eben so ist, sind die nur mehr oder weniger gut, da es sich bei einer Webseite ja schon um ein komplexeres Konstrukt handeln kann. Welches Bild soll man denn anzeigen, ist ein Logo vorhanden, oder ein Beitragsbild? Das sind alleine ein paar Fragen, die man sich stellen muss, wenn man nur ein Blog besucht. Das Skript soll aber recht allgemein gültig sein und muss von daher alle möglichen Varianten sinnvoll auseinander „basteln“.
Wenn man sehen möchte, wie das im Detail aussieht, kann man sich eine URL einfach mal im Facebook Debugger anschauen und bekommt dort auch hilfreiche Tipps.
Facebook unterstützt auch noch spezielle Meta-Tags. Dabei werden Properties verwendet, die dem Open Graph Protocol entsprechen. Diese speziellen Properties werden üblicherweise mit dem Namespace og eingeleitet. Auf jeden Fall angeben sollte man die Properties title, image, type und url. Title und URL sind selbsterklärend. Image verweist auf das Bild, das bei dem Opengraph Objekt verwendet werden soll. Und der Type wird im Open Graph Protocol vorgegeben. Für ein Blog nutzt man auf den Beitragsseiten article und bei der Hauptseite website. book, video und music stehen auch noch in verschiedenen Ausprägungen zur Verfügung. Wenn man also Open Graph mit einer beliebigen Webseite benutzt, sollte man darauf achten, dass man den passenden Type auswählt.
Bei einem Blog ist auch noch die description wichtig, denn hiermit kann man steuern, wie viel und was eines Beitragstextes auf Facebook zu sehen ist.
Wenn man mit Tags (oder „Schlagwörter“) arbeitet, dann ist article:tag noch wichtig. Dabei handelt es sich um ein Array von Tags. Das bedeutet die Property darf mehrfach benutzt werden und wird durch diese Mehrfachnutzung als Array interpretiert und nicht etwa überschrieben.
Mit all diesen Informationen ausgestattet bietet ein Blog für Facebook gleich einen Mehrwert und man hat eine bessere Kontrolle über die Darstellung bei Facebook. Als Gimmick interpretiert auch Google+ diese Informationen und man erhält auch hier eine schönere Darstellung, wenn man einen Link teilt.
Diese Seite hat bspw folgende Meta-Tags im Seiten-head integriert:
<meta property="og:locale" content="de_DE"> <meta property="og:type" content="article"> <meta property="og:title" content="Facebook Open Graph Meta Tags für Webseiten - Phpmonkeys"> <meta property="og:description" content="Neben den üblichen RSS-Feeds biete ich die Benachrichtigung über neue Beiträge auch in den “sozialen Medien” an. Über Google Plus, Twitter und natürlich auch über Facebook könnt ihr euch informieren lassen, wenn es einen neuen Beitrag auf dieser Seite gibt. … Weiterlesen →"> <meta property="og:url" content="https://www.phpmonkeys.de/2014/11/14/facebook-open-…fuer-webseiten/"> <meta property="og:site_name" content="Phpmonkeys"> <meta property="article:publisher" content="https://www.facebook.com/pages/PHPMonkeysde/134865513254068"> <meta property="article:tag" content="facebook"> <meta property="article:tag" content="Open Graph"> <meta property="article:tag" content="Social Media"> <meta property="article:tag" content="seo"> <meta property="article:section" content="Allgemein"> <meta property="article:published_time" content="2014-11-14T10:40:00+02:00"> <meta property="og:image" content="https://www.phpmonkeys.de/wp-content/uploads/2014/07/10406380_695636930510254_2658785297442343818_n.png">
Übrigens sollen die Infos auch für SEO interessant sein und wer WordPress nutzt kann die Funktionalität mit einem Plugin nachrüsten.