Neuer Headerbereich, wenn auch erst auf dem zweiten Blick

Veränderung Headerbereich

Eigentlich plante ich schon seit einiger Zeit, den Header zu überarbeiten. Aber das Wichtigste war ja vorhanden: Blogname und Logo. Und durch die eingefügte Suchfunktion war auch nicht mehr sehr viel Platz für weitere Inhalte vorhanden. Daher schob ich dieses Vorhaben immer wieder vor mir her.

Andererseits meine ich, dass gerade der Headerbereich das Aushängeschild einer Webseite ist. Aber irgendwie fehlte mir die Inspiration.

Technische Daten bei seitwert.deAngeschubst hat mich dann das Ergebnis einer Überprüfung bei seitwert.de, in dem als Minus-Punkt der fehlende h1-Wert und zu wenige Zeichen im Seitentitel aufgeführt war.

 

Ein bisschen SEO ist ja nicht verkehrt

Mir war schon klar, dass es aus SEO-Sicht wohl recht wichtig ist, einen prägnanten Seitentitel mit einem h1-Wert zu definieren.
Allerdings war mir nie richtig bewusst, dass das bei meinem Blog nicht der Fall ist. Nachdem ich den Hinweis zur Kenntnis genommen hatte und diesen mit Blick in den Seitenquelltext bestätigt sah, durchstöberte ich probeweise die Quelltexte anderer Blogs. Und tatsächlich sind in den meisten Seiten h1-Deklarationen der Seitentitel vorhanden.

Das hieß also, ich musste die CSS-Werte in der style.css meines Themes um den Wert “h1” meines Themes ergänzen und das Logo und insbesondere den Seitentitel mit diesem in der header.php umschließen.

Wenn schon Änderung, dann das volle Programm

Schon mal mit dem Header beschäftigt, habe ich die Schrift  des Blognamens plastischer gestaltet. In dem gleichen Stil erscheint dieser auch noch einmal im Footer.

Das Logo wurde noch einmal überarbeitet. Ich fand, es wirkte bisher immer etwas verloren, daher habe ich es ein wenig vergrößert und springt dadurch mehr ins Auge.

Ein Motto sollte es auch endlich geben – möglichst kurz und knackig und auf meinen Blog zutreffend.

Ich wollte den Text nicht noch über das Suchfeld quetschen, daher musste dieses in die Menüleiste ausweichen. Auch dessen Grafikumrandung habe ich bearbeitet, wodurch es plastischer erscheint und sich besser von dem dunklen Hintergrund abhebt.

Und als letztes nahm ich mir die Schrift in den Menütiteln vor, die durch einen kleinen Eingriff nun wesentlich klarer wirkt.

Der Vergleich

Bild - Vorheriger Header

Vorher

Bild - Neuer Header

Nachher

Einbindung in die header.php

Die optische Gestaltung war abgeschlossen. Mein Bestreben, den kompletten Headerbereich anklickbar zu coden war für mich schon etwas fummelig, hat aber letztendlich funktioniert. Das sind immer so Momente, wo ich schon mal “strike” ausrufe. ;-)

Aber was war das? Ein valider Fehler! Das ging ja gar nicht. Gott sei Dank kam dann doch noch der rettende Geistesblitz das Logo nicht mit dem Code “div-ID” zum umschließen sondern statt dessen “object-ID” zu verwenden.

Geschafft! “Strike!!!”

Wen es interessiert, so sieht nun mein Code aus:

<div id="header">
<h1><a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?><object id="logo"><img width="100" height="91" src="pfad-zur-grafikdatei" alt="Logo Sylvis Blog" /></object><span><?php bloginfo('description'); ?></span>
</a></h1></div>

Und, hat es etwas gebracht?

Bild - technische Daten bei seitwert.de nach Änderung

Ein erneuter Test bei seitwert.de ergab, dass die Deklaration der Überschrift in h1 jetzt vorhanden ist und wird daher positiv bewertet.

Aber auch optisch gefällt mir der Headerbereich wesentlich besser. Ich hoffe Euch auch. :-)

Hinweis
Dieser Beitrag bezieht sich auf Codierungen oder/und Funktionen, die ich noch in meinem alten Template umgesetzt habe. Es ist möglich, dass sie in dem aktuellen Blog-Theme nicht übernommen wurden und somit die Darstellung bzw. Funktion nicht mehr existiert.

Die Autorin:

Sylvi

Meine Beiträge beinhalten eigene Erfahrungen über Soft- und Hardware, Social Media und die ich als WordPress-Bloggerin und Joomlanerin gesammelt habe. Zudem widme ich mich dem schönen Hobby "Fotografie".

Alle Beiträge anzeigen Url Flickr GooglePlus Instagram Rss Tumblr Youtube

23 Kommentare

  • Also, die Sache mit der h1-Auszeichnung ist etwas umstritten. Es gibt User, die, so wie du es auch gemacht hast, das Logo mit h1 auszeichnen. Ich mache das allerdings nicht, weil der h1-Tag ja eigentlich eine Überschrift auszeichnen soll und ein Logo ist natürlich keine Überschrift.

    Bei meinem Blog habe ich es so gemacht, dass in der Artikelanzeige der Blog-Titel mit h1 ausgezeichnet ist, die Überschrift des Artikels mit h2 und die Zwischenüberschriften mit h3.

    • Hallo Cujo,

      naja, also der h1-Tag umschließt bei mir ja nun nicht nur das Logo sondern auch den Blogtitel – schau Dir mal den Code im Beitrag an. :-) Oder habe ich mich in dem Beitrag missverständlich ausgedrückt?
      Und der Rest ist bei mir genauso: Artikelüberschrift in h2 und Zwischenüberschriften in h3.

      Gruß Sylvi

      • Nee, dein h1-Tag umschließt eine Verlinkung und eine Grafik. Der h1-Tag ist aber ausschließlich für Überschriften gedacht, sollte also nicht verlinkt werden und auch keine Grafik beinhalten -> Überschriften

        Aber es ist jedenfalls schon mal eine Verbesserung, dass du jetzt einen h1-Tag hast, auch wenn er meiner Meinung nach nicht sinngemäß verwendet wird.

        • Alles klar, dann würde es auch nicht mehr bringen, wenn ich statt des o. g. Codes folgenden verwenden würde …

          
        "Sylvis Blog
Neugier schafft Wissen

          … trotz der direkten Eingabe des Seitentitels und des Mottos in der header.php, statt diese in den Einstellungen im Backend von WordPress einzutragen. Name und Motto befinden sich bei dieser Umsetzung ja ebenfalls innerhalb einer Verlinkung.
          Na dann bleibt es eben bei den 12,5 statt der vollen Punktzahl von 13 bei “Seitwert”. Denn auf den Link möchte ich nicht unbedingt verzichten. :-)

          Kleine Anmerkung noch. Ich habe eben mal testweise einen zweiten CSS-Wert mit h1-Seitentitel als Text und ohne Verlinkung direkt in die header.php eingetragen und per display:none deklariert.
          Das fand “Seitwert” wiederum nicht so schön, weil zu viele h1-Überschriften enthalten seien. ;-) Dafür wurde für die technischen Details nur noch 12 Pünktchen vergeben.

  • Bei mir sieht das völlig anders aus als in deinem Screenshot, ich lasse dir mal ein Bild zukommen wie es bei mir aussieht. Übrigens stimmt dein RSS-Stream bei Kategorien immer noch nicht, er bring mir immer alle Inhalte.

    • Kann ich absolut nicht nachvollziehen Marmel. Ich habe probeweise den Feed “Software” abonniert und es erschienen auch nur alle Beiträge zu dem Thema “Software” bei mir im Feed.

      • Das glaube ich dir, es ist komisch wenn ich den Feed direkt lese ist er korrekt, aber mit Google Reader erscheint alles. Wahrscheinlich braucht Google etwas um die Änderungen mitzubekommen, ein Löschen und Wiederaufnehmen des Feeds brachte mir nichts. Scheint also nicht an dir, sondern an Google zu liegen.

        Und dein neues Layout wird jetzt auch richtig dargestellt.

        • Okay, ich hatte den Test mit Thunderbird gemacht. Wenn ich den Feed-Kategorie-Link im Url-Feld kopiere und dem Google-Reader hinzufüge, funktioniert es bei mir auch. Es scheint wohl nur das direkte Abonnieren nicht ganz zu klappen.

          Naja, leider wird CSS3 trotz Alternativwerte im IE mal wieder nicht richtig umgesetzt, aber das ist ja nix Neues.

  • @Marmel ich habe bisher Deine Webseiten-Url bei all Deinen Kommentaren geändert, weil der Link den du angibst nicht erreichbar ist. Aber sei mir nicht böse, wenn ich sie jetzt nur noch entferne.
    Ich hatte Dich ja bereits darauf hingewiesen.

  • Hab dies problem auch mit dem Logo und h1,gehabt,
    nach langen überlegen,das Logo ganz weggenommen aber überschrieft einfach mit css3 in 3D gemacht,
    eine externe grafik und anfrage im header weniger.

    MfG

    • Ah okay, Viktor. Allerdings möchte ich hier nicht auf mein Erkennungszeichen in Form des Logos verzichten. :-)

      Gruß Sylvi

  • Sylvi,
    ok gewisse Branding soll schon sein,hab dies abgewöhnt.
    Aber Du hast doch das super ins Desing integriert.
    Klasse.
    LG

  • Sylvi, Seitwert kannst du vergessen. Die ermittelten Werte sind völlig willkürlich. Bsp.: Ich kriege bei Seitwert z. B. Zusatzpunkte, weil meine Domain schon seit 11 Jahren existiert. Das ist natürlich richtig, aber ich besitze die Domain erst seit 2 Jahren und vorher war auf der Domain kein sinnvoller Content drauf. Warum sollte ich da Zusatzpunkte bekommen?

    Wenn du Lust hast, kannst du mal ausprobieren, was passiert, wenn du den h1-Tag ohne Inhalt verwendest, also so: . Ich würde mich nicht wundern, wenn du dafür auch Punkte bekommen würdest ;-)

    • Mag sein, aber es gibt ja noch einige andere Testseiten, z. B. seittest. Diese allein für sich ist ebenfalls nicht sehr aussagekräftig. Ich wollte in meinem Beitrag eigentlich auch nur dokumentieren, dass bei mir überhaupt keine h1-Deklaration vorhanden war. Vielleicht hat da der eine oder andere Webmaster bisher auch noch nicht drauf geachtet.

      12 Punkte waren ja auch schon nicht schlecht, nun sind es gerade mal 0,5 Punkte mehr … lt. seitwert. :-)

      Natürlich prüfe ich analog noch mit PageSpeed ob online oder per Browser-Addon, GTmetrix, Pingdom Tools, W3C usw. usf. Und wo ich spaßeshalber auch immer mal gerne reinschaue ist Blablameter. :mrgreen:
      Gibt man außerdem bei Google “Webseite testen” ein, wird einem ja so einiges geboten.

      Gruß Sylvi

  • Ach Leute,es gibt so viele servicen Die Werte ermittelten und jeder zeigt ihr eigenes wert.
    Da würde ich kein wert drauf legen.
    Es gibt Experten die mit neun Algaritmen sich befassen und auskennen.Rate zu Rand Fishkin von SEOmoz videos ankguken.
    Einzige was zählt ist wirklich gutes einzigartige Content.
    MfG

  • Habe mal eben geschaut, bei mir meckert seitwert.de wegen zu vielen H1 Überschriften. Wenn ich viel Zeit habe gehe ich das mal an! Vormirherschieb!

    Dein Header gefällt mir jetzt besser weil die Anordnung einfach besser aussieht!

    Gruß aus Sachsen!

    • Hallo Daniel,

      hej, Du bist der Erste, der sich zu der Optik – und dazu noch positiv :-D – äußert.
      Super, da freue ich mich, dass Dir der neue Header gefällt. Ich finde ihn auch besser, also sind wir schon zwei. Somit hat sich die Arbeit schon gelohnt :mrgreen:

      Wenn ich viel Zeit habe gehe ich das mal an! Vormirherschieb!

      Kenn ich, sowas mache ich auch erst entweder wenn ich gaaanz viel Zeit habe, die kalte Jahreszeit kommt oder es mir unheimlich unter den Nägeln brennt.

      Lieben Gruß aus dem Sauerland,
      Sylvi

  • Hallo Sylvi, Du solltest Dir mal den Artikel von Viktor Dite durchlesen, den er letztens veröffentlicht hat: https://mizine.de/html/wordpress-theme-tip/
    Wenn ich mir die h-Überschriften Struktur Deines Themes ankucke, dann wird mir ehrlich gesagt etwas anders.

    Und zum h1: Wie Cujo schon sagte, da gehört ausschließlich nur Text rein, kein HTML (z.B. span) und auch sonst nix anderes. Der header ist in meinen Augen auch ziemlich falsch dafür (außer vielleicht auf der Startseite). h1 ist die Hauptüberschrift, die es nur ein einziges Mal pro Seite geben darf. Und was ist diese in Deinen Artikeln?

    • Hallo Tanja,

      erst einmal danke für den Link zu dem wirklich schönen Beitrag, in dem von Viktor sehr sympathisch erklärt wurde, welch fatalen Folgen ein falscher Webseitenaufbau haben kann.
      Ich hoffe, dass ich ihn halbwegs richtig interpretiert habe – einschließlich Verweislink auf die englische Seite.
      Du kennst mich vielleicht schon ein wenig und wirst ahnen, dass ich – auch wenn ich nicht akribisch sämtliche SEO-Regeln befolge – schon versuche, etwas davon umzusetzen.

      Ich hoffe, Du hast Dich in der Zwischenzeit von dem Anblick meiner Blogstruktur erholt. ;-) … h-Überschriften gibts in der Sidebar und der Footer-Sidebar nicht mehr.
      Die h1-Überschriften sind nur noch auf den einzelnen Beitragsseiten vorhanden.

      Ich vermute, ihm letzten Satz hast Du einen Code geschrieben, der hier in der Kommentarfunktion eventuell nicht umgesetzt wurde?

      Lieben Gruß und danke für die konstruktive Kopfwäsche ;-)
      Sylvi

      • An Code könnte ich mich jetzt nicht mehr einnern. Hab Deinen Quelltext noch mal kurz überflogen und ich würde noch folgendes ändern:
        – h2 id=”comments”: h2 hat da unten in meinen Augen nix verloren
        – direkt unter dem Titel: h3 Geschrieben von, darunter h4 Zahl = alles raus (nur die hs)

        Ich glaube Viktor hat das auch beschrieben, die h-Tags sind Überschriften und dienen zur besonderen Hervorhebung im Thema. So sieht eine sinnvolle Verteilung aus:
        – h1 = einmalig = die Überschrift des Artikels
        – h2 = mehrmalig = Zwischenüberschriften im Artikel
        – h3 = mehrmalig = Zwischenüberschriften im Artikel
        etc.
        Das ganze fortlaufend von oben nach unten und nicht durcheinander ;)

        • Mist, habe ich übersehen! ;-)

          Ich denke, die gröbsten Fehler sind nun behoben. Danke Tanja, dass Du noch einmal einen Blick auf den Quelltext riskierst hast.

          Gruß Sylvi