SEO - Hinzufügen von Schema Markup
Was ist Schema Markup?
Hallo da draußen, ambitionierte Web-Entwickler! Heute tauchen wir in die aufregende Welt des Schema Markup ein. Jetzt weiß ich, was ihr denkt – "Aufregend? Wirklich?" Aber glaubt mir, wenn ihr sehen werdet, wie dies die Sichtbarkeit eurer Website verbessern kann, werdet ihr so begeistert sein wie ich, als ich es zum ersten Mal entdeckt habe!
Schema Markup ist wie eine Megaphone für eure Website in der überfüllten Konzerthalle des Internets. Es ist eine Form von Mikrodaten, die ihr zu eurem HTML hinzufügt, um Suchmaschinen zu helfen, euren Inhalt besser zu verstehen. Denkt daran als ob ihr Untertitel für eure Webseiten bereitstellt – es hilft Suchmaschinen, den Inhalt genauer zu lesen und zu interpretieren.
Schauen wir uns ein einfaches Beispiel an:
<div itemscope itemtype="http://schema.org/Movie">
<h1 itemprop="name">Inception</h1>
<span itemprop="director">Regisseur: Christopher Nolan</span>
<span itemprop="datePublished">Veröffentlichungsdatum: 2010</span>
</div>In diesem Snippet sagen wir Suchmaschinen, dass dieses div Informationen über einen Film enthält. Die Attribute itemscope und itemtype definieren den Umfang und die Art des Schemas, während itemprop individuelle Eigenschaften spezifiziert.
Vorteile der Einführung von Schema Markup
Nun, da wir wissen, was Schema Markup ist, lassen Sie uns über die Gründe sprechen, warum es so großartig ist:
- Erweiterte Suchergebnisse: Schema Markup kann zu reichen Snippets in Suchergebnissen führen, die eure Website hervorheben.
- Verbesserte Klickrate: Diese schicken reichen Snippets? Sie neigen dazu, mehr Klicks zu ziehen!
- Bessere Verständnis durch Suchmaschinen: Es hilft Suchmaschinen, euren Inhalt genauer zu verstehen.
- Optimierung für Sprachsuche: Mit der wachsenden Bedeutung der Sprachsuche wird strukturierte Daten immer wichtiger.
Verschiedene Arten von Schema Code-Sprachen
Schema Markup ist keine Einheitslösung. Es gibt mehrere Möglichkeiten, es zu implementieren:
| Format | Beschreibung | Beispiel |
|---|---|---|
| Mikrodaten | HTML-Attribute | <div itemscope itemtype="http://schema.org/Person"> |
| RDFa | Erweiterung zu HTML5 | <div vocab="http://schema.org/" typeof="Person"> |
| JSON-LD | JavaScript-Notation, eingebettet in einen <script>-Tag |
<script type="application/ld+json">{ "@context": "http://schema.org", "@type": "Person" }</script> |
Während alle diese Formate gültig sind, wird JSON-LD aufgrund seiner einfacheren Implementierung und Wartung generally von Google bevorzugt.
Schritte zur Hinzufügung von Schema Markup auf einer Website für SEO
Nun, rollen wir die Ärmel hoch und legen los! Hier ist, wie ihr Schema Markup zu eurer Website hinzufügt:
1. Bestimmt die Art des Inhalts
Zuerst identifiziert, welchen Inhalt ihr markieren wollt. Ist es ein Artikel? Ein Produkt? Ein lokales Geschäft? Schema.org bietet eine umfassende Liste von Typen, die ihr verwenden könnt.
2. Wählt euer Markup-Format
Für diesen Tutorial verwenden wir JSON-LD, da es das bevorzugte Format von Google ist.
3. Erstellt euer Markup
Nehmen wir an, wir markieren einen Blogbeitrag. Hier ist ein Beispiel:
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "BlogPosting",
"headline": "Wie man den perfekten Schokoladenkeks backt",
"author": {
"@type": "Person",
"name": "Jane Doe"
},
"datePublished": "2023-06-15",
"image": "http://example.com/cookie.jpg",
"articleBody": "Zuerst rührt ihr Butter und Zucker zusammen..."
}
</script>Dieser Script tells Suchmaschinen, dass diese Seite einen Blogbeitrag enthält, zusammen mit seinem Titel, Autor, Veröffentlichungsdatum, Hauptbild und einem Auszug aus dem Inhalt.
4. Testet euer Markup
Bevor ihr live geht, testet euer Markup immer mit Googles Strukturierte Daten-Testtool. Es ist wie eine Rechtschreibprüfung für euer Schema Markup!
5. Fügt das Markup zu eurem HTML hinzu
Nach dem Test fügt den <script>-Tag in den <head>-Bereich eures HTML hinzu.
6. Überwacht die Leistung
Nach der Implementierung haltet die Augen offen für die Leistung eurer Suche. Ihr könnt beginnen, diese glänzenden reichen Snippets zu sehen!
Fazit
Und das war's, Leute! Ihr habt die ersten Schritte in die Welt des Schema Markup gewagt. Denkt daran, das Internet ist wie eine große Bibliothek, und Schema Markup ist wie das Hinzufügen eines detaillierten Index zu eurem Buch. Es hilft Suchmaschinen, euren Inhalt effektiver zu finden und zu präsentieren.
Während ihr eure Reise im Web-Entwicklungsgebiet fortsetzt, werdet ihr feststellen, dass Schema Markup nur eines von vielen Werkzeugen in eurem SEO-Werkzeugkasten ist. Aber es ist ein wichtiger und das Beherrschen kann eurer Website einen erheblichen Vorteil in den Suchergebnissen geben.
Keep experimenting, keep learning, and don't be afraid to get your hands dirty with code. Before you know it, you'll be seeing your website climb those search rankings!
Happy coding, and may the schema be with you!
Credits: Image by storyset