Wie viele von Ihnen bereits wissen, ist das h1-Tag eines der wichtigsten, da es den relevantesten Text der Seite oder des Eintrags enthält . Wie wir in unserem On-Page-SEO-Handbuch erwähnt haben (wenn Sie es nicht gelesen haben, sollten Sie es tun) , sollte es nur einen h1-Tag für jede Seite oder jeden Eintrag geben , zusätzlich zu anderen Faktoren, die zu berücksichtigen sind, die im Handbuch erklärt werden, und ich werde es nicht tun hier zu wiederholen. In diesem Artikel werde ich mich darauf konzentrieren, wie man doppelte h1-Tags in WordPress vermeidet, da wir uns in unserem Blog oder im Web darum kümmern sollten.
Dies ist kein Tutorial für die neuesten Webmaster, da es ein Minimum an PHP-, HTML- und CSS-Kenntnissen erfordert, aber ich denke, jeder könnte es mit ein wenig Aufwand bekommen.
Ursprung doppelter h1-Tags in WordPress
Doppelte h1-Tags sind fast immer das Ergebnis eines schlechten Designs und einer schlechten Programmierung unseres WordPress-Themas.
Normalerweise zeigen die Themen ein Logo in der Hauptüberschrift, das in Form von Text oder in Form eines Bildes vorliegen kann und normalerweise zwischen h1-Tags liegt. Darüber hinaus steht in den verschiedenen Einträgen der Titel des Artikels oder Eintrags normalerweise auch zwischen h1-Tags, und hier finden wir das Problem doppelter h1-Tags .
Um dieses Problem zu lösen, müssen Sie mit der Programmierung des WordPress-Themas beginnen und viele Male mit einer einfachen Modifikation der Datei header.php lösen header.php das Problem.
Die Lösung, wenn es sich bei der Überschrift um Text oder ein Bild handelt, basiert auf der gleichen Sache, aber im Fall des Bildes müssen Sie auch bestimmte Aspekte des CSS-Codes berücksichtigen, sodass ich zwei Abschnitte erstellen werde, einen für die Überschrift mit Text und einen anderen für Überschriften mit einem Bild als Logo.
Vermeiden Sie doppelte h1-Tags für Themen mit einem Nur-Text-Header.
Wenn es um Text geht, ist die Lösung ziemlich vereinfacht. Es reicht aus, eine PHP-Bedingung zu verwenden, die den h1-Header abhängig von der Homepage oder einem Eintrag anzeigt oder nicht.
<?php if ( is_home() ) { ?> <h1>Vozidea.com</h1> <?php } else { ?> <h2>Vozidea.com</h2> <?php } ?>
Wenn wir mit dem vorherigen Code die Hauptseite unseres WordPress-Blogs besuchen, wird der Name unseres Blogs zwischen den h1-Tags angezeigt. Wenn wir eine andere Seite besuchen, wird er zwischen den h2-Tags angezeigt. Offensichtlich handelt es sich um einen grundlegenden Beispielcode, den wir an unsere Bedürfnisse anpassen können.
Vermeiden Sie doppelte h1-Tags in Designs mit Bildheader als Logo.
In diesem Fall besteht die Lösung darin, einen Code zu verwenden, der dem vorherigen Code ähnelt, jedoch das HTML-Markup für das Logo enthält. Beispiel:
<?php if ( is_home() ) { ?> <h1 class=”logo”>Vozidea.com</h1> <?php } else { ?> <div class=”logo”>Vozidea.com</div> <?php } ?>
In diesem Fall müssen Sie mit dem CSS-Code der logo Klasse spielen, um zu vermeiden, dass der Text auf dem Bildschirm angezeigt wird. Wir möchten, dass der Text zwischen den h1-Tags verborgen wird, damit sie unser Logo nicht verdecken.
Es ist in diesem Teil zu verhindern, dass der Text angezeigt wird, es ist, wo Sie auf bestimmte CSS-Tricks zurückgreifen müssen, ich kenne sie nicht alle, geschweige denn, aber ich werde die bekanntesten zeigen:
- Verwenden Sie die CSS
text-indent.
Mit dieser Eigenschaft und einem hohen negativen Wert erhalten wir den Text vom Bildschirm. Dann ist der Text noch vorhanden (Google erkennt ihn und kann ihn finden), aber die Nutzer sehen ihn nicht auf Ihrem Bildschirm. Auf diese Weise wird der Text zwischen den angezeigten h1-Tags häufiger verwendet. Es wird von Google nicht bestraft, solange wir es nicht verwenden, um Links oder andere BlackHat-Techniken zu verbergen.text-indent: -9000px;
- Verwenden Sie die
display.
Mit diesen Eigenschaften können wir den Text zwar ausblenden, dies ist jedoch nicht die empfohlene Methode, da Google es nicht mag, Elemente auszublenden, und selbst wenn wir Links ausblenden, kann dies zu einer Bestrafung führen. Trotzdem wird es von einigen Websites verwendet, und ich möchte annehmen, dass bei korrekter Verwendung keine Gefahr besteht.display: none;
- Entfernen Sie den Text aus seinem Container mit
positionund verbergen Sie ihn, indem Sie denoverflowanpassen.
Dies scheint der sicherste Weg für Google zu sein, erfordert jedoch etwas mehr Arbeit und CSS-Kenntnisse. Was wir tun, ist, den Text mit der Eigenschaftpositionaus seinem Container zu entfernen und ihn dann mit einemoverflowauszublenden. Ein Anwendungsbeispiel wäre:position: absolute; overflow: hidden;
Bevor ich zum Schluss sage, dass ich mich in Vozidea für eine viel einfachere Lösung entschieden habe und nicht das h1-Tag für das Logo verwenden soll (ich verwende immer einen div-Container). Ich habe mich dazu entschlossen, weil ich einige anerkannte Seiten wie Mozs gesehen habe, die das so gemacht haben und es scheint, als gäbe es keine Probleme.
Ich hoffe, dieser Artikel hat Ihnen geholfen und wenn Sie der Meinung sind, dass er es verdient, können Sie mehr Menschen helfen, indem Sie ihn in sozialen Netzwerken teilen.
