Widgets: recommandations

L'élément personnalisé <devsite-recommendations> peut être utilisé pour recommander des contenus à vos lecteurs. Vous pouvez laisser le système générer des recommandations, vous pouvez fournir vous-même des recommandations explicites ou envelopper des sections de recommandations existantes de votre document pour une présentation cohérente, des statistiques de clics et une interface utilisateur enrichie (y compris des descriptions et des images).

Utilisation

Pour utiliser ce widget, créez un élément <devsite-recommendations>. Si vous souhaitez fournir des recommandations explicitement, ajoutez des liens dans l'élément. À l'heure actuelle, les recommandations générées par le système sont fournies lorsque l'élément est vide. Toutefois, de futurs travaux permettront aux auteurs de tester les recommandations générées lorsque des recommandations explicites sont fournies, et de les utiliser comme entrées dans l'algorithme.

Si vous fournissez des recommandations explicites, insérez un balisage dans l'élément. Les attributs href de toutes les balises <a> détectées lorsque l'élément est connecté seront extraits et utilisés pour les recommandations.

Si vous fournissez plus de trois recommandations, une sélection aléatoire sera effectuée. Toutefois, l'ordre des recommandations reste le même que celui des entrées. Ainsi, les recommandations ayant la priorité la plus élevée s'affichent toujours à gauche.

Si vous ne souhaitez pas que des recommandations spécifiques s'affichent dans les résultats générés, vous pouvez créer un élément <devsite-recommendations> vide avec une collection de <link rel="disallow" href="/path">. Toutes les balises <link> avec rel=disallow et un attribut href seront automatiquement détectées et supprimées des recommandations générées.

Si vous ne souhaitez obtenir des recommandations que pour un sous-ensemble spécifique de pages, vous pouvez utiliser les balises Nomenclature dans un champ query pour filtrer les résultats. La syntaxe est k:category:value. Par exemple, k:language:typescript. La liste des balises peut être une liste d'éléments séparés par une virgule (k:language:typescript,k:language:swift) afin d'inclure les pages qui contiennent n'importe laquelle des balises.

Exemple avec des liens

Les sections suivantes décrivent le balisage, la manière dont il s'affiche dans des conditions normales et sur les machines ou les user-agents simples.

Majoration

<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>

Résultat

User-agents simples

Remarque : Le texte du lien s'affiche lorsque JavaScript est désactivé

• Documentation Maps
• Analytics
• MLCC

Exemple avec "disallows"

Majoration

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

Résultat

Étant donné que les résultats dépendent des recommandations, qui peuvent changer, le résultat sera identique à celui du modèle de recommandations.

Encapsuler du contenu existant

L'élément peut améliorer progressivement le balisage existant sur vos pages. Vous pouvez ainsi mettre à niveau des liens existants en les encapsulant avec <devsite-recommendations>.

Les nouveaux liens reprendront toutes les fonctionnalités et règles de la plate-forme de recommandation, comme la collecte des données et les tableaux de bord de test, mais leur contenu sera également remplacé par des métadonnées enrichies, y compris des descriptions et des images. Il se peut également que certains liens ne soient pas inclus (par exemple, pages dont l'accès est contrôlé ou sans métadonnées).

Majoration

<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>

Résultat

Exemples de communautés

Remarque: Tout le balisage sera remplacé par l'interface utilisateur des recommandations.

Pour en savoir plus sur Google Developers, consultez nos GDE. Si que vous souhaitez former une communauté, découvrez les GDG. Enfin, si vous êtes en train de réviser, ne manquez pas nos DSC.

Utilisation dans les fichiers Markdown

Dans un fichier Markdown (.md), assurez-vous que l'élément personnalisé est encapsulé avec un élément HTML standard, tel que <section> ou <div>:

Contenu mixte

## 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>

Section Markdown

• Liste Markdown
• Lien Markdown

Section HTML

Markdown à l'état pur

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

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

</devsite-recommendations><pre>

Résultat

Attributs système

À l'heure actuelle, les seuls attributs pris en charge permettent de contrôler le comportement du système. Les utilisateurs normaux ne devraient pas en avoir besoin.

yield (facultatif) S'il est fourni, l'élément renvoie vers tous les autres éléments de recommandation qui ne génèrent pas de rendement sur la page. Il est généralement utilisé par le site lui-même pour placer automatiquement des recommandations sur une page, mais pour les afficher uniquement lorsqu'aucune autre instance n'est présente.

Filtrer avec la nomenclature

Majoration

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

Résultat