Page 1 of 4

Onepage h1-Überschriften

Posted: Thu Apr 21, 2016 7:14 am
by frase
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?

Re: Onepage h1-Überschriften

Posted: Thu Apr 21, 2016 12:43 pm
by olape
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>

Re: Onepage h1-Überschriften

Posted: Thu Apr 21, 2016 2:58 pm
by frase
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/

Re: Onepage h1-Überschriften

Posted: Thu Apr 21, 2016 3:33 pm
by olape
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

Re: Onepage h1-Überschriften

Posted: Thu Apr 21, 2016 5:04 pm
by cmb
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.

Re: Onepage h1-Überschriften

Posted: Thu Apr 21, 2016 6:01 pm
by olape
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.

Re: Onepage h1-Überschriften

Posted: Fri Apr 22, 2016 7:19 am
by frase
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.

Re: Onepage h1-Überschriften

Posted: Sat Apr 23, 2016 5:10 pm
by cmb
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?

Re: Onepage h1-Überschriften

Posted: Sun Apr 24, 2016 7:45 am
by frase
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.

Re: Onepage h1-Überschriften

Posted: Sun Apr 24, 2016 1:43 pm
by lck
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