Widgets: Recomendaciones

El elemento personalizado <devsite-recommendations> se puede usar para ofrecer recomendaciones de contenido a los lectores. Puede permitir que el sistema genere recomendaciones, que usted mismo proporcione recomendaciones explícitas o que incluya las secciones de recomendaciones existentes de su documento para lograr una presentación coherente, estadísticas de clics y una interfaz de usuario enriquecida (con imágenes y descripciones).

Uso

Para usar este widget, crea un elemento <devsite-recommendations>. Si deseas proporcionar recomendaciones de forma explícita, agrega algunos vínculos dentro del elemento. En la actualidad, las recomendaciones generadas por el sistema se proporcionarán cuando el elemento esté vacío, pero el trabajo futuro les permitirá a los autores experimentar con las recomendaciones generadas cuando se proporcionen recomendaciones explícitas, además de usarlas como entradas para el algoritmo.

Si proporcionas recomendaciones explícitas, incluye lenguaje de marcado dentro del elemento. Se extraerán los atributos href de todas las etiquetas <a> que se detecten cuando el elemento esté conectado y se usarán para las recomendaciones.

Si proporcionas más de tres recomendaciones, se elegirá una selección aleatoria. Sin embargo, el orden de las recomendaciones seguirá siendo el mismo que el de las entradas, por lo que las recomendaciones de mayor prioridad siempre se mostrarán en el extremo izquierdo.

Si no quieres que aparezcan recomendaciones específicas en los resultados generados, puedes crear un elemento <devsite-recommendations> vacío con una colección de <link rel="disallow" href="/path">. Todas las etiquetas <link> con rel=disallow y un atributo href se detectarán automáticamente y se quitarán de las recomendaciones generadas.

Si solo quieres recomendaciones de un subconjunto específico de páginas, puedes usar las etiquetas Nomenclatura en un campo query para filtrar los resultados. La sintaxis es k:category:value. Por ejemplo, k:language:typescript. La lista de etiquetas puede ser una lista separada por comas (k:language:typescript,k:language:swift) para incluir las páginas que contengan alguna de las etiquetas.

Ejemplo con vínculos

En las siguientes secciones, se describe el lenguaje de marcado, cómo se renderiza en condiciones normales y cómo se renderiza en máquinas o usuarios-agentes simples.

Marca

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

Resultado

Usuarios-agentes simples

Nota: El texto del vínculo se muestra cuando JavaScript está desactivado

• Documentos de Maps
• Analytics
• MLCC

Ejemplo con rechazos

Marca

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

Resultado

Dado que los resultados dependen de las recomendaciones, que pueden cambiar, el resultado será el mismo que el del modelo de recomendaciones.

Unir contenido existente

El elemento puede mejorar de forma progresiva el lenguaje de marcado existente de tus páginas para que puedas actualizar los vínculos existentes uniéndolos con <devsite-recommendations>.

Los nuevos vínculos adoptarán todas las funciones y políticas de la plataforma de recomendaciones, como la recopilación de datos y los paneles de experimentos, pero el contenido también se reemplazará por metadatos enriquecidos que incluyen imágenes y descripciones, y es posible que se excluyan algunos vínculos (p.ej., páginas sin metadatos o con acceso controlado).

Marca

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

Resultado

Comunidades de ejemplo

Nota: Todo el lenguaje de marcado que se incluya aquí se reemplazará por la IU de recomendaciones.

Para obtener más información sobre Google Developers, consulta nuestras GDE. Si quieres crear una comunidad, consulta los GDG. Por último, si que estás estudiando, no te pierdas nuestras DSC.

Uso en archivos de Markdown

En un archivo de Markdown (.md), asegúrate de que el elemento personalizado esté unido a un elemento HTML estándar, como <section> o <div>:

Contenido mixto

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

Sección de Markdown

• Lista de Markdown
• Vínculo de Markdown

Sección HTML

Markdown puro

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

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

</devsite-recommendations><pre>

Resultado

Atributos del sistema

En la actualidad, los únicos atributos admitidos son para controlar el comportamiento del sistema y los usuarios normales no deberían necesitarlos.

yield (opcional) Si se proporciona, el elemento cederá a cualquier otro elemento de recomendación que no sea de rendimiento en la página. Por lo general, el propio sitio la utiliza para colocar automáticamente recomendaciones en una página, pero solo para mostrarlas cuando no hay otras instancias presentes.

Cómo filtrar con nomenclatura

Marca

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

Resultado