Onepage h1-Überschriften

[frase]

Hi Ludwig,
mannohmann, was habe ich denn da wieder angerichtet?
Eine solch große Diskussion wollte ich eigentlich nicht auslösen.
Aber, wisst ihr was? - Es macht Spaß und ist wirklich echt hilfreich.
Man wird hier nicht einfach abgebürstet, wie es User in manch anderen Foren erleben müssen, sondern hier gibt es sachdienliche Hinweise.
Das ist gut so.

Zum Thema overflow-x-Problem:
Du bist ja richtig in meine Spielwiese eingetaucht, Ludwig, und hast auf Anhieb die Schwachstellen gefunden.
Was habe ich gesucht nach den Verursachern ...
Ich hatte zwischenzeitlich alle seitlich einschwebenden Elemente entfernt um sie zu finden.
Dein Hinweis war Gold wert.
Warum ich's nicht fand? - Weil ich in diesem frühen Stadium nicht alle Browser durchteste (mein Fehler.) Die Viewports hatte ich getestet, aber nur im Firefox.
Jetzt kommts! Ich habe für den Inhaltsbereich die Silbentrennung aktiv. Alle Browser können das seit Jahren - nur eben Chrome und seine Ableger nicht. Auch der neue Vivaldi kann's nicht.
Und jetzt noch ganz lustig: Im oben erwähnten Google Resizer-Tool wird sauber getrennt!!! Bei Google!!!
Das ist zwar keine Entschuldigung, erklärt es aber vielleicht.

Update: Ich fürchte, dass das Tool die Engine des Users verwendet. Also: nochmehr mein Fehler.

zu h1 verstecken:
Auch hier wieder: Ein super-Tipp von dir. Danke.
Aus deinem Link geht aber auch hervor, dass meine Methode in grauen Vorzeiten mal Usus war.
Das mit dem Dazulernen hört einfach nicht auf ...

Ansonsten, schönes Template ...

Na, das freut mich aber. Ist allerdings eigentlich nur eine Machbarkeitsstudie.
Das ist auch der Grund dafür, dass ich nicht pausenlos daran arbeite. Manchmal muss ich auch Überlebensmittel beschaffen
Ich bitte also um ein wenig Geduld für die Umsetzung.

[frase]

Ich melde Vollzug.

@Ludwig und @Christoph
Ihr hattet beide Recht. Die h1 sollte man nicht so einfach verstecken.
Ich habe es jetzt nach Anweisung aus dem Link von Ludwig gemacht.

@Ludwig
Ich habe in meiner responsive.css (die im Moment noch als letzte nachgeladen wird) deinen Vorschlag mit word-wrap umgesetzt.
Das tat ich schweren Herzens, denn die Überschriften möchte ich nicht wirklich kleiner machen. Sie sind ein wesentlicher Bestandteil des Gesamteindrucks. Nicht fett, aber groß.
Einen schlimmen Umbruch bekomme ich nicht zu sehen - nur Andere Nein, ich weiß jetzt keine andere Lösung.

Da kommen wir gleich zum nächsten Thema (oder soll ich ein neues aufmachen?).
Leider verfüge ich nicht über Geräte mit dem angebissenen Obst im Logo. Und auch kein Gerät mit hochauflösendem Display (Retina) nenne ich mein eigen.
Also muss ich so Einiges „blind“ abhandeln. Das betrifft u.A. das Logo im Header und die Pfeile/Schließen-Button in der Fancybox. Da mir in anderen Foren eingeredet wurde, dass kleine (Pixel)Grafiken natürlich hochgerechnet werden und damit unscharf, habe ich vorbeugend ein Retina-Script eingefügt, das, wenn es auf ein solches Display trifft, im Bilderordner nachschaut, ob es eine größere Alternative gibt, und wenn ja, diese verwendet.
Wie gesagt, nur das Logo und die Buttons habe ich tatsächlich in zwei Versionen hinterlegt - für die Galerie war mir das zu üppig. Wie ihr sicher bemerkt habt, habe ich genau aus diesem Grund alle anderen Grafiken aus Icon-Fonts genommen bzw. den Hamburger aus Linien zusammengesetz (geklaut). Der lässt sich dann auch noch animieren.

Wenn jetzt mal Einer mit einem Retina-Display, auf der Seite vorbeischaut und das Ergebnis prüft und mir mitteilte - das wäre beglückend (um mal ein anderes Wort zu verwenden).
Ich sehe ja in meiner access.log, dass schon einige da waren

Nachtrag: Auch die relativ dünne Schrift könnte in verschiedenen Browsern Probleme bereiten. Ich glaube, dafür vorgesorgt zu haben. Sieht jemand irgendwas Schlimmes?

[olape]

Hallo,

um noch mal auf die h1 zurückzukommen.

Warum sollte die h1 unbedingt vor dem Slider stehen?
Du verwendest html5, hast header, nav und section drin.
Was spricht dagegen, auch noch main zu verwenden und h1 darin zu platzieren?
Ich bin nicht sicher, ob h1 unbedingt in header stehen muss.

Also nur mal so, ganz unabhängig von der jetzigen Lösung.
Ich lerne auch gern dazu. Und diese Lösung kannte ich noch nicht.
Ich habe bei mir die h1 mit display: none einfach versteckt und bisher keine neg. Auswirkunegen feststellen können.

Ausserdem könnte man sich auch noch mal hgroup ansehen.
Wobei das dann wieder im Plugin oder zusätzlich bei der Ausgabe eingebaut werden müsste und wohl auch nur bei mehreren Ebenen Sinn machen würde.

[frase]

Hi Olaf,

Warum sollte die h1 unbedingt vor dem Slider stehen?

Der Slider ist das erste echte Inhaltselement (übrigens auch die erste Seite - könnte ja auch z.B. Produktinfos enthalten).
Also gehört die erste (und einzige) h1 dort hin - bzw. davor, weil kein Platz.
Bin mir nicht sicher, aber display: none scheint mir noch schlimmer als der negative Einzug (-9999 - siehe Link von Ludwig).
hgroup und/oder main nützt hier auch nichts, weil der Slider bildschirmfüllend als Landing-Page dienen soll.

Und nebenbei: Die html5-Struktur konnte ich auch nicht konsequent durchhalten, was aber, so glaube ich, kein echter Makel ist.
Übrigens: display:none habe ich bei ganz alten Templates sehr, sehr viel früher auch verwendet.
Die Zeiten ändern sich. Google wird pfiffiger.

[cmb]

Mit eurer Hilfe habe ich es geschafft, aus meinen h1-Seiten h2-Seiten zu machen - nur nach dem Rendern (sagt man das so?), […]

Ich glaube schon.

Vielleicht lassen wir uns auch zu sehr von Google & Co durchs Leben treiben - aber ganz ignorieren können wir sie wohl auch nicht?

Ist halt die Frage wie wichtig SEO für die jeweilige Website ist. Wenn SEO wichtig ist, dann muss man den Suchmaschinen zumindest entgegenkommen. Allerdings habe ich festgestellt, dass zumindest vieles was von Google & Co. gewünscht wird, eigentlich auch für einen menschlichen Besucher wünschenswert ist.

Biite Link zu Github Issues korrigieren

Danke, Ludwig. Erledigt.

Wenn jetzt mal Einer mit einem Retina-Display, auf der Seite vorbeischaut und das Ergebnis prüft und mir mitteilte - das wäre beglückend (um mal ein anderes Wort zu verwenden).

Ich habe auch kein iP*, und habe das Thema zumindest bisher auch weitgehend ignoriert. Irgendwie habe ich auf die Verfügbarkeit des <picture> Elements gewartet, und wie ich gerade sehe, ist der Support mittlerweile ganz ordentlich. Nun müsste das nur noch im Editor (TinyMCE 4?) und von den diversen Galerie-Plugins unterstützt werden. Auf dann….

Bin mir nicht sicher, aber display: none scheint mir noch schlimmer als der negative Einzug (-9999 - siehe Link von Ludwig).

Na ja, entweder ignoriert Google das <h1> dann einfach (dann hätte man es aber erst gar nicht einfügen müssen), oder straft die Site sogar ab.

Ich kann mir allerdings vorstellen, dass es möglich sein müsste, das <h1> auch ohne "Tricks" sowohl für Google als auch für menschliche Besucher sauber darstellen zu können. Weiß leider aber nicht, wie. Vielleicht ist das aber auch ein Thema, das besser in einem spezialisierten Forum angefragt wird.

[olape]

ok, ist geklärt.
ich war der Annahme, der Slider steht vor dem eigentlichen, durch CMSimple_XH bereitgestellten Content.

zu display: none oder visibility: hidden

http://www.seo-kueche.de/blog/hidden-co ... n-problem/
https://www.krick-interactive.com/sem-b ... e-ranking/
Letzterer ist schon etwas älter, aber scheint gültig, oder deckt sich jedenfalls mit meinen Erfahrungen.
Auch diverse SEO-Tests stören sich nicht daran.

Auch hier sind beide nicht explizit aufgeführt, was natürlich trotzdem keine wirkliche Aussage ist.
https://support.google.com/webmasters/a ... 6353?hl=de

[frase]

Zusammenfassung:
Man kann sämtliche <h1> bei der Ausgabe in <h2> umwandeln, wenn man Christophs Code für die Contentausgabe im Template verwendet:
statt

Code: Select all

<?php echo onepage_content() ?>

verwendet man

Code: Select all

<?php echo preg_replace_callback('#(?<=<h|</h)[1-2]#', function ($matches) {return $matches[0] + 1;}, onepage_content()) ?>

Um nun die ERSTE <h2> wieder in eine (und einzige) <h1> zu verwandeln, kann man jQuery verwenden (Script am Ende des Templates):

Code: Select all

$("h2:first").replaceWith(function() {
	return '<h1>' + $(this).text() + '</h1>';
});

Will man (wie z.B. bei meinem Test) nur die ZWEITE <h2> in eine <h1> umwandeln, schreibt man:

Code: Select all

$("h2:nth(1)").replaceWith(function() {
	return '<h1>' + $(this).text() + '</h1>';
});

Die Zählung beginnt bei "0".

[Holger]

Um nun die ERSTE <h2> wieder in eine (und einzige) <h1> zu verwandeln, kann man jQuery verwenden

Das finde ich nicht optimal.
Besser scheint mir eine serverseitige Lösung.

Wer H1 im Template noch nicht verwendet hat kann das folgende, gut lesbare Schnipsel verwenden:

Code: Select all

<?php echo preg_replace('#<h2(.*?)<\/h2>#', '<h1$1</h1>', preg_replace('#<h1(.*?)<\/h1>#', '<h2$1</h2>', onepage_content()), 1);?>

Die erste OnePage - "Seite" bekommt <h1>, der Rest <h2>

Und wer <h1> schon im Template belegt hat, nimmt:

Code: Select all

<?php echo preg_replace('#<h3(.*?)<\/h3>#', '<h2$1</h2>', preg_replace('#<h1(.*?)<\/h1>#', '<h3$1</h3>', onepage_content()), 1);?>

Die erste OnePage - "Seite" bekommt dann <h2>, der Rest <h3>

Voraussetzung: XH muss auf Menülevel 1 konfiguriert sein: Einstellungen -> CMS -> Menü -> Ebenen -> 1.

Vielleicht kann man aber auch einmal über die mit HTML5 dazu gekommenen Möglichkeiten zur semantischen Strukturierung nachdenken.
In der Demo habe ich das mal als Beispiel gemacht: die Dokumentstruktur ist valide, was auch das "Document Outline" am Ende der Validator - Seite zeigt (Link siehe Demo).
Dann spart man sich das ganze herumeiern mit den Hx - Ersetzungen...

[frase]

Hi Holger,
unabhängig davon, dass ich deine Vorschläge noch gar nicht richtig durchgearbeitet habe, steht schon jetzt fest, dass wahrscheinlich du der Einzige bist, der die Chose mit den h1 richtig überblickt.
Ich habe den Thread aus einer falschen Annahme heraus begonnen: h1-Überschriften dürfen nur einmal vorkommen. Das ist schlicht Quatsch.
Zu sagen, es können beliebig viele vorkommen, ist so auch Quatsch.
Es hängt vom Inhalt und der Semantic ab - wie du das schon bei dem OnePager mit <article> gemacht hast.
Das Forum hier ist wirklich "zu was nütze".

Vielleicht kann man aber auch einmal über die mit HTML5 dazu gekommenen Möglichkeiten zur semantischen Strukturierung nachdenken.

In meiner hohen Jugend beginne ich es langsam zu begreifen.
Durch deine Aktivitäten bin ich auf einen Artikel gestoßen, der das Problem (für meine Begriffe) wirklich gut erklärt.
http://webdesign.tutsplus.com/articles/ ... sign-16824

Das nur erstmal als kurze Rückmeldung.
Später mehr.

[olape]

Hallo,

@frase und Holger
da habt ihr sicher beide Recht.

Aber der springende Punkt für geänderte Überschriftstrukturen ist wohl tatsächlich

Vielleicht kann man aber auch einmal über die mit HTML5 dazu gekommenen Möglichkeiten zur semantischen Strukturierung nachdenken.

Nur in diesem Zusammenhang wäre das korrekt umsetzbar.
Jedenfalls verstehe ich das so.