HTML für SEO

Aus induux Wiki
Auf induux suchen
Autoren
1723
induux international
aktualisiert am 26.05.2020 - 10:29:22
Angebot
Anzeige
HTML


Hypertext Markup Language (HTML) ist eine Sprache zur Strukturierung von Dokumente, wie Texte mit Links, Bildern usw. HTML-Dokumente werden von Webbrowsern dargestellt sind die Basis des World Wide Web. In dieser Wiki-Seite ist der HTML-Einsatz für SEO beschrieben.

Frage/Definition: Was ist/sind HTML?
Auch oft gesucht: Hypertext Markup Language, HTML5, HTML4







👉 Relevanz: SEO Check / Audit
Bereich:Template-Setup
Testfrage:Ist die HTML Struktur korrekt aufgebaut? Sind Meta Tags und Social Media Tags gepflegt? Ist das Überschriften-Markup korrekt?
QuickWin Ratio:100
Notwendigkeit:MUSS
Automatisierbar:Nein


Simple Struktur eines HTML-Dokuments:

<head>
   hier meta tags
</heads>
<body>
 hier body tags like <h1>, <p> ...
</body>


Die sitemap.xml kann als HTML-Seite realisiert werden.

Richtiger Einsatz von HTML für SEO

Jede Grafik im Content muss haben:

src
der Pfad zur Grafik
width
Breite eines Bilds im Client
height
Höhe eines Bilds im Client
Die richtigen Angaben der Breite und Höhe sind wichtig für SEO

Wenn der Browser sich die Webseite holt, hat er durch die Höhen- und Breiten-Angaben frühzeitig Informationen darüber welche Fläche für Bilder gebraucht wird und kann diese freihalten. Ohne diese Angaben würde die Fläche nicht berücksichtigt werden und es würde zu längeren Renderingzeiten kommen. Die Renderzeit hat Auswirkungen auf SEO!
Die Angaben werden hinter dem src-Element hinterlegt, optional können die angaben zusätzlich in der URL des Bildes hinterlegt werden. Allerdings müssen die Angaben zu Höhe und Breite jeweils übereinstimmen. Ohne Angaben der höhe und Breite wird das Bild in der Originalgröße dargestellt - das ist in den meisten Fällen zu groß und unnötig. Sollten die Angaben mit der Originalgröße des Bildes übereinstimmen, können diese werte trotzdem hinterlegt werden, da kein zusätzlicher Renderaufwand durch Skalierung stattfindet. Werden die Angaben im URL und hinter dem src-Element hinterlegt hat man eine doppelte Absicherung, da die Größe so auch im Template hinterlegt ist.
SEO-Vorteil der Angaben zu Höhe und Breite:
Renderzeit im Browser und Bandbreite wird gespart!

alt
Text für den Inhalt, falls Element nicht darstellt. Gut für SEO weil Google nochmal die Information über das Element bekommt.
induux-produkte

Meta Tags

Page Title

Meta Description

Meta Keywords

Canonical Tag

Verschiedene Seiten mit ähnlichem Inhalt sieht Google als doppelte Versionen derselben Seite. Google wählt eine URL als kanonische Version und crawlt diese, und alle anderen Seiten werden als doppelte Seiten betrachtet und weniger oft gecrawlt. Eine kanonische Seite ist auch die Seite, die Google für die repräsentativste aus einer Reihe von doppelten Seiten auf der Website hält. Die Seiten müssen nicht unbedingt identisch sein; das Kanonische kann sich auch auf einer anderen Domäne befinden als das Duplikat. Wenn Google nicht explizit mitgeteilt wird, welche URL kanonisch ist, trifft Google die Wahl oder betrachtet sie beide als gleichwertig, was zu unerwünschtem Verhalten führen könnte.

https://support.google.com/webmasters/answer/139066?hl=en

Social Media Tags

Social Media Sharing ist das Teilen von medialen Inhalten im Social Web. Texte, Videos oder Fotos werden auf Seiten im Web hochgeladen und durch Links per E-Mail, Blogposts oder auf Social Media bekannt gemacht - geshared. Allerdings bezieht sich das Social Media Sharing genau genommen auf Inhalte, die zum Teilen bzw. Weiterverbreiten gedacht sind. Unternehmen nutzen interessante oder lustige Posts zu Produktbildern für einen Austauch mit den Usern.

Was bringt Social Media Sharing dem Unternehmen?

Das Stichwort ist Reichweite!

Durch Teilen des Content auf verschiedenen und passenden Plattformen erhöht sich automatisch die Reichweite. Wird der Content nicht geteilt, sehen ihn nur die Besucher der Firmenwebsite. Wird er auf zielgruppenspezifischen Kanälen geteilt, kann der Content von vielen Usern gefunden werden. Gerade bei Twitter wird oft nach Stichworten bzw. Hashtags gesucht. Daher ist es sinnvoll die geteilten Inhalte mit relevanten Hashtags zu versehen. So erscheint Euer Beitrag auf bei der suche nach einem bestimmten Keyword. Wenn dem Nutzer dann auch noch der Beitrag optisch gefällt, ist es einfacher Likes oder Retweets zu erhalten.

Twitter Card und OG Tags

Damit der eigene Inhalt gern auf den Sozialen Medien geteilt wird, sollte er ansprechend aussehen. Eine große rolle spielen da die Twitter Card und OG Tags für Facebook. Wird der Link einer Seite beispielsweise über Twitter geteilt, sorgt (wenn vorhanden) die Twitter Card dafür, dass eine ansprechende und informative Vorschau der Seite vorhanden ist.

Was ist eine Twitter Card?

Wenn auf Twitter ein Link rausgehen soll, zieht Twitter Informationen des Linkziels – zum Beispiel Überschrift, Textausschnitt und Foto – und platziert die ergänzenden Informationen unter den Beitrag. Die Twitter Card kann mehr als 140 Zeichen haben. Ziel ist, die Reichweite und Interaktionsrate des Tweets durch visuelle Attraktivität zu erhöhen.

Voraussetzung
Auf der Website muss im Quellcode das entsprechende Template hinterlegt werden - siehe unten.
Welche Twitter Cards gibt es?
  • Summary Card (Beinhaltet Titel, Beschreibung, Thumbnail-Bild, Beschreibung des Twitter-Accounts - gut für textlastige Seiten)
  • Summary Card with Large Image (identisch zur Summary Card aber mit sehr großem Bild)
  • App Card (auf Mobilgeräten kann aus dem Tweet auf den App Store weitergeleitet werden. Funktioniert nicht auf dem Desktop.)
  • Player Card (Audio oder Video kann abgespielt werden)
Twitter Card Validator
Mit dem Twitter Card Validator lässt sich die Twitter Card eines Links in der Vorschau anzeigen. Falls keine Twitter Card vorhanden ist wird das auch angezeigt.

Was sind OG Tags?

Open Graph Meta Tags optimieren das geteilte Bild, die Beschreibung und den Namen der Seite, wenn die Seite über Social Media verbreitet wird. Damit hat man die Kontrolle, wie die sozialen Medien eigene Inhalte anzeigt.

Folgende Open Graph Tags sollten verwendet werden:

  • meta property="og:image" content="Bild-URL" - Hier wird die URL des Bildes eingetragen, welches beim Teilen angezeigt werden soll. Optimale Größe: 1200 x 630 px.
  • meta property=“og:title“ content=“Aussagekräftiger Titel“
  • meta property=“og:description“ content=“Kurzbeschreibung des Contents“
  • meta property=“og:type“ content=“Art des Inhalts“ - In der Regel wird hier "Website" eingetragen.
  • meta property=“og:url“ content=“URL“

Facebook Sharing Debugger

Dieses Tool von Facebook zeigt im Voraus detaillierte Informationen darüber, welche Informationen beim Teilen oder Liken der Seite angezeigt werden.

https://developers.facebook.com/docs/sharing/webmasters/

Meta Tags für Social Media Sharing

<meta property="og:title" content="SEO Seminar Stuttgart" /> 
<meta property="og:url" content="https://agentur.induux.com/seminar-seo/"/>
<meta property="og:type" content="website" /> 
<meta content="de_DE" property="og:locale"/>
<meta property="og:image" content="https://bilderserver.net/webinar-seminar/seo-seminar-og.jpg" />
<meta property="og:image:alt" content="Hier alt-Text" />
<meta property="og:description" content="Digitaler Vertrieb und Marketing mithilfe von Suchmaschinenoptimierung. 
Erfolgreiche Zusammenarbeit mit Agenturen und SEO-Tipps für die Optimierung der Website. ...  />

<meta name="twitter:card" content="summary_large_image"/>
<meta name="twitter:site" content="@induux_de"/>
<meta property="og:site_name" content="induux"/>
<meta name="twitter:title" content="SEO Seminar Stuttgart"/>
<meta name="twitter:description" content="Digitaler Vertrieb und Marketing mithilfe von Suchmaschinenoptimierung. 
Erfolgreiche Zusammenarbeit mit Agenturen und SEO-Tipps für die Optimierung der Website. 
Eine kompakte Einführung in die Welt der Suchmaschinenoptimierung mit einigen Aha-Momenten." />
<meta name="twitter:image" content="https://bilderserver.net/webinar-seminar/seo-seminar-og.jpg"/>

Überschriften Markup

Die korrekte Verwendung von Überschriften Markup ist essentiell für einen guten Aufbau der Webseiten und sehr wichtig für den Crawler. Wenn dieser den Seitenaufbau dank Überschriften versteht, ist das ein gutes Signal an Google. Überschriften werden im HTML folgendermaßen hinterlegt:

 <h1>Energieketten</h1>
 <h2>Einsatzgebiete</h2>
 <h3>Industrie</h3>
 ...
 <h6>abc</h6>

Wichtig ist ein strukturierter Aufbau. Das Layout der Überschriften wird nur im CSS File hinterlegt.

H1

Jede Webseite darf nur EINE H1 Überschrift haben. Nicht mehr und nicht weniger. Das ist sehr wichtig und wird oft nicht eingehalten. Die H1 sollte im Text an erster Stelle erscheinen - nicht in der Headergrafik.

Anhänge

Diese Seite hat noch keine Anhänge, du kannst aber neue hinzufügen.

Ähnliche Artikel zu Website