SEO Playbook · Element

Produkt-Slider: Durchstöbern, Barrierefreiheit und Extraktion

Erstellen Sie einen Produkt-Slider, der fokussiertes Stöbern unterstützt, ohne wesentliche Auswahlmöglichkeiten vor Käufern, Tastaturen, Suchmaschinen oder KI-Extraktionssystemen zu verbergen.

15 min read

Ein Produkt-Slider ist eine horizontal scrollbare Reihe von Produktkarten, die dazu dient, eine kleine, verwandte Menge zugänglich zu machen, ohne diese Menge zum Hauptkatalog der Seite zu machen. Er soll einem Käufer helfen, einen definierten Kaufpfad fortzusetzen – etwa kompatible Zubehörteile oder vergleichbare Alternativen zu finden – während die Identität, Reihenfolge und Fakten jedes Artikels für Menschen und Maschinen erhalten bleiben.

Kompatible Schreibtisch-Zubehörteile

Vier Produkte. Scrollen Sie die Zeile oder verwenden Sie die beschrifteten Steuerelemente in der Produktionskomponente.

Warum dieses Element wichtig ist

Ein Slider lenkt die Aufmerksamkeit, indem er einige wenige Auswahlmöglichkeiten genau in dem Moment zeigt, in dem sie relevant werden. Auf einer Produktseite könnte ein Käufer, der den Hauptartikel verstanden hat, kompatible Zubehörteile begrüßen. Ein vollständiges Raster würde an dieser Stelle mit dem primären Kauf konkurrieren; eine kompakte Zeile bewahrt die ursprüngliche Entscheidung und ermöglicht dennoch Erkundung.

Dieser Vorteil hat einen psychologischen Preis: Alles jenseits des sichtbaren Randes wird leichter übersehen. Die erste Karte erhält mehr Aufmerksamkeit als die siebte, und eine abgeschnittene letzte Karte kann wie ein Fehler aussehen, wenn das Design nicht die Fortsetzung signalisiert. Ein Slider muss daher eine sekundäre, absichtlich geordnete Menge enthalten. Er darf keine Wahlmöglichkeit verbergen, die der Leser benötigt, um Preis, Sicherheit, Kompatibilität oder das Sortiment selbst zu verstehen.

Maschinelle Extrahierbarkeit ist die Fähigkeit von Suchmaschinen, Assistenten, Feeds und Content-Tools, jedes Produkt zu isolieren und seine Felder zusammenzuhalten. Eine Person kann wischen, um Karte sechs zu enthüllen; ein Crawler führt diese Interaktion möglicherweise nie aus. Wenn spätere Folien erst nach JavaScript eintreffen, display:none verwenden oder nur als Hintergrundbilder existieren, sieht das System eine unvollständige Sammlung. Wenn jede Karte in semantischer Quellreihenfolge gerendert wird, kann eine Maschine dieselben Namen, URLs, Positionen, Preise, Währungen und Verfügbarkeiten wiederherstellen, die ein Käufer erreichen kann.

Befolgen Sie die Element-Schreibregeln zur Priorität: Klassifizieren Sie den Block nach seinem Zweck, bevor Sie sein Erscheinungsbild wählen. Wenn seine Aufgabe darin besteht, einen sekundären Produktpfad zu eröffnen, gilt dieses Element. Wenn seine Aufgabe darin besteht, vollständige Ergebnisse zu zeigen oder einen direkten Vergleich zu ermöglichen, hat das entsprechende Raster oder die typisierte Tabelle Vorrang.

Wann es verwendet wird

Verwenden Sie einen Produkt-Slider, wenn alle folgenden Bedingungen erfüllt sind:

  • Die Menge ist sekundär zur Hauptaufgabe der Seite.
  • Die Produkte teilen eine explizite Beziehung, wie kompatible Zubehörteile, Alternativen derselben Kategorie, kürzlich angesehene Artikel oder eine redaktionelle Shortlist.
  • Vier bis acht prägnante Karten bieten eine nützliche Breite, ohne ein verstecktes Katalogverzeichnis zu schaffen.
  • Die Reihenfolge kann durch Relevanz, Kompatibilität, redaktionellen Rang, Aktualität oder eine andere sichtbare Regel erklärt werden.
  • Jedes Produkt bleibt als kompakte Karte verständlich und hat ein kanonisches Ziel für vollständige Details.

Ein Slider schlägt ein Raster, wenn der vertikale Platz begrenzt ist und Leser nicht jede Auswahl gleichzeitig sehen müssen. Er kann den Kontext auf einer Produktdetailseite bewahren, eine kurze Empfehlungsmenge auf Mobilgeräten zusammenhalten und einen nächsten Pfad aufzeigen, ohne acht vollständige Beschreibungen in den Artikelablauf zu stellen.

Verwenden Sie ein Raster, wenn die Menge das Ziel ist. Suchergebnisse, eine Produktkategorie, eine gefilterte Sammlung oder eine Sammlung, die vollständig gescannt werden muss, benötigen sichtbare Anzahlen, Sortierung, Filter, Seitenumbrüche und stabile URLs. Verwenden Sie eine Vergleichstabelle , wenn Leser dieselben Spezifikationen über verschiedene Optionen hinweg beurteilen müssen. Verwenden Sie eine Bildergalerie , wenn die Elemente Ansichten eines Themas und keine separaten käuflichen Produkte sind.

Häufige Beinahe-Fehler sind: eine aus zwei Artikeln bestehende Zeile, die in Karussell-Steuerelemente gezwungen wird; eine 30-Produkte-Kategorie, die in eine Leiste gequetscht wird; ein Hero-Banner-Karussell, das Werbung statt Produkte enthält; und ein Slider, der verwendet wird, um schwache Empfehlungen unterhalb des Seitenbereichs zu verbergen. „Kürzlich angesehen“ ist ebenfalls ein bedingter Beinahe-Fehler: Er ist nur nützlich, wenn der Besucher tatsächlich Verlauf hat, die Überschrift erklärt, warum diese Artikel erscheinen, und ein leerer Zustand keine Aktivität vortäuscht.

Wo es platziert wird

Die Platzierung sollte eine Frage beantworten, die der Leser gerade entwickelt hat. Platzieren Sie kompatible Zubehörteile nach Kompatibilitäts- und Inklusivartikel-Informationen, Alternativen nach den Einschränkungen oder der Entscheidungszusammenfassung des primären Produkts und verwandte Produkte nach der Hauptauflistung der Kategorie, nicht davor. In redaktionellen Inhalten platzieren Sie die Leiste nach Kriterien und Nachweisen, nicht bevor Leser wissen, warum die Produkte qualifiziert sind.

Halten Sie die Überschrift, die Beziehungsangabe, die Artikelanzahl, die Steuerelemente und die Karten in einem Bereich. Setzen Sie einen „Alle anzeigen“-Link neben die Überschrift oder nach der Zeile, wenn eine vollständige Sammlung existiert. Der Link muss zu einer crawlbaren kanonischen Seite führen, nicht zu einer unbegrenzten clientseitigen Leiste.

Platzieren Sie einen Slider nicht neben einem anderen Slider, einem sich automatisch drehenden Banner, einer Preistabelle oder den primären Kauf-Steuerelementen der Seite. Benachbarte horizontale Gesten erzeugen Mehrdeutigkeit, während konkurrierende Preise unklar machen können, welches Angebot der Haupt-CTA kauft. Unterbrechen Sie keine Verfahrensschritte, Warnungen, Kassenbedingungen oder erforderliche rechtliche Offenlegungen mit Empfehlungen. Platzieren Sie niemals wesentliche Varianten innerhalb eines Sliders, wenn die Auswahl einer Variante den Preis, die Verfügbarkeit oder die Konfiguration des primären Produkts ändert; Varianten gehören zu den Steuerelementen des zugehörigen Produkts.

Auf kleinen Bildschirmen erlauben Sie eine vollständige Karte plus einen bewussten Blick auf die nächste Karte, oder eine vollständige Karte mit einer expliziten Positionsangabe. Der Bereich kann horizontal scrollen, aber das Dokument selbst nicht. Bewahren Sie einen sichtbaren Weg am Slider vorbei, sodass ein Tastatur- oder Touch-Nutzer niemals in wiederholter horizontaler Navigation gefangen ist.

Anatomie

  1. Abschnittsüberschrift: benennt die Menge, z. B. „Kompatible Zubehörteile“, anstatt des generischen „Das könnte Ihnen auch gefallen“.
  2. Beziehungsangabe: erklärt, warum die Produkte qualifiziert sind und ob die Reihenfolge redaktionell, verhaltensbasiert oder kommerziell ist.
  3. Artikelanzahl: gibt die endliche Größe vor der Interaktion an, z. B. „6 Produkte“.
  4. Viewport: beschneidet nur die Darstellung; er entfernt keine Karten außerhalb des Bildschirms aus dem Dokument.
  5. Produktkarte: bewahrt den Namen, das Ziel, das entscheidende Qualifikationsmerkmal und die aktuellen kommerziellen Fakten eines Produkts als eine Einheit.
  6. Fortsetzungsandeutung: verwendet eine teilweise nächste Karte, Positionstext oder beides; ein Schatten allein ist zu leicht zu übersehen.
  7. Vor- und Zurück-Steuerelemente: verwenden Buttons, die nach ihrer Wirkung benannt sind, und zeigen einen deaktivierten Zustand an den Enden an.
  8. Positionsanzeige: gibt einen Bereich an, z. B. „Produkte 1–3 von 6“, nicht eine Reihe unbeschrifteter Punkte.
  9. Alle-anzeigen-Route: öffnet die kanonische vollständige Sammlung, falls vorhanden.
  10. Fokus-Behandlung: bleibt auf jedem Steuerelement und jedem Karten-Link sichtbar, ohne vom Viewport abgeschnitten zu werden.

Jede Karte folgt dem Vertrag der Produktkarte . Der Slider trägt die Sammlungsbedeutung und Navigation, ohne Produktfakten lokal neu zu definieren.

Designbeispiele

Redaktionelle Shortlist: Verwenden Sie für vier bis acht Produkte, die nach festgelegten Kriterien ausgewählt wurden. Die Reihenfolge darf nur dann den Rang darstellen, wenn die Seite die Nachweise für diesen Rang enthält; andernfalls beschriften Sie sie als „Ausgewählte Optionen“ und vermeiden Sie ordinale Behauptungen.

Verwandte Produkte: Verwenden Sie für Artikel derselben Kategorie oder Ersatzartikel, nachdem das Hauptprodukt erklärt wurde. Geben Sie die gemeinsame Eigenschaft an, z. B. Formfaktor oder Preisklasse, anstatt Personalisierung zu implizieren.

Kompatible Zubehörteile: Verwenden Sie, wenn jeder Artikel eine verifizierte Beziehung zum zugehörigen Produkt hat. Wiederholen Sie das kompatible Modell oder die Modellreihe im Kartentext; Nähe ist keine Kompatibilitätsgarantie.

Verhaltensverlauf: Verwenden Sie für kürzlich angesehene oder gespeicherte Artikel nur, wenn der Besucher diesen Zustand erzeugt hat. Beschriften Sie die Grundlage, bewahren Sie die Aktualitätsreihenfolge, bieten Sie wo angemessen Entfernungsmöglichkeiten an und geben Sie personalisierten Verlauf nicht in freigegebene Caches oder strukturierte Daten aus.

Parameter

NameTypErforderlichMin./Max.StandardQuelle
titleEinfacher StringJa3–10 WörterKeineErste Überschrift im Text
descriptionEinfacher StringJa8–30 WörterKeineText nach erster Überschrift
variantEnum: editorial, related, accessories, historyJaEin WertKeineAttribut
orderedByEnum: rank, relevance, compatibility, recency, manualJaEin WertKeineAttribut
visibleDesktopIntegerNein2–44Attribut
visibleMobileDezimalNein1–1,251.1Attribut
viewAllLabelEinfacher StringBedingt2–5 WörterNicht vorhandenAttribut
viewAllUrlStammrelativer oder HTTPS-URLBedingtEine URL; erforderlich mit LabelNicht vorhandenAttribut
itemsGeordnete Produktkarten-SammlungJa4–12KeineText
item.idStabile ProduktkennungJa1 WertKeineArtikelattribut
item.nameEinfacher StringJa1–8 WörterKeineArtikelüberschrift
item.urlStammrelativer oder HTTPS-URLJa1 URLKeineArtikelattribut
item.positionPositive GanzzahlJa1 bis ArtikelanzahlQuellreihenfolgeAbgeleitet aus Textreihenfolge
item.imageVorhandene Asset-URLBedingt1 BildNicht vorhandenArtikelattribut oder Produktquelle
item.altEinfacher StringBedingt0–180 ZeichenKeineArtikelattribut oder Produktquelle
item.priceDezimal plus Währung, oder StatusBedingt1 aktueller WertNicht vorhandenProduktquelle
item.availabilityKontrollierter StatusBedingt1 aktueller WertNicht vorhandenProduktquelle
item.qualifierEinfacher StringJa4–18 WörterKeineArtikeltext

Ein Bild ist bedingt, weil eine textorientierte Produktkarte auch ohne eines vollständig sein kann. Wenn verwendet, muss die Datei existieren, die Abmessungen müssen Platz reservieren und der alternative Text muss seinem Zweck entsprechen. Wenn eine Karte Preis oder Verfügbarkeit anzeigt, muss jede zugehörige Karte ein äquivalentes aktuelles Feld oder einen expliziten Status anzeigen.

Syntax und Codebeispiele

Portable Markdown-Direktive

:::product-slider{variant=accessories orderedBy=compatibility visibleDesktop=3 visibleMobile=1.1 viewAllLabel="View all accessories" viewAllUrl="/accessories/"}
## Compatible desk accessories

Verified for the Arc 14 laptop; four products.

::item{id=arc-stand name="Arc laptop stand" url="/products/arc-stand/" price="USD 69" availability="in-stock"}
Raises 13–16 inch laptops and leaves the charging ports clear.
::

::item{id=dock-7 name="Dock 7 hub" url="/products/dock-7/" price="USD 89" availability="in-stock"}
Adds seven ports and supports 100 W pass-through charging.
::
:::

Hugo-Shortcode-Zuordnung

{{< product-slider variant="accessories" orderedBy="compatibility" visibleDesktop="3" visibleMobile="1.1" viewAllLabel="View all accessories" viewAllUrl="/accessories/" >}}
## Compatible desk accessories

Verified for the Arc 14 laptop; four products.

{{< product-slide id="arc-stand" name="Arc laptop stand" url="/products/arc-stand/" price="USD 69" availability="in-stock" >}}
Raises 13–16 inch laptops and leaves the charging ports clear.
{{< /product-slide >}}

{{< product-slide id="dock-7" name="Dock 7 hub" url="/products/dock-7/" price="USD 89" availability="in-stock" >}}
Adds seven ports and supports 100 W pass-through charging.
{{< /product-slide >}}
{{< /product-slider >}}

Dies ist die beabsichtigte Adapter-Spezifikation, kein registrierter Shortcode-Aufruf. Es werden nur benannte Parameter verwendet. Bis der Adapter existiert, implementieren Sie die Sammlung als semantisches HTML oder als nicht-interaktive Zeile, ohne einen nicht unterstützten Shortcode zu erfinden.

WordPress-Block

<!-- wp:amicited/product-slider {"variant":"accessories","orderedBy":"compatibility","visibleDesktop":3,"visibleMobile":1.1,"viewAllLabel":"View all accessories","viewAllUrl":"/accessories/"} -->
  <!-- wp:heading {"level":2} --><h2>Compatible desk accessories</h2><!-- /wp:heading -->
  <!-- wp:paragraph --><p>Verified for the Arc 14 laptop; four products.</p><!-- /wp:paragraph -->
  <!-- wp:amicited/product-slide {"id":"arc-stand","name":"Arc laptop stand","url":"/products/arc-stand/","price":"USD 69","availability":"in-stock","qualifier":"Raises 13–16 inch laptops and leaves the charging ports clear."} /-->
  <!-- wp:amicited/product-slide {"id":"dock-7","name":"Dock 7 hub","url":"/products/dock-7/","price":"USD 89","availability":"in-stock","qualifier":"Adds seven ports and supports 100 W pass-through charging."} /-->
<!-- /wp:amicited/product-slider -->

Beispiele

Gut: Kompatibilität ist explizit

Zubehörteile verifiziert für Arc 14 – 4 Produkte
Arc laptop stand – USD 69 – Auf Lager. Passend für 13–16 Zoll Laptops; alle Arc 14-Anschlüsse bleiben erreichbar.
Dock 7 hub – USD 89 – Auf Lager. Unterstützt die Arc 14 USB-C-Ladespezifikation und 100 W Passthrough.
Quiet key set – USD 74 – Wenig Lagerbestand. Verbindet über Bluetooth; kein Empfänger belegt einen Arc 14-Anschluss.
Task light Mini – USD 45 – Auf Lager. Verwendet ein separates USB-C-Netzteil; es bezieht keinen Strom vom Laptop.

Dies gelingt, weil die Beziehung benannt und verifiziert ist, jede Karte eine eindeutige Kompatibilitätsangabe macht, die kommerziellen Felder parallel sind und die endliche Anzahl sichtbar ist. Alle vier Artikel können in der Quellreihenfolge existieren, auch wenn nur drei in den Viewport passen.

Schlecht: Versteckte Empfehlungen ohne Grundlage

Das könnte Ihnen auch gefallen
BESTSELLER – $69 – Jetzt kaufen
TRENDING – $89 – Jetzt kaufen
[Drei weitere Karten werden nach dem zweiten Wischen geladen.]

Dies scheitert, weil die Überschrift die Beziehung nicht erklärt, „Bestseller“ und „Trending“ keine definierte Quelle oder Zeitspanne haben, die Währung impliziert wird und wiederholte „Jetzt kaufen“-Labels die Produktidentität aus dem Kontext verlieren. Schwerwiegender: Drei Produkte existieren erst nach Interaktion, sodass ein Tastaturnutzer, Crawler oder fehlgeschlagenes Skript eine andere Menge erhält.

Schema-Markup und Barrierefreiheit

Ein redaktioneller Produkt-Slider kann ItemList füttern, wenn seine Zugehörigkeit und Reihenfolge aussagekräftig sind. Verwenden Sie ein ListItem pro sichtbarer Produktentität mit Position, kanonischer URL und der Produktreferenz. Positionen müssen mit DOM- und visueller Reihenfolge übereinstimmen. Markieren Sie personalisierten, kürzlich angesehenen Verlauf nicht als öffentliche ItemList, da die Menge kein stabiler Seiteninhalt ist.

Jede Karte darf Product- und Offer-Daten nur dann füttern, wenn die sichtbare Seite dieselben Fakten unterstützt. Ein Name und ein Ziel rechtfertigen keine erfundenen Preis-, Bewertungs-, Marken-, Verfügbarkeits- oder Bewertungsdaten. Generieren Sie sichtbare Felder und strukturierte Daten aus derselben genehmigten Produktquelle und lassen Sie volatile Eigenschaften weg, die nicht synchronisiert bleiben können. Es gibt keinen speziellen Karussell-Schema-Typ.

Verwenden Sie ein benanntes <section> oder role="region" nur, wenn die Überschrift nicht bereits ausreichende Landmarken-Semantik bietet. Stellen Sie die Sammlung als <ul>, <ol> oder äquivalente Liste dar; jede Karte ist ein Listenelement. Behalten Sie Karten außerhalb des Bildschirms im DOM und im Barrierefreiheits-Baum. Horizontales Beschneiden ist Darstellung, während display:none, aria-hidden="true", inert oder clientseitige Virtualisierung Inhalte unzugänglich macht.

Verwenden Sie native Buttons für Vor und Zurück. Benennen Sie sie „Vorherige Produkte“ und „Nächste Produkte“, deaktivieren Sie sie korrekt an den Enden und behalten Sie den Fokus nach der Bewegung. Geben Sie „Produkte 4–6 von 8“ in einem höflichen Statusbereich bekannt, ohne den Fokus in die neu angezeigte Karte zu verschieben. Pfeiltasten können eine Verbesserung sein, aber Tab muss Steuerelemente und Links normal erreichen. Wischen kann unterstützt werden, jedoch nie als einzige Eingabe.

Führen Sie kein automatisches Vorrücken durch. Respektieren Sie reduzierte Bewegungspräferenzen und verwenden Sie sofortiges oder zurückhaltendes Scrollen. Ein Karten-Link benötigt einen eindeutigen barrierefreien Namen, der den Produktnamen enthält. Verhindern Sie doppelte Fokusziele, wenn sowohl Bild als auch Titel zur selben URL führen. Bei 200 % Zoom können Karten zu einem Ein-Karten-Viewport werden, aber Text, Steuerelemente und Fokusringe müssen vollständig bleiben und die Seite darf nicht horizontal überlaufen.

Schreibregeln

Die Texterstellung sollte die Zugehörigkeit verteidigbar machen, bevor sie die Reihe attraktiv macht.

  • Eine spezifische Überschrift erklärt den Pfad. Verwenden Sie 3–10 Wörter: „Kompatible Arc 14-Zubehörteile“ oder „Alternativen unter USD 100.“ Verlassen Sie sich niemals allein auf „Mehr“, „Trends“ oder „Das könnte Ihnen auch gefallen.“
  • Ein Satz begründet die Auswahl. Verwenden Sie 8–30 Wörter, um gemeinsame Kriterien, Zielgruppe, Kompatibilität oder die Verlaufsquelle anzugeben. Wenn Rang oder Beliebtheit die Reihenfolge bestimmt, nennen Sie die Metrik, den Markt und den Zeitraum.
  • Endliche Mengen bleiben überprüfbar. Verwenden Sie normalerweise 4–8 Produkte und nicht mehr als 12. Zwei oder drei Karten sollten eine statische Zeile bilden; größere Sortimente benötigen ein Raster und eine kanonische Sammlungsroute.
  • Kartennamen bewahren die Identität. Verwenden Sie den offiziellen Produktnamen in 1–8 Wörtern. Ersetzen Sie ihn nicht durch „Bestpreis“, „Unsere Wahl“ oder einen Kampagnenslogan.
  • Qualifikationsmerkmale beantworten eine Entscheidungsfrage. Verwenden Sie 4–18 Wörter für Passform, unterscheidende Fähigkeit, Kompatibilität oder Einschränkung. Vermeiden Sie generisches Lob wie „Premium-Qualität.“
  • Parallele Fakten unterstützen das Scannen. Wenn eine Karte Preis, Währung, Verfügbarkeit, Bewertung oder Lieferung zeigt, zeigen die zugehörigen Karten äquivalente Felder oder explizite nicht verfügbare Zustände aus derselben Quelle und demselben Markt.
  • Die Reihenfolge benötigt eine nachvollziehbare Grundlage. Die Kompatibilitätsreihenfolge kann die stärkste Übereinstimmung zuerst setzen; der Rang erfordert veröffentlichte Kriterien; die Aktualität spiegelt den Verlauf des Besuchers wider. Bezahlte Platzierung muss offengelegt werden und darf nicht als redaktionelle Relevanz getarnt sein.
  • Aktionen bewahren den Kontext. Verwenden Sie „Arc laptop stand ansehen“, nicht fünf Mal „Mehr erfahren.“ Ein Karten-CTA öffnet die kanonische Detailseite dieses Produkts, es sei denn, die Aktion fügt explizit eine bekannte Variante zu einem Warenkorb hinzu.
  • Flüchtige Behauptungen benötigen Eigentümerschaft. Preise, Lagerbestand, Lieferung, Rabatte, Bewertungen und Beliebtheit stammen aus genehmigten Systemen und tragen das erforderliche Aktualitätsverhalten. Redaktionelle Texte dürfen keinen widersprüchlichen Wert fest codieren.

Platzieren Sie niemals lange Bewertungen, Vergleichsmatrizen, Variantenauswahlen, Mengensteuerelemente, Kassenbedingungen, Testimonials, Countdown-Timer, Pop-ups, Videoplayer oder erforderliche Warnungen innerhalb einer Folie. Wählen Sie keine Zusatzartikel vor, fügen Sie Produkte nicht allein durch Navigation zum Warenkorb hinzu und verbergen Sie keine gesponserte Sortierung. Ein Slider zeigt Pfade vor; das Ziel oder die angrenzende primäre Komponente enthält die vollständige Entscheidung.

Beitragstypen, die es verwenden

Das Feld postTypes im Front Matter steuert diese Tabelle. Die Aufnahme bedeutet, dass das Element bedingt ist, wenn eine kompakte sekundäre Produktmenge die angegebene Seite verbessert.

BeitragstypTypische VerwendungPlatzierungHaupteinschränkung
ProduktseiteKompatible Zubehörteile oder echte AlternativenNach Kompatibilität, enthaltenen Artikeln und primären KaufinformationenDarf nicht mit Varianten oder dem Haupt-CTA konkurrieren
KategorieseiteKuratierte Untersammlung oder kürzlich angesehene ArtikelNach dem primären ProduktrasterErsetzt niemals die vollständige Auflistung, Filter oder Seitenumbrüche
Bestes X für Y-SeiteKompakte Zusammenfassung einer vollständig belegten ShortlistNach Kriterien und UrteilenQuellreihenfolge und sichtbares Ranking müssen mit dem Artikel übereinstimmen
KaufratgeberProdukte, die einem aufgelösten Entscheidungszweig entsprechenNach den relevanten Kriterien oder dem EntscheidungsergebnisQualifikationsmerkmale müssen angeben, warum jeder Artikel passt
Listen-RatgeberSekundäre Produktpfade im Zusammenhang mit der ListeNach den substanziellen Einträgen, nicht an ihrer StelleKarten dürfen die jedem Eintrag geschuldeten Nachweise nicht ersetzen
BewertungsseiteAlternativen oder kompatible ZubehörteileNach Urteil, Einschränkungen und OffenlegungKommerzielle Sortierung darf das Bewertungsergebnis nicht verzerren
Alternativen-zu-X-SeiteZusammenfassung qualifizierter AlternativenNach Wechselkriterien und fairer AnalyseKeine versteckten Produkte oder nicht belegte Überlegenheitslabels

QA-Checkliste

  • Die Menge ist sekundär zur Hauptaufgabe der Seite und hat eine explizite Produktbeziehung.
  • Ein Raster oder eine Vergleichstabelle würde die tatsächliche Aufgabe des Lesers nicht besser erfüllen.
  • Der Slider enthält normalerweise 4–8 Produkte und überschreitet niemals 12.
  • Die Überschrift, die Auswahlgrundlage, die Artikelanzahl, die Steuerelemente, der Positionsstatus und die Alle-anzeigen-Route sind sichtbar, wo zutreffend.
  • Jede Karte hat eine stabile Kennung, einen offiziellen Namen, ein kanonisches Ziel und ein entscheidungsrelevantes Qualifikationsmerkmal.
  • Preis-, Währungs-, Verfügbarkeits-, Bewertungs-, Liefer- und Aktionsfelder sind parallel und werden bei Anzeige bezogen.
  • Kompatibilitäts-, Ranking-, Beliebtheits-, Personalisierungs- und Sponsoring-Angaben legen ihre Grundlage offen.
  • DOM-Reihenfolge, visuelle Reihenfolge, angekündigte Position, Tastaturreihenfolge und alle ItemList-Positionen stimmen überein.
  • Jedes Produkt ist serverseitig gerendert und ohne JavaScript nutzbar; keine spätere Folie hängt von Interaktion oder einer Client-Anfrage ab.
  • Karten außerhalb des Bildschirms bleiben im Barrierefreiheits-Baum und sind nicht versteckt, inert oder nur durch Hintergrundbilder repräsentiert.
  • Vor- und Zurück-Buttons haben eindeutige Namen, korrekte deaktivierte Zustände, sichtbaren Fokus und stabilen Fokus nach Bewegung.
  • Touch-Wischen und Pfeiltasten sind Verbesserungen; Standard-Buttons und Tab-Navigation bieten vollständigen Zugriff.
  • Es gibt keine automatische Bewegung, keinen Fokusdiebstahl, keine Tastaturfalle und keinen horizontalen Überlauf auf Seitenebene.
  • Positionsänderungen werden als Text bekannt gegeben, und Farbe, Beschneidung, Schatten oder Punkte tragen niemals die Fortsetzung allein.
  • Jeder Bildpfad ist vor Veröffentlichung auflösbar, Abmessungen reservieren Platz und alternativer Text spiegelt den Zweck der Karte wider.
  • Bei 200 % Zoom und auf einem schmalen Bildschirm bleiben eine Karte, ihr Text, ihre Steuerelemente und ihr Fokusring vollständig.
  • Strukturierte Daten wiederholen sichtbare, aktuelle Fakten und lassen personalisierten Verlauf oder erfundene kommerzielle Eigenschaften weg.
  • Die vollständige Sammlung hat eine crawlbare Alle-anzeigen-URL, wenn Leser vernünftigerweise über die Leiste hinaus stöbern müssen.
  • Portable Markdown-, Hugo- und WordPress-Darstellungen bewahren dieselben Produkte, dieselbe Reihenfolge, dieselben Felder und denselben Fallback.

FAQ

Die Academy-Vorlage rendert die fünf überprüften Fragen, die im [[faq]]-Front Matter gespeichert sind.

← All SEO Playbook guides

Bereit, es in die Praxis umzusetzen?

Kostenlose Prüfung · 7 Tage testen · keine Kreditkarte