OG Tags für die eigene Webseite

Meta Tags sind ja für den Betrachter nicht sofort sichtbare Kennzeichnungen im HMTL Quellcode einer Webseite. Solche Metatags dienen dazu, eine Webseite zu "kennzeichnen", also ihr Informationen mitzugeben, die z.B. Google helfen, den Inhalt zu "erkennen".

Einen Meta Tag kennt ihr alle und könnt Ihr im Browser sehen. Das ist TITLE:

Ganz oben im blauen Balken eures Browsers erscheint er. Achten nur die wenigstens drauf. Und nicht nur dort erscheint er: Google zeigt den auch als blauen, klickbaren Link in seiner Suche an. Und auch Facebook zeigt ihn, wenn kein spezieller Titel allein dafür existiert. Dazu weiter unten.

Steht also oben im blauen Balken nur "Home", solltet ihr den Webdesigner wechseln ;-) Ebenso wenn dieser Title länger als 65 Zeichen ist - oder so etwas wie "Herzlich Willkommen" drin steht - Platzverschwendung. Suchwortgestammel ist dort ebenso sinnlos - nur die wichtigsten sollte da rein. In Blau steht da, was der Kunde auch sieht - den muss es "locken".

In Google sehen wir nun so aus:

 

Facebook ist da nicht so eingeschränkt. Und funktioniert auch anders.  Man kann einen zweiten Titel einbringen, der ganz anders ist. Der würde mit meta property="og:title" beginnen.Wenn man unsere Homepage auf Facebook teilt, sieht das dann so aus:

 

Schaut mal: Zwei unterschiedliche Namen. Haben wir nach Zielgruppe gewählt.

Es gibt andere Meta Tags, die man nicht so leicht sehen kann. Um zu das anschauen zu können, gibt es  in jedem Browser die Möglichkeit, sich den HTML Quellcode anzeigen zu lassen. Rechte Taste, und bei IE erscheint "Quellcode anzeigen" bzw. beim Firefox "Seitenquelltext anzeigen". Sieht auf den ersten Blick wie eine Textwüste aus.

Der Aufbau ist aber recht  simpel. HMTL Kommandos fangen mit <Name der Anweisung> an und werden mit einem </Name der Anweisung> geschlossen. Der Bereich, in den die Meta Tags stehen, beginnt mit <head> und wird mit </head> abgeschlossen.

Head spricht schon für sich - Kopf. Und wie im richtigen Leben sollte ein Kopf gefüllt sein. Hier ist z.B. der Head unserer Hompepage (vorsicht, chinesisch):

 <head>
   <title>Webdesign, Facebook und Netzwerke - Blenn-Solutions - Essen</title>
   <meta name="description" content="Webdesign mit Referenzen, Facebook Apps, Suchmaschinenoptimierung, Netzwerkspezialisten in Essen Altenessen" />
   <meta name="robots" content="index" /> 
   <meta name="Author" content="Rolf Blenn" />
   <meta name="Keywords" content="webdesign, homepage, Facebook, apps, videoueberwachung, computernetze, service, web, internet, essen, norman, wortmann, terra, magic" />

   <meta property="og:title" content="Blenn-Solutions - Webseite der IT Firma in Essen" />
   <meta property="og:url" content="http://www.blenn-solutions.de/" />
   <meta property="og:site_name" content="Blenn-Solutions"/>
   <meta property="fb:admins" content="100000267418534" />
   <meta property="fb:page_id" content="121845631203388" />
   <meta property="og:description" content="Internet und Netzwerkfirma in Essen-Altenessen. Wir haben einen eigenen Webserver auf dem auch Facebook Apps laufen." />
   <meta property="og:image" content="http://www.blenn-solutions.de/facebook-logo.jpg" />
</head>

 

Wer etwas englisch kann, wird einiges schon verstehen.

Auf Facebook sind diese Tags auschlaggebend dafür, wie eine externe Webseite angezeigt und eingeordnet wird. Man kann einen Titel definieren, eine Beschreibung und eine Grafik. Jetzt wißt ihr, warum manche Links auf Facebook "komisch" aussehen.

Findet Facebook keine OG:Tags, versuchen sie aus den "normalen" Tags Informationen zu extrahieren. Deswegen sehen manche Webseiten beim Teilen "komisch" aus. Wer aber seine Webseite in Facebook richtig steuern will, sollte sich um die OG: Tags kümmern. Guck mal oben: Der Seite für Google ist anders als die in Facebook.

 

Zwei im Juni 2013 eingeführte Tags definieren die Herkunft:

<meta property="article:publisher" content="https://www.facebook.com/blenn.solutions" />

Ein Publisher ist ja im Grunde der Verleger. Hier kann man den Link zur "Gefällt mir" Seite eintragen, die für den Artikel verantwortlich ist. Wird der Link nun auf FB geteilt, kann Facebook direkt darunter auch einen Gefällt mir Button zur Herkunftssseite einfügen.

Das gleiche gibt es auch für das Personenprofil des Autors

<meta property="article:author" content="https://www.facebook.com/rolf.blenn" />

Anstalle eines "Gefällt mir" Button erscheint hier im Posting der Abonnieren Button. Voraussetzung ist natürlich, das beim Autorenprofil auch abonnieren erlaubt ist.

Ist in der Original Ankündigung von Facebook als Bild zu sehen.


Es gibt folgende og Tags:

  • og:title - Das Wichtigste : der Name einer Seite. So heißt sie und wird in Facebook so dargestellt.
  • og:type - Der "Typ" der Seite, also was für eine Art Seite es ist.

Facebook akzeptiert folgende Typen:

  1. Article
  2. Blog
  3. Book
  4. Profile (External)
  5. Movie
  6. TV Episode
  7. TV Show
  8. Video
  9. Website
  • og:image - Die Adressse einer Grafik. Die legt man auf seinen Webspace. Wir haben unser Logo angegeben. Immer wenn jetzt jemand uns selbst verlinkt, erscheint dieses Logo als eine der Grafiken zur Auswahl. Es gibt verschiedene Aussagen über die Größe, seitdem die Bildanzeige auch bei Links größer geworden ist. Wir haben schon gute Erfahrungen schon bei 450x250 Pixel gemacht. Facebook &Journalists sagt: The recommended og:image size for your website is now 1200x627px; Minimum is 560x292px. Bei Text ist darauf zu achten, das die "alte" rechteckige Form ja an einigen Stellen noch erscheint.


Sieht dann so aus:

  • og:description - Ganz wichtig: die Beschreibung der Seite.
  • og:url- Das ist die tatsächliche Adressse der Seite selbst.
  • og:Admin - dies bestimmt, wer der Admin der Seite ist. Das ist besonders interessant für das oben schon erwähnte Comments Plugin. Nur der Admin der Seite darf dort Kommentare z.B. löschen oder einen User sperren.

Die Admin Nummer ist die ID eures Facebook Accounts. Kriegt ihr sehr einfach raus: Wenn ihr euer Profil anseht, steht oben im Browser die Adresse. Ich stehe ja dort als https://www.facebook.com/rolf.blenn Ihr braucht jetzt nur www gegen das Wort graph tauschen, also bei mir http://graph.facebook.com/rolf.blenn Da steht die ID.

Das sind nur die wichtigsten. Es gibt z.B. auch Tags, die eure geographische Position definieren. Und noch viele mehr. Das würde aber hier zu weit führen. Auf Facebook gibt es eine Referenz dazu.

Jeder kann testen, wie seine Seite für Facebook "aussieht". Dazu gibt es den Debugger. Da Facebook diese Infos speichert, kann man den Debugger auch prima dafür benutzen, veraltete Infomationen neu zu laden. Er macht das bei jedem Aufruf. Schaut mal diese Seite im Debugger.

Nutzt man ein Content Management wie Joomla oder Word Press, kann dort ein passendes Plugin installiert werden, das der Seite diese Tags hinzufügt. Speziell die Bild Vorschau, wenn man eine Web-Seite auf Facebook teilt, läßt sich so definiineren. Facebook hat spezielle Ansprüche, so z.B. darf das Bild nicht zu groß sein und muß ein passendes Seitenverhältnis haben. Ob mit oder ohne Metatags, der Debugger ist auch her das richtige Werkzeug, um sich Seiten aus der Sicht von Facebook anzeigen zu lassen - und eben das Vorschaubild zu prüfen, bzw. zu ändern, wenn FB keines anzeigen will.

 

Eine recht gute Übersicht findet sich auch auf der Seite: http://ogp.me/

Ansonsten: Gebt uns doch einfach den Auftrag, wenn es eine professionelle Webseite z.B. eurer Firma ist.

Wir haben auch diesen Artikel mit og:tags "ausgestattet":

Teilt ihn doch mal mit der Funktion hier unten. Dann seht ihr auch, wie Facebook diese Seite durch die OG Tags "sieht".

Artikel nützlich? Wir freuen uns über Teilen und Gefällt mit.

Powered by Web Agency
1 1 1 1 1 1 1 1 1 1 Rating 4.21 (26 Votes)