Ayuda a tus lectores a encontrar tu sitio a través de las fuentes preferidas en la Búsqueda de Google

Si eres propietario de un sitio web, puedes ayudar a tu público a encontrar tu publicación como fuente preferida en la Búsqueda de Google. Cuando un usuario selecciona tu sitio como fuente preferida, es más probable que tu contenido aparezca en "Noticias destacadas", destacado con una insignia de "preferido". En el Modo IA y la Visión general creada por IA, tu contenido se puede destacar con una insignia de "preferido" para los usuarios que seleccionaron tu sitio como fuente preferida.

Fuentes preferidas en las Noticias destacadas

Disponibilidad de funciones

La función de fuentes preferidas está disponible a nivel mundial para la función "Noticias destacadas" en todos los idiomas en los que está disponible la Búsqueda de Google. Las fuentes preferidas también pueden aparecer en el Modo IA y la Visión general creada por IA en todos los idiomas y configuraciones regionales en los que estén disponibles esas funciones.

Solo los sitios a nivel de dominio y subdominio son aptos para aparecer en la herramienta de preferencias de fuentes. Por ejemplo, https://www.example.com/ y https://code.example.com/ son aptos para las fuentes preferidas, pero el subdirectorio https://www.example.com/blog no lo es.

Cómo ayudar a los usuarios a encontrar tu sitio como fuente preferida

Si tu sitio aparece en la herramienta de preferencias de fuentes (para verificarlo, ingresa tu sitio en el cuadro de búsqueda de la herramienta), puedes usar los siguientes métodos para guiar a tus lectores a seleccionar tu sitio como fuente preferida:

Implementación estándar de JavaScript (recomendada): Incorpora un botón interactivo en tus páginas web que permita a los lectores agregar tu sitio como fuente preferida sin problemas y, luego, volver a tu página. Si agregas solo dos líneas a tu HTML, esta opción renderiza automáticamente un botón con el estilo de Google localizado que admite la personalización de dispositivos y de idiomas.
Implementación avanzada de JavaScript con recursos de diseño personalizados: Si quieres usar tus propios recursos de diseño y personalizar el botón de JavaScript estándar, sigue las instrucciones de implementación avanzada de JavaScript. El flujo de la IU del usuario final sigue siendo el mismo que el de la implementación estándar de JavaScript.
Implementación de vínculos directos: Si no puedes implementar el botón interactivo (por ejemplo, tu CMS no lo admite), puedes usar un vínculo directo para dirigir a las personas a agregar tu sitio como fuente preferida. Para ello, puedes agregar un vínculo de texto o una imagen en la que se pueda hacer clic en tus páginas web. También puedes usar el vínculo directo en tus publicaciones de redes sociales, boletines informativos por correo electrónico o promociones.

Implementación estándar de JavaScript (recomendada)

Si agregas solo dos líneas a tu código HTML, puedes agregar un botón interactivo traducido automáticamente, que permite que los lectores agreguen tu sitio como fuente preferida sin problemas y regresen al lugar donde lo dejaron en tu página. También puedes establecer el tema del botón (oscuro o claro) y anular el idioma del botón. Recomendamos esta implementación porque proporciona la mejor experiencia del usuario para los lectores.

Así se verá:

Para incorporar el botón de JavaScript en tu página web, haz lo siguiente:

Agrega la siguiente etiqueta <script> a tu página web (preferentemente en el elemento <head>), que carga la biblioteca de Fuentes preferidas.
```
<script async src="https://news.google.com/swg/js/v1/publisher.js"></script>
```
Agrega la siguiente etiqueta <div> en cualquier lugar donde quieras que aparezca el botón en el cuerpo de tu página web.
```
<div google-add-preferred-source-btn></div>
```

Establece el tema del botón

De forma predeterminada, el botón "Agregar a fuentes preferidas" aparece en un tema claro. Para ajustar el tema, agrega el atributo de datos data-theme a tu elemento <div> y configúralo como light o dark:

<div google-add-preferred-source-btn data-theme="dark"></div>

Anula el idioma del botón

De forma predeterminada, el botón "Agregar a fuentes preferidas" se muestra en el idioma del usuario según la configuración de su navegador. Para anular este comportamiento, agrega el atributo de datos data-lang a tu elemento <div> y configúralo con el código de idioma que prefieras (descarga la lista de códigos de idioma admitidos):

<div google-add-preferred-source-btn data-lang="en"></div>

Descarga los códigos de idiomas admitidos

Implementación avanzada de JavaScript con recursos de diseño personalizados

De forma predeterminada, el botón de JavaScript estándar analiza automáticamente el DOM en busca de elementos con el atributo google-add-preferred-source-btn y renderiza la insignia estándar. Sin embargo, para las integraciones personalizadas en las que deseas activar el flujo desde tus propios elementos de la IU o hitos de la aplicación, puedes inicializar el cliente de manera programática y vincular el flujo a activadores personalizados.

Cuando integres la biblioteca de Fuentes preferidas en interfaces de usuario personalizadas, hitos de aplicaciones o aplicaciones de frameworks modernos, puedes tomar el control programático completo sobre la configuración del tiempo de ejecución y el inicio del flujo con nuestro SDK de JavaScript. Proporcionamos dos enfoques de integración distintos según tu arquitectura y tus herramientas: importaciones de módulos ES (ESM) y filas de devolución de llamada de secuencias de comandos estándar (IIFE). Ambos modelos de distribución exponen capacidades y métodos idénticos.

Importaciones de módulos de ES

Para configuraciones de compilación modernas y entornos basados en módulos, importa la biblioteca directamente en tu código.

import { preferredSource } from
  "https://news.google.com/swg/js/v1/publisher.mjs";

// 1. Initialize directly using the imported module instance
preferredSource.init({
  theme: 'light', // Theme choice: "light" or "dark" (default "light")
  lang: 'en'      // Optional: override language (defaults to page language)
});

// 2. Programmatically bind flow invocation using a click handler
const button = document.querySelector('#myButton');
button.onclick = () => {
  preferredSource.addPreferredSource();
};

Filas de devolución de llamada de secuencias de comandos estándar

Para las integraciones de etiquetas de secuencia de comandos estándar, carga la siguiente secuencia de comandos en el elemento <head> de tu documento con el atributo preferred-sources-control="manual" para evitar la renderización automática de botones:

<script async preferred-sources-control="manual" src="https://news.google.com/swg/js/v1/publisher.js"></script>

Nota: Si se omite el atributo preferred-sources-control="manual", se buscarán y se inicializarán de inmediato todos los elementos con el atributo google-add-preferred-source-btn.

Luego, usa la fila de devolución de llamada global PREFERRED_SOURCE para inicializar las opciones y vincular los activadores personalizados:

<script>
  (self.PREFERRED_SOURCE = self.PREFERRED_SOURCE || []).push(
    function(preferredSource) {
      // 1. Initialize with options
      preferredSource.init({
        theme: 'light',
        lang: 'en'
      });

      // 2. Programmatically bind trigger button
      const button = document.querySelector('#myButton');
      button.addEventListener('click', () => {
        preferredSource.addPreferredSource();
      });
  });
</script>

Para ver implementaciones interactivas de frontend y backend que muestran el uso en vivo en botones, contenedores declarativos, secuencias de comandos de IIFE y paquetes de módulos ES, explora la demostración de fuentes preferidas.

Implementación de vínculos directos

Si no puedes usar JavaScript en tu sitio web, puedes usar un vínculo directo para dirigir a los usuarios a la herramienta de preferencias de fuentes, donde pueden agregar tu sitio como fuente preferida y confirmar su selección.

Usa el siguiente formato de URL y reemplaza example.com con el nombre de dominio de tu publicación, que lleva a los usuarios directamente a tu sitio en la herramienta de preferencias de fuentes:

https://www.google.com/preferences/source?q=Your_Website's_URL

Ejemplo de vínculo de texto

<a
  href="https://www.google.com/preferences/source?q=example.com">
  Add as Preferred Source
</a>

Ejemplo de vínculo de imagen en el que se puede hacer clic

<a
  href="https://www.google.com/preferences/source?q=example.com">
  <img src="path/to/your/button.png" alt="Add as Preferred Source">
</a>

Recursos de imagen de botones

Puedes diseñar tu propia insignia de promoción personalizada o descargar recursos gráficos oficiales traducidos que proporciona Google:

Descarga recursos de botones