Programmierung

Wie man SEO mit der SEO-Komponente von Gatsby und dem Gatsby React Helmet steigert

Einführung

Wenn ein Benutzer eine Website programmiert und einsetzt, möchte er oft, dass ein Online-Publikum die von ihm erstellte Website findet und liest. Suchmaschinenoptimierung (SEO) ist die Praxis, eine Website für dieses Online-Publikum auffindbar zu machen.

Die Optimierung für die Suche beinhaltet Änderungen an Ihrer Gatsby-App, damit sie in den Ergebnissen von Suchmaschinen wie Google, Bing und DuckDuckGo auftaucht. Dies geschieht oft durch eine Feinabstimmung der Metadaten, die im HTML-Code Ihrer Website landen.

In diesem Tutorial werden Sie die SEO-Komponente von Gatsby konfigurieren, die bereits von Haus aus mit SEO-Tools ausgestattet ist. Mit Gatsby React Helmet werden Sie Meta-Tags zu Ihrer Website hinzufügen. Meta-Tags sind wichtig, weil sie den Suchmaschinen Informationen über Ihre Seite geben.

Je besser Google über Ihre Website Bescheid weiß, desto genauer kann es Ihre Webseite indizieren. Sie werden auch Social Media Cards für Twitter und Open Graph-Meta-Tags in Facebook erstellen. Es gibt mehr als eine Milliarde Menschen, die irgendeine Form von sozialen Medien nutzen, daher ist die Optimierung für soziale Medien ein effizienter Weg, um Ihre Website vor vielen Internetnutzern zu platzieren.

Voraussetzungen

  • Node.js Version 14.16.0 auf Ihrem Computer installiert. Um diese auf macOS oder Ubuntu 20.04 zu installieren, folgen Sie den Schritten in Wie man Node.js installiert und eine lokale Entwicklungsumgebung auf macOS erstellt oder dem Abschnitt Installation mit einem PPA in Wie man Node.js auf Ubuntu 20.04 installiert.
  • Gatsby.js und das Gatsby CLI-Tool sind installiert.
  • Ein Verständnis von JavaScript ist hilfreich. Sie können mehr über JavaScript in unserer How To Code in JavaScript Serie lernen. Obwohl Gatsby React verwendet, müssen Sie React nicht kennen, um loszulegen. Wenn Sie jedoch die grundlegenden Konzepte lernen möchten, sehen Sie sich unsere Serie How To Code in React an.

Schritt 1 – Ein leeres Projekt erstellen

In diesem Abschnitt werden Sie ein neues Projekt auf Basis der Gatsby-Starter-Vorlage erstellen. Sie werden eine Walbeobachtungs-Website erstellen, und in den folgenden Schritten werden Sie deren SEO verbessern. So erhalten Sie ein solides Projekt, das Sie mit Meta-Tags und Social Media Assets optimieren können.

Verwenden Sie zunächst das CLI-Tool, um ein neues Projekt namens gatsby-seo-project zu starten:

gatsby new gatsby-seo-project https://github.com/gatsbyjs/gatsby-starter-default

Dadurch wird eine neue Website aus der Starter-Vorlage im GitHub-Repository “gatsby-starter-default” von Gatsby erstellt.

Sobald das Projekt erstellt ist, wechseln Sie in den Ordner “src/images” des Projekts:

cd gatsby-seo-project/src/images

Sobald Sie sich im Bilderordner befinden, laden Sie ein Bild eines Wals von der Stockfotografie-Website Unsplash herunter:

wget 'https://unsplash.com/photos/JRsl_wfC-9A/download?force=true&w=640'

Wget ist ein Gnu-Befehl, der Dateien aus dem Internet herunterlädt.

Als Nächstes listen Sie mit dem Befehl ls alle Bilder auf, die sich im gleichen Verzeichnis images befinden:

ls

‘download?force=true&w=640’ ist ein schwer zu merkender Name, also benennen Sie ihn in whale-watching.png um:

mv 'download?force=true&w=640' whale-watching.png

Da Sie nun Ihr Walbild haben, gehen Sie zum Stammverzeichnis Ihres Projekts und öffnen Sie src/pages/index.js. Nehmen Sie die hervorgehobene Änderung im folgenden Code vor, um Ihre Website anzupassen:

gatsby-seo-project/src/pages/index.js

import * as React from "react"
 import { Link } from "gatsby"
 import { StaticImage } from "gatsby-plugin-image"
 import Layout from "../components/layout"
 import SEO from "../components/seo"
 const IndexPage = () => (
             
Whale watching for all
     Come see extraordinary whales!
     1.45rem }}     />            
Go to page 2 
       Go to "Using TypeScript"     
   
 )
 export default IndexPage

Speichern Sie die Datei. Um den Code auszuprobieren, starten Sie einen lokalen Entwicklungsserver mit dem folgenden Befehl:

gatsby develop

Sobald der Server läuft, rufen Sie localhost:8000 in Ihrem Browser auf. Sie werden Ihre neue Site im Browser gerendert vorfinden:

Sie sind nun mit dem Einrichten Ihres Projekts fertig. Als Nächstes werden Sie mit React Helmet Meta-Tags zu Ihrem Site-Header hinzufügen.

Schritt 2 – Erstellen einer SEO-Komponente mit React Helmet

In diesem Abschnitt lernen Sie, wie Sie die technischen SEO-Aspekte Ihrer Website mit Hilfe des React Helmet-Plugins von Gatsby und einer SEO-Komponente steuern können. Das Helmet-Plugin ermöglicht das serverseitige Rendering aller Metadaten, die sich im Head der Gatsby-Site befinden.

Dies ist wichtig, denn ohne serverseitiges Rendering besteht die Möglichkeit, dass die Bots der Suchmaschinen die Metadaten nicht erfassen können, bevor die Seite gerendert wird, was die Indexierung der Seite für die Suche erschwert.

Wenn Sie gatsby-starter-default als Basis für Ihre Website verwenden, kommt es bereits mit allem, was Sie brauchen, um mit der Optimierung von SEO zu beginnen. Um dies zu tun, werden Sie mit den folgenden Dateien arbeiten

  • gatsby-config.js: Die Gatsby-Konfiguration enthält Metadatenwerte, die von GraphQL abgefragt und in der SEO-Datei platziert werden.
  • src/components/seo.js: Diese Datei enthält den Helmet und die SEO-Komponente.

Sie öffnen zunächst die Datei gatsby-config.js, die sich im Stammverzeichnis Ihres Projekts befindet:

nano gatsby-config.js

Bevor Sie Änderungen an der Datei vornehmen, prüfen Sie den Schlüssel plugins im exportierten Objekt. Der Gatsby-Standardstarter hat bereits das Plugin “Helmet” installiert, wie in der folgenden hervorgehobenen Zeile gezeigt wird:

gatsby-seo-project/gatsby-config.js

module.exports = {
  siteMetadata: {
    title: `Gatsby Default Starter`,
    description: `Kick off your next, great Gatsby project with this default starter. This barebones starter ships with the main Gatsby configuration files you might need.`,
    author: `@gatsbyjs`,
  },
  plugins: [
    `gatsby-plugin-react-helmet`,
    `gatsby-plugin-image`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: `${__dirname}/src/images`,
      },
    },
    `gatsby-transformer-sharp`,
    `gatsby-plugin-sharp`,
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: `gatsby-starter-default`,
        short_name: `starter`,
        start_url: `/`,
        background_color: `#663399`,
        theme_color: `#663399`,
        display: `minimal-ui`,
        icon: `src/images/gatsby-icon.png`, // This path is relative to the root of the site.
      },
    },
    `gatsby-plugin-gatsby-cloud`,
    // this (optional) plugin enables Progressive Web App + Offline functionality
    // To learn more, visit: https://gatsby.dev/offline
    // `gatsby-plugin-offline`,
  ],
}

Richten Sie als nächstes Ihre Aufmerksamkeit auf den Schlüssel siteMetadata. Dieser enthält ein Objekt, das die Metadaten für Ihre Site enthält. Sie werden den Titel, die Beschreibung und den Autor ändern. Außerdem fügen Sie Schlüsselwörter hinzu, um den Benutzern die Suche nach Ihrer Site zu erleichtern:

gatsby-seo-project/gatsby-config.js

module.exports = {
  siteMetadata: {
    title: `Wondrous World of Whale Watching`,
    description: `Come and enjoy an experience of a lifetime! Watch whales with us!`,
    author: `@digitalocean`,
    keywords: `whales, marine life, trip, recreation`,
  },
...

Die Schlüsselwort-Metadaten sind entscheidend für die Optimierung für die Suche. Während das Thema der Auswahl von Schlüsselwörtern den Rahmen dieses Tutorials sprengt, können Sie mehr über die Grundlagen der Suchmaschinenoptimierung auf der Dokumentations-Website von Google für die Suche erfahren.

Hier haben Sie spezifische Suchbegriffe hinzugefügt, die Nutzer bei der Suche nach einer Website wie der Beispiel-Website für Walbeobachtung verwenden könnten.

Speichern und schließen Sie diese Datei.

Als nächstes öffnen Sie die SEO-Komponente:

nano src/components/seo.js

In der SEO-Komponente ist eine Menge los. Richten Sie Ihre Aufmerksamkeit auf die SEO-Funktion. In dieser Funktion verwenden Sie GraphQL zur Abfrage des siteMetadata-Objekts. Denken Sie daran, dass Sie Ihrem siteMetadata-Objekt Schlüsselwörter hinzugefügt haben, also nehmen Sie die folgende hervorgehobene Änderung an Ihrer Abfrage vor:

gatsby-seo-project/src/components/seo.js

...
function SEO({ description, lang, meta, title}) {
  const { site } = useStaticQuery(
    graphql`
      query {
        site {
          siteMetadata {
            title
            description
            author
            keywords
          }
        }
      }
    `
  )
...

Fügen Sie unterhalb der SEO-Funktion einen Verweis auf diese abgefragten Daten in einer Schlüsselwortkonstante hinzu, um die Arbeit mit den Daten zu erleichtern:

gatsby-seo-project/src/components/seo.js

...
  const keywords = site.siteMetadata.keywords
  const metaDescription = description || site.siteMetadata.description
  const defaultTitle = site.siteMetadata?.title
...

Die Variable keywords enthält alle Schlüsselwörter, die Sie in der Datei gatsby-config.js angelegt haben. Die Variable metaDescription ist eine Beschreibung, die Sie als Prop auf einer Seite oder Abfrage vom siteMetadata-Objekt in gatsby-config.js übergeben können. Schließlich wird defaultTitle auf den Wert von title im siteMetadata-Objekt gesetzt. Das ? im siteMetadata-Attribut prüft auf einen Null-Wert und gibt bei einem Null- oder Nullish-Wert undefiniert zurück.

Prüfen Sie als nächstes, was die SEO-Komponente zurückgibt, und fügen Sie ein Objekt für Schlüsselwörter hinzu:

gatsby-seo-project/src/components/seo.js

Sie geben eine Helmet-Komponente zurück. Helmet füllt den Kopf eines HTML-Dokuments mit serverseitig gerenderten Daten auf, was es für Google einfacher macht, die Metadaten zu crawlen und zu erfassen. htmlAttributes={lang,}} gibt die Sprache des Inhalts des Elements an, und title ist der Titel, der in den Metadaten gefunden wird, die aus siteMetadata stammen. titleTemplate erzeugt das title-Tag, was wichtig ist, da Google Seiten bestraft, denen ein title-Tag fehlt.

Nach diesem Abschnitt finden Sie das meta-Objekt, das die Metadaten enthält. Die meisten Werte hier stammen aus siteMetadata.

Untersuchen Sie schließlich die Objekte SEO.defaultProps und SEO.propTypes:

gatsby-seo-project/src/components/seo.js

…
 SEO.defaultProps = {
   lang: `en`,
   meta: [],
   description: ``,
 }
 SEO.propTypes = {
   description: PropTypes.string,
   lang: PropTypes.string,
   meta: PropTypes.arrayOf(PropTypes.object),
   title: PropTypes.string.isRequired,
 }

SEO.defaultProps sind die Standardwerte der SEO-Props. SEO.propTypes übergibt den richtigen Wertetyp und fungiert als leichtes Typisierungssystem.

Speichern Sie Ihre Datei mit dem neuen Schlüsselworteintrag und starten Sie den lokalen Server in Ihrem Terminal:

gatsby develop

Nachdem der Server gestartet ist, geben Sie im Browser localhost:8000 ein. Öffnen Sie die Ansicht des HTML in Ihrem Browser; bei Chrome klicken Sie mit der rechten Maustaste auf das Fenster und öffnen Sie DevTools. Wählen Sie Elemente und öffnen Sie den -Tag. In diesem Tag finden Sie die folgende Zeile:

Sie haben nun erfolgreich die Kopfdaten mit React Helmet eingestellt.

In diesem Abschnitt haben Sie Metadaten erstellt, um die SEO Ihrer Whale-Watching-Seite zu verbessern. Im nächsten Abschnitt fügen Sie ein Bild hinzu und erleichtern so das Teilen der Seite in den sozialen Medien.

Schritt 3 – Hinzufügen von Bildern, um die Weitergabe in sozialen Netzwerken zu verbessern

Soziale Netzwerke spielen eine wichtige Rolle, wenn es darum geht, die Aufmerksamkeit auf Ihre Inhalte zu lenken. In diesem Abschnitt werden Sie ein Bild zu zwei Funktionen hinzufügen, die das Teilen Ihrer Website in sozialen Netzwerken optimieren: Ihre Twitter-Karte und das Open Graph-Protokoll für Facebook. Sie werden auch lernen, welche Werkzeuge Sie verwenden können, um sicherzustellen, dass Ihre Metadaten auf diesen beiden Plattformen der sozialen Netzwerke erscheinen.

Öffnen Sie gatsby-config in einem Texteditor:

nano gatsby-config.js

Sie werden images/whale-watching.png in die siteMetadaten einfügen:

gatsby-seo-project/gatsby-config.js

module.exports = {
   siteMetadata: {
     title: 'Wondrous World of Whale Watching',
     description: 'Come and enjoy an experience of a lifetime! Watch whales with us!',
     author: '@digitalocean',
     keywords: 'whales, marine life, trip, recreation',
     image: 'src/images/whale-watching.png'
   },
   plugins: [
     'gatsby-plugin-react-helmet',
     'gatsby-plugin-image',
     {
       resolve: 'gatsby-source-filesystem',
       options: {
         name: 'images',
         path: '${__dirname}/src/images',
       },
     },
     'gatsby-transformer-sharp',
     'gatsby-plugin-sharp',
     {
       resolve: 'gatsby-plugin-manifest',
       options: {
         name: 'gatsby-starter-default',
         short_name: 'starter',
         start_url: '/',
         background_color: '#663399',
         theme_color: '#663399',
         display: 'minimal-ui',
         icon: 'src/images/gatsby-icon.png', // This path is relative to the root of the site.
       },
     },
     'gatsby-plugin-gatsby-cloud',
     // this (optional) plugin enables Progressive Web App + Offline functionality
     // To learn more, visit: https://gatsby.dev/offline
     // 'gatsby-plugin-offline',
   ],
 }

GraphQL kann nun das Bild abfragen. Schließen und speichern Sie die Datei.

Öffnen Sie als nächstes die Datei seo.js im Texteditor:

nano src/components/seo.js

Nun, da sich Ihr Bild in den Metadaten der Website befindet, ist es an der Zeit, es der SEO-Komponente hinzuzufügen. Fügen Sie die folgenden hervorgehobenen Zeilen zu seo.js hinzu:

gatsby-seo-project/src/components/seo.js

…
 function SEO({ description, lang, meta, title}) {
   const { site } = useStaticQuery(
     graphql'
       query {
         site {
           siteMetadata {
             title
             description
             author
             keywords
             image
           }
         }
       }
     '
   )
   const image = site.siteMetadata.image
   const keywords = site.siteMetadata.keywords
   const metaDescription = description || site.siteMetadata.description
   const defaultTitle = site.siteMetadata?.title
 return (
     
   )
 }
 SEO.defaultProps = {
   lang: 'en',
   meta: [],
   description: '',
 }
 SEO.propTypes = {
   description: PropTypes.string,
   image: PropTypes.string,
   lang: PropTypes.string,
   meta: PropTypes.arrayOf(PropTypes.object),
   title: PropTypes.string.isRequired,
 }
 export default SEO

In diesem Code haben Sie:

  • Das Bild zur GraphQL-Abfrage hinzugefügt
  • eine Image-Variable erstellt und den Wert auf das in siteMetadata gefundene Bild gesetzt
  • og:image zum Meta-Objekt hinzugefügt
  • twitter:image zum Meta-Objekt hinzugefügt
  • Bild zu SEO.propTypes hinzugefügt

Speichern Sie Ihre Änderungen und schließen Sie seo.js.

Der letzte Schritt in diesem Prozess besteht darin, diese Änderungen auf Twitter und Facebook zu testen. Dies kann nicht von einem lokalen Entwicklungsserver aus erfolgen; um Ihre Website zu testen, müssen Sie sie zunächst bereitstellen. Es gibt viele Möglichkeiten, dies zu tun, einschließlich der Verwendung der App-Plattform von DigitalOcean, über die Sie im Tutorial How To Deploy a Gatsby Application to DigitalOcean App Platform lesen können.

In diesem Tutorial wird eine Gatsby-App, die auf der App Platform gehostet wird, als Beispiel verwendet. Sie finden diese App unter https://digital-ocean-gatsby-seo-xkmfq.ondigitalocean.app/, und sie enthält die SEO-Änderungen, die Sie in diesem Tutorial an Ihrer Website vorgenommen haben.

Wenn Sie testen möchten, ob Social-Media-Objekte auf Twitter angezeigt werden, gehen Sie zu https://cards-dev.twitter.com/validator. Dieser Validator wird von Twitter gewartet und erfordert ein Twitter-Konto, um ihn zu verwenden. Geben Sie die URL für die bereitgestellte Beispielseite in den Validator ein:

Beachten Sie, dass das benutzerdefinierte Bild nun angezeigt wird, wenn Benutzer über Ihre Website tweeten.

Rufen Sie als nächstes den Open Graph-Validator von Facebook unter https://developers.facebook.com/tools/debug/ auf. Dieser wird von Facebook verwaltet und erfordert ein Facebook-Konto zur Nutzung. Fügen Sie die URL für die Beispiel-App in das URL-Feld ein. Der Debugger liefert Ihnen genauere Informationen darüber, welche og-Objekte vorhanden sind und welche fehlen.

Beachten Sie, dass das Bild mit einem Titel und einer Beschreibung im Abschnitt Link-Vorschau angezeigt wird.

Sie haben nun ein Bild zu Ihren Metadaten, einer Twitter-Karte und einem Facebook Open Graph hinzugefügt.

Fazit

In diesem Tutorial haben Sie die SEO Ihrer Website mit Hilfe des React Helmet von Gatsby und der SEO-Komponente verbessert. Sie haben auch gelernt, wie Sie Bilder zu Social-Media-Karten hinzufügen können, um Ihre Website besser mit anderen teilen zu können.