Seite 3: Optimierung für Social Media und Suchmaschinen

Inhaltsverzeichnis

Teilt ein Nutzer einen Link auf einem sozialen Netzwerk, so analysiert dieses den HTML-Code der Seite: Twitter, Facebook und Co. erzeugen aus den Metadaten der Seite wie dem Titel und der Beschreibung eine Vorschau. Das in die Seite eingebettete JavaScript bleibt dabei unberücksichtigt. Suchmaschinen nutzen für die Indexierung von Webseiten den HTML-Code. Nur wenige Suchmaschinen wie Google starten auch den JavaScript-Code und können so Single-Page-Apps indexieren.

Da im vorherigen Abschnitt die Seiten generiert wurden, stehen den sozialen Netzwerken und Suchmaschinen alle Inhalte der Seite als HTML zur Verfügung. Auch in der Variante Universal App, bei der der Node-Server das HTML im Moment des Aufrufs generiert, funktioniert das. Noch enthalten aber alle Seiten die gleichen Metainformationen im Kopf der Seite. Jedoch soll jede Seite ihren eigenen Titel, Beschreibung und Vorschaubild bekommen, mit denen sie in sozialen Netzwerken und Suchergebnissen angezeigt wird.

Zunächst können Entwickler die globalen Standardwerte für Metainformationen in der nuxt-config.js-Datei hinterlegen. Werte, die später die einzelnen Seiten individuell überschreiben sollen, bekommen eine Header-ID hid, mit der man sie später referenzieren kann.

head: {
  /* ... */
  meta: [
    /* ... */
    {charset: 'utf-8'},
    {name: 'viewport', content: 'width=device-width, initial-scale=1'},
    {hid: 'ttitle', name: 'twitter:title', content: 'My Homepage'},
    {hid: 'desc', name: 'description', content: 'I am a developer'},
    {hid: 'tcard', name: 'twitter:card', content: 'summary'},
  ]
}

Jetzt können Entwickler die Werte auf einer Seite überschreiben. Das folgende Beispiel zeigt eine Seite für einen Blogbeitrag, dessen Daten in post hinterlegt sind. Während Titel und Beschreibung immer gesetzt sein müssen, werden das Vorschaubild und der Vorschautyp summary_large_image nur dann gesetzt, wenn der Blogbeitrag auch ein Vorschaubild enthält.

export default {
  head() {
    const self = this;
    const head = {
      title: self.post.title,
      meta: [
        {hid: 'ttitle', name: "twitter:title", content: self.post.title},
        {hid: 'desc', name: 'description', content: self.post.description},
        {hid: 'tdescription', name: 'twitter:description', content: self.post.description},
        {
          hid: 'tcard',
          name: 'twitter:card',
          content: self.post.preview !== undefined ? 'summary_large_image' : 'summary'
        },
      ]
    };
    if (self.post.preview !== undefined) {
   head.meta.push(
        {hid: 'timage', name: 'twitter:image', content: 'https://www.example.com' + self.post.preview}
      )
    }
    return head
  }
}

Anschließend können Entwickler die korrekte Verwendung der allgemeinen und Twitter-spezifischen Meta-Tags über die Twitter-Developer-Tools verifizieren. Da verschiedene soziale Netzwerke verschiedene Meta-Tags verwenden, müssen die Entwickler für weitere soziale Netzwerke meist zusätzliche Meta-Tags aufnehmen und diese mit den jeweiligen Developer-Tools prüfen.