In diesem Artikel möchte ich die grundlegenden SEO-Maßnahmen aufführen, welche auf jeder Website angewendet werden sollten, um gute Ergebnisse in der Google Suche zu erzielen. Außerdem gebe ich Tipps wie diese Maßnahmen in Vue und Nuxt umgesetzt werden können.

Beim SEO wird zwischen technischen Maßnahmen und Content-Verbessernden Maßnahmen unterschieden.

Technische SEO-Maßnahmen

Sitemap

Eine Sitemap Datei listet alle Seiten der Website auf. Diese Datei wird von Suchmaschinen ausgelesen und dient als Orientierung für den Suchmaschinen-Bot, der die Seite indexiert. Die Sitemap hat typischerweise den Dateinamen sitemap.xml und wird im Root Verzeichnis der Website abgelegt. Für Vue und Nuxt kann das Modul @nuxtjs/sitemap verwendet werden. Die Sitemap ist z.B. unter der Adresse https://foxwebcraft.com/sitemap.xml zu finden.

Robots.txt

Die Datei robots.txt ist eine Textdatei, die beschreibt, welche Seiten von Suchmaschinen-Bots indexiert werden dürfen. Diese Datei wird im Root Verzeichnis der Website abgelegt. Hier kann auch bestimmt werden, welche Seiten von der Indexierung ausgenommen werden sollen. Hier ein Beispiel für eine Standard robots.txt Datei:

User-agent: *
Allow: /
Sitemap: https://foxwebcraft.com/sitemap.xml

Für Nuxt kann das Modul @nuxtjs/robots verwendet werden. Es bietet noch weitere Funktionen um die robots.txt Datei zu modifizieren. Hier ein interessanter Artikel zu diesem Thema: Controlling Web Crawlers in Vue & Nuxt

Seitenstruktur

Bei den meisten Websites wird viel zu wenig Wert auf eine ordentliche Seitenstruktur gelegt. Die Seitenstruktur ist für die Suchmaschine ein wichtiger Hinweis auf den Inhalt und die Priorität der einzelnen Textabschnitte. Eine gute Seitenstruktur besitzt eine H1 Überschrift und beliebig viele H2, H3, H4 Überschriften. Hierbei ist darauf zu achten, dass die korrekte Reihenfolge eingehalten wird. Also dass nach einer H1 eine H2 kommt (und nicht eine H4).

Bilder

Ein weiterer wichtiger Bereich, der oft vernachlässigt wird, sind die Bilder auf der Website. Bei der SEO ist auf folgende Punkte zu achten:

• Dateinamen: Dateinamen sollten zum Bild passen. z.B. 'Uhr-Casio-CS-1000.webp'
• Bild-Alt Texte: Geben der Suchmaschine einen Hinweis was auf dem Bild zu sehen ist. z.B. 'silberne Casio Uhr an Handgelenk'
• Bild-Format: Bilder sollten im WebP Format umgewandelt werden. WebP bietet eine bessere Komprimierung als JPG und PNG.
• Bei Logos bietet sich das SVG Format an.
• Bild-Größe: Bei den Bildgrößen kommt es auf die richtige Balance zwischen Bildqualität und Dateigröße an. Zu große Dateigrößen verlangsamen die Ladezeiten. Kleine Dateigrößen sorgen für schnellere Ladezeiten, was die User-Experience verbessert und die Bounce Rate senkt.
• Mit dem Programm XnConvert können Bilder in verschiedene Formate und Größen umgewandelt werden. XnConvert
• In Vue und Nuxt kann für die automatische Generierung von responsive Bildern das <NuxtImg> Tag oder <NuxtPicture> Tag verwendet werden.

Meta-Angaben

Mit den Meta-Angaben kann kontrolliert werden, welche Informationen in den Google Suchergebnissen angezeigt werden. Außerdem helfen die Meta-Angaben Google dabei die Seite zu verstehen. Die wichtigsten Meta-Angaben sind:

Für Google und andere Suchmaschinen

• title: Der Titel der Seite wird in der Google Suche als Überschrift angezeigt.
• description: Die Meta-Description ist eine Beschreibung der Seite, die in der Google Suche angezeigt wird. Sie sollte die wichtigsten Schlüsselwörter der Seite enthalten und eine kurze Erklärung des Inhalts der Seite geben.
• image: Das Bild, welches in der Google Suche angezeigt wird.

Für Social Media mit Open Graph

• ogTitle: Wird als Überschrift angezeigt. Kann mit title für Suchmaschinen identisch sein.
• ogDescription: Die Beschreibung der Seite. Kann mit description für Suchmaschinen identisch sein.
• ogImage: Das Bild, welches bei der Verlinkung auf einer Social Media Seite angezeigt wird. Kann mit image für Suchmaschinen identisch sein.
• ogType: Der Typ der Seite. z.B. website oder article
• ogSiteName: Der Name der Website. z.B. FoxWebcraft

speziell für X zusätzlich zu Open Graph

• twitter:card: Das Format der Karte. z.B. summary_large_image

Für Vue und Nuxt kann das composable useSeoMeta verwendet werden. Ein Beispiel für eine Implementierung mit useSeoMeta wäre z.B.

useSeoMeta({
title: 'Grundlagen SEO',
ogTitle: 'Grundlagen SEO',
description: 'Suchmaschinenoptimierung mit Tipps für Vue/Nuxt',
ogDescription: 'Suchmaschinenoptimierung mit Tipps für Vue/Nuxt',
image: 'https://foxwebcraft.com/images/blog/seo-image.webp',
ogImage: 'https://foxwebcraft.com/images/blog/seo-image.webp',
ogType: "article",
ogSiteName: "FoxWebcraft",
twitterCard: "summary_large_image",
});

Diese Konfiguration resultiert in folgenden HTML Code:

<head>
<title>Grundlagen SEO</title>
<meta property="og:title" content="Grundlagen SEO">
<meta name="description" content="Suchmaschinenoptimierung mit Tipps für Vue/Nuxt">
<meta property="og:description" content="Suchmaschinenoptimierung mit Tipps für Vue/Nuxt">
<meta name="image" content="https://foxwebcraft.com/images/blog/seo-image.webp">
<meta property="og:image" content="https://foxwebcraft.com/images/blog/seo-image.webp">
<meta property="og:type" content="article">
<meta property="og:site_name" content="FoxWebcraft">
<meta name="twitter:card" content="summary_large_image">
</head>

Page Speed

Die Page Speed ist ein wichtiger Faktor für die SEO-Optimierung. Hier sind einige Tipps:

• Bilder optimieren (siehe oben)
• Schriftarten im ttf Format bereitstellen.
• keine unnötigen Libraries laden

Responsive Design

Der Inhalt der Seite sollte auf allen Geräten gut lesbar sein.

Inhaltsoptimierung

Bis hier haben wir die technischen Maßnahmen besprochen. Nun geht es um die Content-Verbessernden Maßnahmen. Eine gute Suchmaschinenoptimierung basiert auf hochwertigem, nutzerorientiertem Content. Hier sind einige Tipps:

• Keyword-Recherche: Identifikation relevanter Suchbegriffe mit angemessenem Suchvolumen und passender Wettbewerbsschwierigkeit. Tools wie Google Keyword Planner oder Ubersuggest können hierbei hilfreich sein.
• Optimierte Überschriften: Verwendung von H1 für den Haupttitel mit integriertem Hauptkeyword und strukturierte Gliederung mit H2, H3 usw. für Unterabschnitte.
• Qualitativ hochwertiger Content: Erstellung von informativem, einzigartigem Mehrwert mit ausreichender inhaltlicher Tiefe (in der Regel 1.000+ Wörter für umfassende Themen).
• Nutzerfreundliche Struktur: Einsatz von kurzen Absätzen, Aufzählungen, Zwischenüberschriften und Hervorhebungen für bessere Lesbarkeit.
• Natürliche Keyword-Platzierung: Organische Integration von Keywords im Text, Titel, Meta-Beschreibung, URL und Alt-Texten von Bildern. Kein Keyword stuffing!
• Interne Verlinkung: Vernetzung thematisch passender Inhalte einer Website miteinander.
• Multimedia-Elemente: Ergänzung von Texten mit Bildern, Videos oder Infografiken für bessere User Experience und längere Verweildauer.
• Aktualität: Regelmäßige Aktualisierung wichtiger Inhalte, um Relevanz zu erhalten.
• E-A-T-Prinzip: Demonstration von Expertise, Autorität und Vertrauenswürdigkeit durch fundierte Inhalte und Quellenangaben.
• Berücksichtigung der Nutzerabsicht: Verständnis der Intention hinter Suchanfragen - ob Nutzer informiert werden, etwas kaufen oder eine Lösung finden wollen.

Google Search Console

Mit der Google Search Console kann sichergestellt werden, dass alle Seiten von Google indexiert sind. Auch Probleme mit der Auffindbarkeit können hier erkannt und behoben werden.

Google Search Console

Google Analytics

Mit Google Analytics kann die Trafficanalyse der Website durchgeführt werden.

Google Analytics

Testen

Zum Testen der SEO-Maßnahmen verwende ich Seobility, hier kann man 5 Anfragen pro Tag kostenfrei durchführen. Meistens reicht das aus, um die SEO-Maßnahmen zu testen und Optimierungen vorzunehmen.

Seobility

Fazit

Wenn alle hier genannten Maßnahmen umgesetzt werden, steht einem guten Ergebnis in der Google Suche nichts mehr im Wege. Es kann allerdings einige Zeit dauern, bis sich die Maßnahmen auf das Google Suchresultat auswirken. In jedem Fall resultieren die Maßnahmen aber in einer besseren User Experience und das alleine ist schon ein großer Vorteil welcher den Aufwand der SEO-Optimierung rechtfertigt.