Richtig für SEO verwendete Webelemente

Zuletzt aktualisiert am 16. Januar 2019

Die meisten Webseiten bestehen aus 3 Grundelementen, HTML, CSS und JavaScript. Diese Bausteine ​​bilden alle Webseiten, egal was sie verwenden, um sie zu rendern. Jedes Webelement hat seinen richtigen Platz. Obwohl es einige Überschneidungen geben kann, hilft ihre gezielte Verwendung dabei, eine SEO-optimierte Seite zu erstellen. Wie sollten diese Elemente also verwendet werden und auf welche Weise können sie missbraucht werden?

Das grundlegende Webelement funktioniert

Vergleichen wir eine Webseite mit einem Haus. Ein Haus hat mehrere Teile, jeder an seinem Platz und erfüllt seinen Zweck. In unserem Webseitenhaus ähnelt das HTML den strukturellen Webelementen, den Traversen, den Wänden, dem Fundament. HTML bietet ein wichtiges Seiteninhaltslayout, umreißt seine Reihenfolge und welche Elemente wo erscheinen.

Für das Styling sollte CSS verwendet werden. Wenn wir bei der Hausillustration bleiben, wäre dies die Farbe Ihrer Wände, Ihrer Schränke, welche Art von Bodenbelag Sie haben usw. Die Farben Ihrer Seite, Schriftgrößen, das tatsächliche Layout der Seite können ebenfalls im CSS definiert werden. Aber warte, sollte das Layout nicht im HTML sein? Gute Frage. Während der HTML-Code die Elemente auf Ihrer Seite darstellen sollte, sollte CSS steuern, wie diese Elemente auf dieser Seite angezeigt werden. CSS ist für einen Großteil der Reaktionsfähigkeit des Webs verantwortlich.

Jetzt, da Ihr Haus gebaut ist, ist es Zeit für einige Versorgungseinrichtungen wie Strom und fließendes Wasser. JavaScript sollte für die interaktiven Elemente Ihrer Seite verwendet werden, wie z. B. das Ändern von Elementen beim Klicken, das Anzeigen von Daten und so weiter. JavaScript kann verwendet werden, um das gesamte Erscheinungsbild Ihrer Seite zu ändern, was gut funktioniert, wenn Sie sie auf eine bestimmte Zielgruppe oder einen bestimmten Anwendungsfall zuschneiden.

Warum sie trennen?

Wenn Sie also HTML und CSS sowohl für das Layout als auch JavaScript und CSS für das Styling verwenden können, warum sollten Sie sie dann trennen? Wenn Google Ihre Seite indiziert, sucht es nach Schlüsselindikatoren dafür, worum es auf Ihrer Seite geht und wie sie funktioniert. Wenn Sie eines der Elemente unangemessen verwenden, können Sie falsche Signale senden und Ihren Rankings schaden. Dies kann häufig passieren, wenn Sie mit CMS-Editoren arbeiten, die Voreinstellungen für Elemente verwenden oder unnötiges JavaScript ausführen, das Seiten verlangsamt, um Dinge zu tun, die in CSS erledigt werden könnten.

Sehen wir uns also einige der üblichen Fehlanwendungen an.

Überschriften-Tags missbrauchen

Einer der häufigsten Missbrauchsfälle ist die Verwendung von Überschriften-Tags zur Gestaltung von Webelementen. Überschriften-Tags umreißen die Hauptthemen einer Seite, vom wichtigsten H1-Tag (das jede Seite haben sollte) bis H6. Wenn Sie daran gewöhnt sind, Elemente zu stylen, sagen Sie Google, dass diese Wörter das sind, worum es auf Ihrer Seite geht. Oder Sie verwenden möglicherweise das falsche Überschriften-Tag (z. B. die Verwendung von h3 anstelle von h2, weil Ihnen die Schriftgröße besser gefällt). In beiden Fällen senden Sie die falsche Botschaft. Stattdessen sollten Sie CSS verwenden, um Elemente in der gewünschten Größe oder Schriftart zu formatieren.

Doppelte H1-Tags

Ein weiteres häufiges Problem sind zwei oder mehr H1-Tags auf einer Seite. Ihr H1-Tag sollte die Hauptidee der Seite sein; Es sollte jedem (und jedem Crawling-Bot), der die Seite besucht, sagen, worum es geht, und als solches sollten Sie nur einen haben. Zwei H1-Tags zu haben, ist wie das Senden von zwei verschiedenen Signalen auf der Seite. Einige Leute und sogar professionelle Themen neigen dazu, ihr Logo in einem H1-Tag zu platzieren. Achten Sie also darauf, dass es nur eine pro Seite gibt.

---

---

Alle Bilder sind Hintergrundbilder.

Es ist nichts falsch daran, einen Bildhintergrund zu haben. Bilder sind ein Blickfang und können Ihrer Website viel Wert verleihen und Benutzer dazu bringen, Produkte oder Dienstleistungen zu kaufen. Aber alle Ihre Bilder sollten keine Hintergrundbilder sein. Als ich kürzlich an einer Website arbeitete, stellte ich fest, dass das CMS alle Bilder in Hintergrundbilder umwandelte. Die Absicht hier ist, sie einfacher zu gestalten und ihre Größe zu ändern. Das sieht zwar besser aus, aber Sie verlieren einen wichtigen Teil des Nutzens von Bildern auf Ihrer Seite: Alt-Text. Alt-Text beschreibt, was auf dem Bild zu sehen ist, und wird von Screenreadern verwendet, um zu identifizieren, was auf einem Bild zu sehen ist. Indem Sie alle Ihre Bilder zu Hintergrundbildern machen, verringern Sie die Zugänglichkeit der Seite, was es für Menschen mit Behinderungen schwieriger macht, und Sie können einen Treffer von Google in Ihren Rankings erleiden.

CSS mit JavaScript rendern

Die unnötige Bereitstellung von CSS über JavaScript verlängert die Ladezeiten auf Seiten. Es ist viel besser, die CSS-Datei im Header zu verlinken, anstatt sie durch diesen zusätzlichen Schritt zu führen. Auch die Verwendung von JavaScript für einfache Animationen oder Hover-Effekte verlängert die Ladezeit, wenn dies über CSS viel schneller erfolgen kann. Sogar das Hinzufügen von JavaScript-Frameworks, wenn es nicht benötigt wird, kann die Ladezeiten verlängern. Wie das Laden von jQuery, um eine Schaltfläche zu animieren. Anstatt das einfache JavaScript zu schreiben, oder noch besser, die Animationselemente in CSS oder sogar ein CSS-Animations-Stylesheet zu verwenden, wird es viel schneller geladen.

Gestaltung von Webelementen in HTML

Das Styling von Elementen direkt in der HTML-Datei ist ein umstrittenes Thema. Viele Themes und Plugins in WordPress und anderen CMS verlassen sich ständig darauf, Stylesheets und andere Plugins zu überschreiben. Dies wird normalerweise als schlechte Praxis angesehen. Einige Inhaltsersteller schreiben Stile direkt in ihre Inhalte, weil sie ihre Themenstile ändern möchten. Was ist das Problem dabei? Es verursacht oft CSS-Probleme, wenn die Stile, die direkt in die HTML-Elemente geschrieben werden, die Stile in der CSS-Datei überschreiben. Um dies zu vermeiden, weisen Sie den Webelementen eine Klasse zu, anstatt sie direkt in den HTML-Code zu schreiben, und fügen Sie ein neues Stylesheet hinzu, dem Sie die Stile hinzufügen. Dadurch können Probleme mit widersprüchlichen Blättern vermieden werden, die Ihre Website beschädigen oder falsch formatieren können.

Verwenden von HTML zum Gestalten von Layouts

Dies ist ein bisschen knifflig, da Themen oft CSS-Selektoren mit HTML-Strukturen koppeln. Dies erschwert es einer Person, Änderungen an der HTML-Struktur vorzunehmen, ohne wichtige Stile zu beschädigen, die die Seite lesbar und funktionsfähig machen. Zum Beispiel:

Wenn Sie in dem Beispiel die Struktur des HTML-Codes des ersteren ändern, würden Sie alle Stile für dieses Element verlieren, da es von der Struktur abhängig war. Stattdessen ermöglicht Ihnen das Entkoppeln des Stils von der Struktur, wie in den späteren Through-Klassen, die Wiederverwendung Ihres CSS, selbst wenn Sie die HTML-Struktur ändern.

Eine richtig formatierte Seite ist eine gut optimierte Seite.

Der Inhalt Ihrer Seite ist ein großer Faktor für das Ranking. Dies gilt auch für die richtige Verwendung der Webseitenelemente. Insbesondere spielen HTML, CSS und JavaScript eine ebenso große Rolle bei der SEO-Optimierung Ihrer Seite. Indem Sie die Rolle jedes Webelements kennen und es in geeigneter Weise einsetzen, können Sie Ihr Ranking verbessern. Erstellen Sie einfach eine Seite, die sowohl funktional als auch attraktiv ist. Wenn Sie darüber nachdenken, die Themen für ein CMS zu wechseln oder Ihren Seiten benutzerdefiniertes CSS oder JavaScript hinzuzufügen, werfen Sie einen zweiten Blick darauf und stellen Sie sicher, dass Sie Ihre Webelemente richtig verwenden.