Widgets: Empfehlungen

Mit dem benutzerdefinierten Element <devsite-recommendations> kannst du deinen Lesern Inhaltsempfehlungen geben. Sie können Empfehlungen vom System generieren lassen, selbst explizite Empfehlungen geben oder vorhandene Empfehlungsabschnitte Ihres Dokuments umschließen und so eine einheitliche Darstellung, Klickstatistiken und eine umfassende Benutzeroberfläche (einschließlich Beschreibungen und Bilder) erzielen.

Nutzung

Wenn du dieses Widget verwenden möchtest, musst du ein <devsite-recommendations>-Element erstellen. Wenn Sie Empfehlungen explizit angeben möchten, fügen Sie innerhalb des Elements einige Links hinzu. Derzeit werden systemgenerierte Empfehlungen bereitgestellt, wenn das Element leer ist. Künftige Änderungen werden es Autoren ermöglichen, mit generierten Empfehlungen zu experimentieren, wenn explizite Empfehlungen bereitgestellt werden, und sie als Eingaben für den Algorithmus zu verwenden.

Wenn Sie explizite Empfehlungen bereitstellen, fügen Sie ein gewisses Markup innerhalb des Elements hinzu. Für alle <a>-Tags, die beim verbundenen Element erkannt werden, werden die href-Attribute extrahiert und für die Empfehlungen verwendet.

Wenn Sie mehr als drei Empfehlungen angeben, erfolgt eine Zufallsauswahl. Die Reihenfolge der Empfehlungen bleibt jedoch dieselbe wie die Eingabereihenfolge, sodass Empfehlungen mit höherer Priorität immer ganz links angezeigt werden.

Wenn bestimmte Empfehlungen nicht in den generierten Ergebnissen erscheinen sollen, können Sie ein leeres <devsite-recommendations>-Element mit einer <link rel="disallow" href="/path">-Sammlung erstellen. Alle <link>-Tags mit rel=disallow und einem href-Attribut werden automatisch erkannt und aus generierten Empfehlungen entfernt.

Wenn Sie nur Empfehlungen von einer bestimmten Untergruppe von Seiten erhalten möchten, können Sie Nomenklatur-Tags in einem query-Feld verwenden, um die Ergebnisse zu filtern. Die Syntax lautet k:category:value. Beispiel: k:language:typescript. Bei der Liste der Tags kann es sich um eine durch Kommas getrennte Liste (k:language:typescript,k:language:swift) handeln, damit Seiten eingeschlossen werden, die eines der Tags enthalten.

In den folgenden Abschnitten wird das Markup beschrieben. Außerdem wird beschrieben, wie es unter normalen Bedingungen und auf Computern oder einfachen User-Agents gerendert wird.

Markup

<devsite-recommendations>
<p>Note: link text is displayed when JavaScript is off</p>
<ul>
  <li><a href="/maps/documentation">Maps docs</a></li>
  <li><a href="/analytics">Analytics</a></li>
  <li><a href="/machine-learning/crash-course">MLCC</a></li>
</ul>
</devsite-recommendations>

Ergebnis

Einfache User-Agents

Hinweis: Der Linktext wird angezeigt, wenn JavaScript deaktiviert ist.

Beispiel mit „nicht zulassen“

Markup

<devsite-recommendations>
  <link rel="disallow" href="/maps/documentation">
  <link rel="disallow" href="/analytics">
  <link rel="disallow" href="/machine-learning/crash-course">
</devsite-recommendations>

Ergebnis

Da die Ergebnisse von den Empfehlungen abhängen, die sich ändern können, sieht die Ausgabe genauso aus wie die Ausgabe des Empfehlungsmodells.

Vorhandene Inhalte zusammenfassen

Das Element kann vorhandenes Markup auf deinen Seiten nach und nach optimieren. Du kannst vorhandene Links aktualisieren, indem du sie mit <devsite-recommendations> umschließt.

Die neuen Links übernehmen alle Funktionen und Richtlinien der Empfehlungsplattform, z. B. Dashboards für Datenerhebung und Experimente. Die Inhalte werden aber auch durch umfassende Metadaten wie Beschreibungen und Bilder ersetzt und möglicherweise einige Links (z. B. solche mit Zugriffssteuerung oder Seiten ohne Metadaten) ausgeschlossen.

Markup

<devsite-recommendations>
<h2>Example communities</h2>
<p>Note: All markup here will be replaced with the recommendation UI.</p>
<p>
  For more information on Google Developers, check out our <a href="/community/experts">GDEs</a>. If
  you are looking to form a community, take a look at <a href="/community/gdg">GDGs</a>. Lastly, if
  you're currently studying, don't miss our <a href="/community/dsc">DSCs</a>.
</p>
</devsite-recommendations>

Ergebnis

Beispiel-Communitys

Hinweis: Das gesamte Markup hier wird durch die UI für Empfehlungen ersetzt.

Weitere Informationen zu Google Developers finden Sie in unseren GDEs. Wenn Wenn Sie eine Community gründen möchten, sehen Sie sich die GDGs an. Wenn schließlich die Sie derzeit im Kurs absolvieren, sollten Sie sich unsere DSCs nicht entgehen lassen.

Verwendung in Markdown-Dateien

Achten Sie darauf, dass das benutzerdefinierte Element in einer Markdown-Datei (.md) von einem Standard-HTML-Element wie <section> oder <div> umschlossen ist:

Mixed content

## Markdown section

* Markdown list
* [Markdown link](/foo)

## HTML section

<div>
<devsite-recommendations>
  <p>Note: link text is displayed when JavaScript is off</p>
  <h2>Sample heading</h2>
  <a href="/recommended">Recommended</a>
</devsite-recommendations>
</div>

Markdown-Abschnitt

HTML-Abschnitt

Hinweis: Der Linktext wird angezeigt, wenn JavaScript deaktiviert ist.

Beispielüberschrift

Empfohlen

Reiner Markdown

<pre><devsite-recommendations>
## Sample heading

* Note: link text is displayed when JavaScript is off
* [Maps documentation](/maps/documentation)

</devsite-recommendations><pre>

Ergebnis

Beispielüberschrift

Systemattribute

Derzeit werden nur die einzigen unterstützten Attribute zur Steuerung des Systemverhaltens unterstützt und sollten von normalen Nutzern nicht benötigt werden.

yield (optional) Wenn angegeben, wird das Element zu allen anderen Empfehlungselementen auf der Seite überführt, die keine Ertrag liefern. Dies wird normalerweise von der Website selbst verwendet, um Empfehlungen automatisch auf einer Seite zu platzieren, aber um sie nur anzuzeigen, wenn keine anderen Instanzen vorhanden sind.

Mit Nomenklatur filtern

Markup

<devsite-recommendations query="k:language:typescript">
</devsite-recommendations>

Ergebnis