BLOG

Wozu braucht es OG Meta Tags?

Wir stellen dir in einer 5-teiligen Blogserie verschiedene Themen vor, mit denen du beim Aufbau einer neuen Webseite bestimmt in Kontakt kommen wirst. In diesem Beitrag stellen wir die OG-Metatags vor.


Frank Zinsli - 15. Dezember 2022

SERIE-POST 3/5 | WEBENTWICKLUNG - AUFBAU EINER WEBSEITE - BLOGSERIE

Die anderen Artikel dieser Reihe beschäftigen sich mit Cookies, Sitemaps, Robots und Redirects.


Kurzer Abriss

Worum geht’s? Um OG Meta Tags, die gebraucht werden, um Webseiten als Social-Media-Shares korrekt anzeigen zu lassen.

Wieso sollte ich Bescheid wissen? Ob auf LinkedIn, WhatsApp oder im Slack: Wenn deine Webseite geteilt wird, sollst du entscheiden können, wie sie angezeigt wird. Mit OG Meta Tags wird das möglich.

Warum ist das wichtig? Wenn Personen deine geteilte Webseite sehen, ist das die erste Visitenkarte, die hinterlassen wird. Der erste Eindruck muss stimmen.

Wie machen wir das bei Code Crush? Jede unserer Webseiten wird mit OG Meta Tags für diverse Einbindungen optimiert. Mit Nuxt, dem von uns meist verwendeten Frontend-Framework, ist die Einbindung von Metatags spielend einfach.



OG Meta Tags !== SEO Meta Tags


Wenn du dich schon mal mit SEO auseinandergesetzt hast, weisst du, dass für eine optimale Suchmaschinenoptimierung neben dem ganzen Inhalt auf der Webseite zwei Meta Angaben essenziell sind. Title und die Description.

OG Meta Tags sind ziemlich ähnlich, sie legen jedoch nicht fest, unter welchen Begriffen du gefunden wirst, sondern sie definieren das Aussehen der Vorschau des geteilten Links auf einer Social Media Plattform.



Was kann mit OG Meta Tags festgelegt werden?


OG Meta Tags sind dazu da, damit du selber festlegen kannst, wie deine Seite dargestellt wird, wenn sie geteilt wird. Sei das in einem Chat-Messenger wie Telegram oder Whatsapp, in geschäftlichen Messengern wie Slack oder Teams oder auf den Sozialen Medien wie Twitter oder Facebook.

Die wichtigsten Dinge, die definiert werden können, sind...
... ein Bild
... ein Titel
... und eine Beschreibung.


Grundlegende Metatags für Sharing


Damit deine Webseite beim Sharing gut aussieht, musst du folgende OG-Metatags gesetzt haben.


Title

    
      <meta property="og:title" content="Webseite Code Crush" />
    
  

Am besten 50 - 60 Zeichen, maximal 95 Zeichen.


Description

    
      <meta property="og:description" content="Wir entwickeln schnelle Webseiten und Web-Apps.">
    
  

Maximal 297 Zeichen.


Type

    
      <meta property="og:type" content="website" />
    
  

Grundsätzlich ist der Type immer Webseite.


Image

    
      <meta property="og:image" content="https://codecrush.ch/image.png" />
    
  

Format 1.9:1, Mindestens 1200 px breit, Empfehlung 1200 × 630px


URL

    
      <meta property="og:url" content="https://www.codecrush.ch" />
    
  

Die aktive URL.

Nebst diesen fünf Tags gibt's auch noch weitere, die jedoch nur in sehr seltenen Fällen relevant sind. Mit diesen fünf OG Meta Tag's fährst du sicher immer gut.


OG Meta Tags für Twitter


Wie überall im Leben gibt es immer Ausnahmen. Bei den OG Meta Tags ist Twitter die Ausnahme. Damit dir für diese Plattform eine schöne Vorschau generiert wird, müssen weitere, für Twitter spezifische Metatags gesetzt werden.


Twitter Card

    
      <meta name="twitter:card" content="summary_large_image">
    
  

Entweder summary (kleines Thumbnail) oder summary_large_image (grosses Thumbnail)


Twitter URL

    
      <meta property="twitter:url" content="https://codecrush.ch/">
    
  

Die aktive URL.


Twitter Title

    
      <meta property="twitter:title" content="Webseite Code Crush">
    
  

Gleich wie beim OG Title Tag.


Twitter Description

    
      <meta property="twitter:description" content="Wir entwickeln schnelle Webseiten und Web-Apps.">
    
  

Gleich wie beim OG Description Tag.


Twitter Image

    
      <meta property="twitter:image" content="https://codecrush.ch/image.png">
    
  

Gleich wie beim OG Image Tag.

Sobald du diese Tags nachgeführt hast, wird deine geteilte Webseite auf allen Plattform top aussehen!


Testing


Um herauszufinden, ob deine Webseite die richtigen OG-Meta-Tags verwendet, kann das Tool metatags.io oder opengraph.xyz genutzt werden. Anhand deiner URL werden Vorschauen für die gängigsten Plattformen wie Google, Facebook und Twitter angezeigt.


Frank Zinsli bei Code Crush
Autor:in

Frank Zinsli

Umgeben von Herausforderungen fühle ich mich am wohlsten. Am liebsten arbeite ich mit den neusten Technologien und versuche zu verstehen wie diese Funktionieren. Wenn am Abend der Kopf raucht und nichts mehr geht, dann weiss ich, es war ein guter Tag.