Wozu braucht es OG Meta Tags?

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.