Canonical-Detaillinks in den Web Components
Diese Dokumentation richtet sich an Agenturen und Entwickler, die destination.one Web-Components
in eine externe Website integrieren. Der Canonical-Modus ist für Integrationen vorgesehen, bei
denen die Standard-URL-Struktur der Web-Component-Detailseiten nicht verwendet werden kann und
eine individuelle URL-Struktur der einbindenden Website benötigt wird.
Für eine solche Integration kann unser Plattform-Team den Canonical Service für die betreffende
Experience aktivieren. Dadurch fließen die individuellen Detailseiten-URLs als Canonical Attribute in
destination.data ein und stehen den Web Components in den META-Items zur Verfügung.
Modus aktivieren
Der Modus wird am Script-Tag des Web-Component-Bundles aktiviert:
- <script
- type="module"
- src="https://newpages.destination.one/web-components.js"
- data-language="de"
- data-experience="example"
- data-template="default"
- data-router-mode="history"
- data-base-path="/angebote"
- data-detail-link-mode="canonical"
- ></script>
data-detail-link-mode="canonical" wird bewusst manuell gesetzt und ist keine Option des Widget
Builders. Ohne dieses Attribut verwenden die Web Components weiterhin die Standard-URL-Struktur
ihrer internen Detailrouten.
Verhalten der Detaillinks
Der Modus gilt für Detaillinks aus Ergebnislisten, Karten, Bookmark-Listen, Query-Widgets sowie
Empfehlungen und verwandte Inhalte.
Für jedes META-Item wird der Link in dieser Reihenfolge ermittelt:
1. Die Web Component sucht in media_objects nach einem Eintrag mit rel="canonical" und einer
gültigen absoluten HTTP(S)-URL.
2. Ist eine Canonical URL vorhanden, wird direkt auf diese URL verlinkt.
3. Fehlt die Canonical URL, wird eine Redirect-Fallback-URL mit global_id und dataType erzeugt.
Beispiel eines Canonical Media Objects:
Im Canonical-Modus laden normale META-Ergebnisrequests automatisch das Template
ET2014A.json, damit die Canonical Media Objects in den Items enthalten sind. Explizit
angeforderte Spezialtemplates behalten Vorrang.
Redirect-Fallback
Wenn ein Item keine gültige Canonical URL enthält, erzeugt die Web Component eine URL nach diesem
Schema:
- /pages-detail-redirect?global_id=<GLOBAL_ID>&dataType=<META_TYPE>
Beispiel:
- /pages-detail-redirect?global_id=e_100274925&dataType=Event
Beide Query-Parameter werden URL-kodiert. Die Web Components führen den Redirect nicht selbst
aus. Die integrierende Website kann für pages-detail-redirect eine individuelle Route
beziehungsweise einen Handler bereitstellen. Dieser kann die passende Detailseiten-URL
beispielsweise aus der eigenen Datenbank oder erneut aus META ermitteln und anschließend dorthin
weiterleiten.
Der Redirect ist ausschließlich als Fallback für Items gedacht, für die kein Canonical Attribut
vorhanden ist. Aus SEO-Sicht ist die direkte Verlinkung über das Canonical Attribut vorzuziehen, da
ein zusätzlicher Redirect gegenüber einem direkten Link die schlechtere Variante ist.
Der Handler soll:
1. global_id und dataType aus der URL lesen und validieren.
2. Den zugehörigen Datensatz beispielsweise in der eigenen Datenbank oder in META ermitteln.
3. Daraus anhand der individuellen URL- und Routingregeln der Website die Ziel-URL erzeugen.
4. Auf diese Ziel-URL weiterleiten.
5. Bei fehlendem Datensatz oder nicht ermittelbarer Ziel-URL eine definierte Fehlerseite ausgeben
und keine Redirect-Schleife erzeugen.
Router-Modi und Base-Path
Die Fallback-URL folgt dem konfigurierten data-router-mode genauso wie die bisherigen
Vue-Router-Links.
History-Modus
Bei data-router-mode="history" wird data-base-path vorangestellt:
- data-base-path="/angebote"
- /angebote/pages-detail-redirect?global_id=e_100274925&dataType=Event
Die Route kann serverseitig oder durch den History-Router der integrierenden Anwendung behandelt
werden. Bei direktem Seitenaufruf muss der Webserver diesen Pfad ebenfalls an die Anwendung
weitergeben oder selbst bearbeiten.
Hash-Modus
Bei data-router-mode="hash" wird der Fallback wie eine normale Hash-Route erzeugt:
- #/pages-detail-redirect?global_id=e_100274925&dataType=Event
Der bestehende Seitenpfad beziehungsweise Base-Path bleibt im Browser vor dem `#` erhalten. Die
integrierende Anwendung muss pages-detail-redirect deshalb als clientseitige Hash-Route
behandeln. Der URL-Teil hinter `#` wird nicht an einen Server übertragen.
Memory-Modus
Im Memory-Modus besitzt der WC-Router kein sichtbares URL-Präfix. Der Fallback ist daher
root-relativ:
- /pages-detail-redirect?global_id=e_100274925&dataType=Event