Auffindbarkeit in sozialen Netzwerken

Sie können beeinflussen, wie Ihre Website angezeigt wird, wenn sie in sozialen Medien geteilt wird, indem Sie jeder Seite ein paar Zeilen Code hinzufügen. So können Sie mehr Nutzer auf Ihre Website aufmerksam machen, da die Vorschauen mehr Informationen enthalten, als sonst verfügbar wären.

Eiji Kitamura

Du kannst beeinflussen, wie deine Website angezeigt wird, wenn sie in sozialen Medien geteilt wird, indem du jeder Seite ein paar Zeilen Code hinzufügst. So können mehr Nutzer auf deine Website aufmerksam werden, da Vorschauen mit mehr Informationen als sonst verfügbar sind.

Zusammenfassung

• Verwenden Sie schema.org-Mikrodaten, um Seitentitel, Beschreibung und ein Bild für Google+ anzugeben.
• Verwenden Sie das Open-Graph-Protokoll (OGP), um Seitentitel, Beschreibung und ein Bild für Facebook bereitzustellen.
• Verwenden Sie Twitter Cards, um Seitentitel, Beschreibung, ein Bild und eine Twitter-ID für Twitter anzugeben.

Du kannst beeinflussen, wie deine Website angezeigt wird, wenn sie in sozialen Medien geteilt wird, indem du jeder Seite ein paar Zeilen Code hinzufügst. So lässt sich die Interaktion steigern, da Vorschauen mit mehr Informationen als sonst verfügbar sind. Ohne diese Tags werden auf sozialen Websites nur grundlegende Informationen ohne Bilder oder andere hilfreiche Informationen angezeigt.

Welche wird Ihrer Meinung nach eher angeklickt? Bilder sprechen Nutzer an und geben ihnen das Gefühl, dass sie das Gesuchte finden werden.

Mit dem entsprechenden Markup: Der richtige Titel, eine kurze Beschreibung und ein Bild sind enthalten. Durch das Hinzufügen dieser Elemente können Sie die Interaktion steigern.

Ohne das richtige Markup wird nur der Seitentitel berücksichtigt.

Wenn jemand in einem sozialen Netzwerk Ihre Website mit seinen Freunden teilen möchte, fügt er wahrscheinlich ein paar Notizen hinzu, in denen er erklärt, wie toll sie ist, und teilt sie dann. Die Beschreibung einer Website ist jedoch oft mühsam und kann aus Sicht des Seitenbetreibers am Thema vorbeigehen. Einige Dienste beschränken die Anzahl der Zeichen, die Nutzer in die Notiz eingeben können.

Wenn du deinen Seiten die entsprechenden Metadaten hinzufügst, kannst du den Nutzern das Teilen erleichtern, indem du den Titel, eine Beschreibung und ein ansprechendes Bild bereitstellst. Sie müssen also keine wertvolle Zeit (oder Zeichen) damit verbringen, den Link zu beschreiben.

Schema.org und Mikrodaten verwenden, um Rich Snippets auf Google+ bereitzustellen

Crawler verwenden viele Methoden, um eine Seite zu parsen und ihren Inhalt zu verstehen. Durch die Verwendung von Mikrodaten und dem Vokabular von schema.org können soziale Netzwerke und Suchmaschinen den Inhalt der Seite besser verstehen.

Beispiel:

<div itemscope itemtype="http://schema.org/Article">
  <h1 itemprop="name">Enjoy fireworks</h1>
  <p itemprop="description">Fireworks are beautiful.
   This article explains how beautiful fireworks are.</p>
  <img itemprop="image" src="//developers.google.com/web/imgs/fireworks.jpg" />
</div>

Während die meisten Metadaten im Kopfbereich einer Webseite eingebettet sind, befinden sich Mikrodaten dort, wo der Kontext vorhanden ist.

itemscope hinzufügen, um den Mikrodatenbereich zu definieren

Wenn Sie itemscope hinzufügen, können Sie das Tag als Inhaltsblock zu einem bestimmten Element angeben.

Fügen Sie itemtype hinzu, um den Typ Ihrer Website zu definieren.

Sie können den Typ des Elements mit dem Attribut itemtype zusammen mit dem itemscope angeben. Der Wert eines itemtype kann anhand der Art des Inhalts auf Ihrer Webseite bestimmt werden. Auf dieser Seite finden Sie eine passende Option.

Fügen Sie itemprop hinzu, um jedes Element mit dem schema.org-Vokabular zu beschreiben.

itemprop definiert Attribute für itemtype im Bereich. Wenn Sie Metadaten für soziale Netzwerke bereitstellen, sind typische itemprop-Werte name, description und image.

Rich Snippets validieren

Zum Validieren von Rich Snippets auf Google+ können Sie Tools wie die folgenden verwenden:

• Testtool für strukturierte Daten – Search Console

Open-Graph-Protokoll (OGP) verwenden, um Rich Snippets auf Facebook bereitzustellen

Das Open-Graph-Protokoll (OGP) stellt Facebook die Metadaten zur Verfügung, die erforderlich sind, damit Webseiten dieselbe Funktionalität wie andere Facebook-Objekte haben.

<html prefix="og: http://ogp.me/ns#">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="https://code.getmdl.io/1.2.1/material.indigo-pink.min.css">
    <script defer src="https://code.getmdl.io/1.2.1/material.min.js"></script>
    <style>
      body {
        margin: 2em;
      }
    </style>
    <meta property="og:title" content="Enjoy Fireworks">
    <meta property="og:description"
          content="Fireworks are beautiful. This article explains how beautiful fireworks are.">
    <meta property="og:image"
          content="https://developers.google.com/web/imgs/fireworks.jpg">
    <meta property="og:url"
          content="https://example.com/discovery-and-distribution/optimizations-for-crawlers/social-sites.html">
    <meta property="og:type" content="website">

Wenn diese Metadaten im Kopfbereich Ihrer Seite enthalten sind, werden beim Teilen der Seite Rich Snippet-Informationen bereitgestellt.

Verwenden Sie meta-Tags mit dem Namespace og:, um Metadaten zu beschreiben.

Ein meta-Tag besteht aus einem property- und einem content-Attribut. Attribute und Inhalte können die folgenden Werte haben:

Attribut	Inhalt
og:title	Der Titel der Webseite.
og:description	Die Beschreibung der Webseite.
og:url	Die kanonische URL der Webseite.
og:image	URL zu einem Bild, das an den geteilten Beitrag angehängt ist.
og:type	Ein String, der den Typ der Webseite angibt. Hier finden Sie eine passende Option für Ihre Webseite.

Diese Meta-Tags liefern semantische Informationen für Crawler von sozialen Netzwerken wie Facebook.

Weitere Informationen

Weitere Informationen zu den Elementen, die Sie dem Beitrag auf Facebook hinzufügen können, finden Sie auf der offiziellen Website zum Open Graph-Protokoll.

• ogp.me

Rich Snippets validieren

Wenn Sie Ihr Markup auf Facebook validieren möchten, können Sie Tools wie die folgenden verwenden:

• Debugger

Twitter Cards verwenden, um Rich Snippets auf Twitter bereitzustellen

Twitter Cards sind eine Erweiterung des Open-Graph-Protokolls für Twitter. Sie können damit Medienanhänge wie Bilder und Videos zu Tweets mit einem Link zu Ihrer Webseite hinzufügen. Wenn du die entsprechenden Metadaten hinzufügst, wird Tweets mit Links zu deiner Seite eine Karte mit den von dir hinzugefügten Rich-Details hinzugefügt.

Verwenden Sie Meta-Tags mit dem Namespace twitter:, um Metadaten zu beschreiben.

Damit eine Twitter Card funktioniert, muss deine Domain genehmigt sein und ein Meta-Tag enthalten, das twitter:card als name-Attribut anstelle des property-Attributs hat.

Beispiel:

<html prefix="og: http://ogp.me/ns#">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="https://code.getmdl.io/1.2.1/material.indigo-pink.min.css">
    <script defer src="https://code.getmdl.io/1.2.1/material.min.js"></script>
    <style>
      body {
        margin: 2em;
      }
    </style>
    <meta property="og:title" content="Enjoy Fireworks">
    <meta property="og:description"
          content="Fireworks are beautiful. This article explains how beautiful fireworks are.">
    <meta property="og:image"
          content="https://developers.google.com/web/imgs/fireworks.jpg">
    <meta property="og:url"
          content="https://example.com/discovery-and-distribution/optimizations-for-crawlers/social-sites.html">
    <meta property="og:type" content="website">
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:site" content="agektmr">

Wenn du die Twitter-ID dem Wert von twitter:site zuweist, bettet Twitter diese Informationen in den geteilten Beitrag ein, damit Nutzer problemlos mit dem Seitenbetreiber interagieren können.

Weitere Informationen

Weitere Informationen zu Twitter Cards finden Sie hier:

• Twitter-Entwicklerwebsite

Rich Snippets validieren

Twitter bietet die folgenden Möglichkeiten, um dein Markup zu validieren:

• Card Validator

Best Practice

Am besten ist es, alle drei Optionen auf deiner Webseite zu verwenden. Beispiel:

<!-- namespace declaration -->
<html prefix="og: http://ogp.me/ns#">
  <!-- define microdata scope and type -->
  <head itemscope itemtype="http://schema.org/Article">
    <title>Social Site Example</title>
    <!-- define ogp and itemprop of microdata in one line -->
    <meta property="og:title" itemprop="name" content="Enjoy Fireworks">
    <!-- define ogp image -->
    <meta property="og:image"
          content="https://developers.google.com/web/imgs/fireworks.jpg">
    <!-- use link[href] to define image url for microdata -->
    <link itemprop="image" href="//developers.google.com/web/imgs/fireworks.jpg">
    <!-- define ogp and itemprop of microdata in one line -->
    <meta property="og:url"
          content="https://example.com/discovery-and-distribution/optimizations-for-crawlers/social-sites2.html">
    <!-- define ogp type -->
    <meta property="og:type" content="website">
    <!-- define twitter cards type -->
    <meta name="twitter:card" content="summary_large_image">
    <!-- define site's owner twitter id -->
    <meta name="twitter:site" content="agektmr">
    <!-- define description for ogp and itemprop of microdata in one line -->
    <meta property="og:description" itemprop="description"
          content="Fireworks are beautiful. This article explains how beautiful fireworks are.">
    <!-- general description (separate with ogp and microdata) -->
    <meta name="description"
          content="Fireworks are beautiful. This article explains how beautiful fireworks are.">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="https://code.getmdl.io/1.2.1/material.indigo-pink.min.css">
    <script defer src="https://code.getmdl.io/1.2.1/material.min.js"></script>
    <style>
      body {
        margin: 2em;
      }
    </style>
  </head>

Beachten Sie, dass Mikrodaten und OGP einige Markups gemeinsam haben:

• itemscope befindet sich im head-Tag
• title und description werden zwischen Mikrodaten und OGP geteilt
• itemprop="image" verwendet das link-Tag mit dem href-Attribut, anstatt das meta-Tag mit property="og:image" wiederzuverwenden

Prüfe vor der Veröffentlichung, ob deine Webseite auf jeder Social-Media-Website wie erwartet angezeigt wird.