Onepage h1-Überschriften

Ein CMSimple Support Forum für deutsch sprechende Nutzer und Entwickler
frase
Posts: 2159
Joined: Thu Apr 21, 2016 6:32 am
Location: Saxony
Contact:

Onepage h1-Überschriften

Post by frase » Thu Apr 21, 2016 7:14 am

Hallo,
bin neu im Forum und möchte zuerst allen Entwicklern und Mitwirkenden für die Arbeit an CMSimple und die vielen Infos im Forum danken.

h1-Überschriften in Onepage-Seiten
Ich vermute, dass es tatsächlich ein Problem bei Google & Co. gibt, wenn mehrere h1-Überschriften auf einer Seite vorhanden sind.

Überlegung:
Immer nur die erste Seite - also Home oder Willkommen oder so - mit einer h1 versehen. Alle folgenden Seiten erhalten (als erste) eine h2.
Dazu müsste der Menüaufbau geändert werden - also als erstes die h1 und dann alle h2 - aber nicht als menulevel2, sondern ebenbürtig.
Mehrere h2 (und folgende) sind (so glaube ich) kein Problem.
Die Bearbeitung sollte/könnte wie bisher erfolgen, nur wenn die Seite insgesamt angezeigt wird, wird die Navigation manipuliert (h1-h2-h2-h2 ...)

Möglicherweise könnte das im Onepage-Plugin realisiert werden?

olape
Posts: 594
Joined: Fri Mar 13, 2015 8:47 am
Contact:

Re: Onepage h1-Überschriften

Post by olape » Thu Apr 21, 2016 12:43 pm

Hallo,

und Willkommen im Forum.

Versuch doch mal im Template

Code: Select all

<?php echo  onepage_content(); ?>
durch

Code: Select all

<h1>irgendeine Überschrift</h1>
<?php
	echo str_replace(array('<h3', '<h2', '<h1', '</h3', '</h2', '</h1',), 
				        array('<h4', '<h3', '<h2', '</h4', '</h3', '</h2',), 
				        onepage_content());
?>
zu ersetzen!

Statt irgendeine Überschrift könnte man auch einen Templatetext nutzen. Dann muss man es im Fall der Fälle später nicht im Template ändern, sondern kann das über die Sprachdatei tun bzw. funktioniert es auch mit mehrspachigen Webseiten.

Code: Select all

<h1><?php echo $tx['template']['text1']; ?></h1>
Last edited by olape on Thu Apr 21, 2016 3:35 pm, edited 1 time in total.

frase
Posts: 2159
Joined: Thu Apr 21, 2016 6:32 am
Location: Saxony
Contact:

Re: Onepage h1-Überschriften

Post by frase » Thu Apr 21, 2016 2:58 pm

Hi Olaf,
interessanter Ansatz, alle Überschriften einfach um einen Level zu verschieben. (falls ich das richtig verstand)

Mein erster Versuch deinen Code einzufügen, hat bei mir (local) zunächst erstmal das gesamte Layout zerschossen.
Und aus allen h1 und h2 hat er h4 gemacht.
Das heißt aber noch gar nichts.
Ich werde mich demnächst nochmal damit befassen. Das wird leider etwas dauern. Die Idee find ich gut - mal sehen, ob praktikabel.

Ich danke für die prompte Antwort und den Vorschlag.

Übrigens experimentiere ich gerade an einem Onepager. Interesse?
http://fhseidel.de/cms-op/
Last edited by frase on Thu Feb 15, 2018 9:56 am, edited 1 time in total.

olape
Posts: 594
Joined: Fri Mar 13, 2015 8:47 am
Contact:

Re: Onepage h1-Überschriften

Post by olape » Thu Apr 21, 2016 3:33 pm

frase wrote:Und aus allen h1 und h2 hat er h4 gemacht.
Ja, sorry, taktischer Fehler :oops:
Man muss das Pferd von hinten aufzäumen.

Ich ändere das im vorherigen Post.

Kann sein, dass die Formatierungen im css auch entsprechen verschoben werden müssen.

Hab jetzt nur iPad hier, da kann ich nicht/nur schlecht nachsehen.

Die ursprüngliche Idee stammt übrigens von Svasti

http://svasti.de/en/?Tutorials/Search-E ... timization

cmb
Posts: 12785
Joined: Tue Jun 21, 2011 11:04 am
Location: Mü-Sa, RLP, DE
Contact:

Re: Onepage h1-Überschriften

Post by cmb » Thu Apr 21, 2016 5:04 pm

olape wrote:Die ursprüngliche Idee stammt übrigens von Svasti

http://svasti.de/en/?Tutorials/Search-E ... timization
Wobei svasti da noch einen Schritt weiter geht, und nicht vorhandene Zwischenüberschriften (also bei <h1> Seiten <h2> und <h3> bei menu_levels=3) erstellt, indem alles entsprechend nach oben rutscht. Ist vermutlich auch hierfür keine schlechte Idee.

Statt str_replace() kann man übrigens strtr() verwenden, das u.U. etwas besser lesbar ist, also:

Code: Select all

echo strtr(onepage_content(), array(
    '<h3'  => '<h4',
    '<h2'  => '<h3',
    '<h1'  => '<h2',
    '</h3' => '</h4',
    '</h2' => '</h3',
    '</h1' => '</h2',
));
Außerdem erfolgt bei strtr() keine Ersetzung von bereits Ersetztem.

Oder besonders gut lesbar: ;)

Code: Select all

echo preg_replace_callback('#(?<=<h|</h)[1-3]#', function ($matches) {return $matches[0] + 1;}, onepage_content())
frase wrote:Möglicherweise könnte das im Onepage-Plugin realisiert werden?
Ja, sollte es. Ich habe es vermerkt.
Last edited by cmb on Mon Apr 25, 2016 10:19 am, edited 1 time in total.
Reason: Link korrigiert
Christoph M. Becker –Plugins for CMSimple_XH, but not for CMSimple 4+

olape
Posts: 594
Joined: Fri Mar 13, 2015 8:47 am
Contact:

Re: Onepage h1-Überschriften

Post by olape » Thu Apr 21, 2016 6:01 pm

Wobei svasti da noch einen Schritt weiter geht, und nicht vorhandene Zwischenüberschriften (also bei <h1> Seiten <h2> und <h3> bei menu_levels=3) erstellt, indem alles entsprechend nach oben rutscht. Ist vermutlich auch hierfür keine schlechte Idee.
Da bin ich nicht sicher.
Svasti ist davon ausgegangen, dass immer nur eine Seite angezeigt wird. Da passt das.
Ich nutze es auch so.
Aber wenn alle Seiten auf einmal angezeigt werden???
Das müsste man mal durchspielen.
Aber ich habe mir bisher weder das Plugin noch das Template richtig angesehen.

frase
Posts: 2159
Joined: Thu Apr 21, 2016 6:32 am
Location: Saxony
Contact:

Re: Onepage h1-Überschriften

Post by frase » Fri Apr 22, 2016 7:19 am

Hi Olaf, hi Christoph,
gute Nachricht: alle drei Vorschläge funktionieren.
Wenn ich nur sowas könnte!
Dank an euch.

CSS-Anpassungen waren klar.

Ich habe mich für die "Kurzform" entschieden:

Code: Select all

<?php echo preg_replace_callback('#(?<=<h|</h)[1-2]#', function ($matches) {return $matches[0] + 1;}, onepage_content()) ?>
Dabei habe ich reduziert auf h2. Alle folgenden können bleiben wie sie sind.
Später (!) wird das ja im Onepage-Plugin auf einen einfachen Aufruf hinauslaufen ;)

In meinem Template habe ich als "Landing" diesen Big-Slider, wo ich nun wiederum keine h1 unterbringen kann.
Also habe ich

Code: Select all

<h1><?php echo sitename();?></h1>
in den Header (Header mit Navi) geklopft, damit Goo & Co ganz oben etwas finden.
Dazu habe ich im Stylesheet noch h1 Schriftgröße, Margin, Zeilenhöhe auf 0 gesetzt und den Texteinzug negativ (-9999).
h1 sollte ja sowieso nur einmal in einem Onepager vorkommen - dazu machen wir ja das Ganze :D

Update: Ich durfte nicht alle h1 unsichtbar machen, weil: Im Admin-Modus sind sie ja noch da und sollen bearbeitbar bleiben!

Jetzt habe ich noch einen komischen Effekt festgestellt, der aber eigentlich nicht zum Thema gehört.
Auf großen Bildschirmen erscheint der Big-Slider bildschirmfüllend. Gewollt.
Ziehe ich zum Testen das Fenster kleiner, alles gut.
Lade ich im kleinen Fenster die Seite neu, erscheint unten ein heller Rand - heißt, die Höhe wird nicht richtig berechnet.
Ist auch zu sehen, wenn man in Googles Resizer (http://design.google.com/resizer/) testet.
Jemand eine Idee?

Update: Auf meinem Androiden-Tab ist alles OK. Witzig.
Update des Updates: gelöst: es war ein overflow-x-Problem.

cmb
Posts: 12785
Joined: Tue Jun 21, 2011 11:04 am
Location: Mü-Sa, RLP, DE
Contact:

Re: Onepage h1-Überschriften

Post by cmb » Sat Apr 23, 2016 5:10 pm

frase wrote:gute Nachricht: alle drei Vorschläge funktionieren.
Wenn ich nur sowas könnte!
Dafür kannst Du gestalten – das kann zumindest ich nicht. :)
frase wrote:Dazu habe ich im Stylesheet noch h1 Schriftgröße, Margin, Zeilenhöhe auf 0 gesetzt und den Texteinzug negativ (-9999).
h1 sollte ja sowieso nur einmal in einem Onepager vorkommen - dazu machen wir ja das Ganze :D
Hm, ob Google das gut findet? Ist ein bisschen wie unsichtbare Links. Im Zweifel ist es wohl besser, wenn solche <h1> erst gar nicht im HTML vorkommen. Wo sind denn noch welche?
Christoph M. Becker –Plugins for CMSimple_XH, but not for CMSimple 4+

frase
Posts: 2159
Joined: Thu Apr 21, 2016 6:32 am
Location: Saxony
Contact:

Re: Onepage h1-Überschriften

Post by frase » Sun Apr 24, 2016 7:45 am

Moin Christoph,
Hm, ob Google das gut findet? Ist ein bisschen wie unsichtbare Links. Im Zweifel ist es wohl besser, wenn solche <h1> erst gar nicht im HTML vorkommen. Wo sind denn noch welche?
ich hoffe nur, dass ich jetzt mit meiner Antwort nicht ganz daneben liege.
Meine Überlegung ist folgende:
Google sucht auf einer Seite u.A. nach h1-Überschriften, nach h2 und h3. Dann wertet es die Inhalte in dieser Reihenfolge (laienhaft ausgedrückt).
Gibt es mehrere h1 oder gar kein h1, ist das für Goggle - sagen wir mal - verwirrend (Hierarchie gestört).
In meinem ursprünglichen Entwurf hatte ich ausschließlich h1-Seiten (also mehrere), weil ich keinerlei Untermenü auf meinem Onepager haben wollte. „One“page!
Mit eurer Hilfe habe ich es geschafft, aus meinen h1-Seiten h2-Seiten zu machen - nur nach dem Rendern (sagt man das so?), die Content-Struktur bleibt erhalten (alle h1).
Damit habe ich aber gar keine h1 mehr. Hier kommt Olafs richtiger Vorschlag, im Template vor den Content-Aufruf eine beliebige h1 zu setzen.
In meinem speziellen Fall ging das nicht, weil ich als ersten Inhalt den Fullscreen-Slider habe.
Also habe ich die entscheidende h1 ganz nach oben gesetzt (wo man & Google sie erwartet) und sie „unsichtbar“ gemacht.
Hier könnte mein Denkfehler liegen: Für die Gestaltung und auch für Besucher der Site ist die Unsichtbarkeit unerheblich - für Google ist sie aber vorhanden und lesbar. Die Formatierung spielt für Google doch keine Rolle - oder?
Dass hier vielleicht Validatoren meckern (wie bei weißer Schrift auf weißem Grund), könnte ich verschmerzen.
Wo sind denn noch welche?
Genau das dachte ich zunächst auch und hatte die h1-Formatierung für alle gemacht.
Da aber in der Seitenstruktur die h1 immer noch so sind wie angelegt, habe ich mich sehr gewundert, als dann die Überschriften im Editor nicht mehr zu sehen waren. Also die Unsichtbarkeit darf nur für die h1 im Header gelten.
Ich hoffe, ich konnte einigermaßen rüberbringen, was ich meinte.
Fazit:
Es ist mal wieder ein einziger großer Kompromiss zwischen Gestaltung und der allgemeinen Realität. Vielleicht lassen wir uns auch zu sehr von Google & Co durchs Leben treiben - aber ganz ignorieren können wir sie wohl auch nicht?
Nochmals vielen Dank für eure Teilhabe und Hilfe.

lck
Posts: 1322
Joined: Wed Mar 23, 2011 11:43 am
Contact:

Re: Onepage h1-Überschriften

Post by lck » Sun Apr 24, 2016 1:43 pm

frase wrote: Jetzt habe ich noch einen komischen Effekt festgestellt, der aber eigentlich nicht zum Thema gehört.
Auf großen Bildschirmen erscheint der Big-Slider bildschirmfüllend. Gewollt.
Ziehe ich zum Testen das Fenster kleiner, alles gut.
Lade ich im kleinen Fenster die Seite neu, erscheint unten ein heller Rand - heißt, die Höhe wird nicht richtig berechnet.
Ist auch zu sehen, wenn man in Googles Resizer (http://design.google.com/resizer/) testet.
Jemand eine Idee?

Update: Auf meinem Androiden-Tab ist alles OK. Witzig.
Update des Updates: gelöst: es war ein overflow-x-Problem.
Ursache hierfür sind 2 Elemente die bei kleineren Viewports über den Content-Bereich ragen.
[1] <h2>Voraussetzungen</h2> bei kleiner 347px
[2] <a href="[Pfad]/index.php#Probleme">Probleme</a> bei ca. kleiner 282px

Mit overflow-x: hidden; im body ist der horizontale Scrollbalken und dadurch auch der Rand unter dem Big-Slider zwar mehr sichtbar, aber die Ursache ist nicht behoben.
Zusätzlich könnte man das lösen mit:

Code: Select all

@media screen and (max-width: 350px)
#cont {
    word-wrap: break-word;
}

/* Optional, um die Überschrift in einer Zeile anzuzeigen */
h1, h2 {
    font-size: 2em;
}
}
cmb wrote:
frase wrote: Dazu habe ich im Stylesheet noch h1 Schriftgröße, Margin, Zeilenhöhe auf 0 gesetzt und den Texteinzug negativ (-9999).
h1 sollte ja sowieso nur einmal in einem Onepager vorkommen - dazu machen wir ja das Ganze
Hm, ob Google das gut findet? Ist ein bisschen wie unsichtbare Links.
Das sich dies negativ auswirken könnte, habe ich auch noch irgendwie dunkel im Kopf. Nach etwas Suche habe ich das hier gefunden.

Ansonsten, schönes Template, Frank.
cmb wrote:Ja, sollte es. Ich habe es vermerkt.
Biite Link zu Github Issues korrigieren
„Bevor du den Pfeil der Wahrheit abschießt, tauche die Spitze in Honig!“   👉 Ludwig's XH-Templates for MultiPage & OnePage

Post Reply