Seitennummerierung-Generator in HTML und CSS

Seitennummerierung-Generator in HTML und CSS: wofür es gut ist

Erstelle die Seitennummerierung für Blog, Shop oder Ergebnisliste: Gib die Gesamtzahl der Seiten, die aktuelle, wie viele Nachbarn gezeigt werden und das Format der Adresse an, wie /blog/seite/{n} oder ?page={n}. Wähle zwischen den Stilen eckig, rund und minimalistisch und der Akzentfarbe.

Der Code nutzt nav mit aria-label, aria-current="page" bei der aktuellen Seite und echte a-href-Links, denen Google folgen kann, um die Einträge der folgenden Seiten zu finden. Jede Zahl hat eine Touch-Fläche von 44 px, und am Handy werden die Texte für zurück und weiter zu bloßen Pfeilen.

So geht’s

1. Gib die Gesamtzahl der Seiten und die aktuelle an.
2. Wähle Adresse, Stil und Farbe.
3. Kopiere den Code in die Website.

Wann nutzen

• Blog mit vielen Beiträgen.
• Produktliste des Shops.
• Suchergebnisse.

Häufige Fragen

Warum Links und keine Buttons?

Jede Seite der Liste braucht eine eigene Adresse, wie /blog/seite/2 oder ?page=2, in einem gewöhnlichen a-href-Link. So kann Google den Links folgen und die Einträge der folgenden Seiten finden, und die Person kann eine Seite in einem anderen Tab öffnen oder die Adresse teilen.

Wie funktionieren die Auslassungspunkte?

Bei vielen Seiten zeigt die Seitennummerierung die erste, die letzte und einige Nachbarn der aktuellen und setzt … an die Stelle der ausgelassenen. Du wählst, wie viele Nachbarn auf jeder Seite erscheinen.

Muss ich rel="prev" und rel="next" setzen?

Nicht für Google, das diese Auszeichnungen 2019 nicht mehr nutzt. Sie stören nicht, und andere Systeme können sie noch lesen, daher setzt das Tool rel an die Links für zurück und weiter.

Ist das wirklich kostenlos?

Ja, 100% kostenlos. Ohne Anmeldung, ohne Abo und ohne Nutzungslimit. Alle Tools von Tools123 sind kostenlos.

Ähnliche Tools