Let′s flex: Das wichtigste zuerst

Der Mensch liest von oben nach unten, Google auch. Aber Google liest gründlicher, wir überfliegen die Texte, vor allem auf dem Bildschirm. Je weiter unten eine Information steht, umso weniger wichtig ist sie. Folglich müssen die wichtigsten Infos ganz nach oben.

Jetzt ist es aber so, dass wir der Suchmaschine gerne unsere Keywords unterjubeln wollen und das kommt beim "Textüberflieger" nicht so gut an. Aber wie kann man beide Fliegen mit einer Klappe erschlagen? (Bitte nicht wörtlich nehmen!)

Mit Flexbox geht's!

Flexbox erlaubt uns, die Reihenfolge in der Ansicht zu manipulieren. Damit ist die Ansicht im Quelltext (den Google liest) anders als auf dem Bildschirm, wo der Mensch liest.

Damit können wir einen Artikeln, den wir optimal für Google vorbereiten, an den Anfang des Inhalts stellen und der Mensch sieht ihn erst am Seitenende.

Wie funktioniert's?

Eine Website besteht aus mehreren Artikeln, so wie eine Zeitungsseite. Die Artikel werden in einem "Container" zusammengefasst, der bekommt eine ID oder eine Klasse. Und für diese ID/Klasse definieren wir in den Stylesheets die Eigenschaft display:flex.

Damit werden alle Artikel im Container "geflext", ohne dass wir ihnen das mitteilen müssten. Außerdem bekommen alle automatisch die Eigenschaft order:0. Das sorgt dafür, dass alle Artikel in ihrer natürlichen Reihenfolge sortiert werden, also wie im Quelltext.

Nun fügen wir vor dem ersten Artikel unseren "Lockartikel" mit Google-Futter ein. Der bekommt eine tolle Überschrift mit unseren Keywords, die dann auch noch im Text verwendet werden. Fette Keywords schaden nie und Google mag es auch, wenn wir sie verlinken. Also machen wir ein richtiges Gustostückerl für Google.

Dieser neue erste Artikel bekommt nun die Eigenschaft order:1, damit wandert er in der Ansicht ans Ende der Seite, weil ja vorher alle Artikel mit order:0 angezeigt werden. Das machen wir aber nicht direkt im Quellcode, sondern in den Stylesheets. Dort erzeugen wir eine Klasse .seoartikel (Vorschlag) und die bekommt die Eigenschaft order:1.

Fazit:

Mit wenig Aufwand kann man damit viel erreichen.
Nicht vergessen: Unbedingt die Metainformationen im Seitenkopf entsprechend anpassen.

Manchmal muss man dem Erfolg eine Chance geben.

Übrigens:

Flexbox kann weitaus mehr. Wie die Bezeichnung schon andeutet, ist Flexbox eine ziemlich flexible Methode. Und das schöne: Flexbox ist in allen Browsern umgesetzt.

Let's flex again! Oder wie hieß der Song doch gleich ...