Ayudar a los lectores a encontrar tu sitio a través de fuentes preferidas en la Búsqueda de Google

Si eres propietario de un sitio web, puedes ayudar a tu audiencia 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 la sección Noticias destacadas, destacado con una insignia de "preferido". En el Modo IA y Vistas creadas con IA, tu contenido puede destacarse con la insignia "preferido" para los usuarios que hayan seleccionado tu sitio como fuente preferida.

Fuentes preferidas en Noticias destacadas

Disponibilidad de la función

La función de fuentes preferidas está disponible en todo el mundo para la función "Noticias destacadas" en todos los idiomas en los que se puede usar la Búsqueda de Google. Las fuentes preferidas también pueden aparecer en el Modo IA y en Vistas creadas con IA en todos los idiomas y configuraciones regionales en los que estén disponibles esas funciones.

Solo los sitios a nivel de dominio y de subdominio pueden aparecer en la herramienta de preferencias de fuentes. Por ejemplo, https://www.example.com/ y https://code.example.com/ cumplen los requisitos para ser fuentes preferidas, pero el subdirectorio https://www.example.com/blog no.

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 comprobarlo, introduce tu sitio en el cuadro de búsqueda de la herramienta), puedes usar los siguientes métodos para orientar a tus lectores para que seleccionen tu sitio como fuente preferida:

Implementación estándar de JavaScript (recomendada): inserta un botón interactivo en tus páginas web para que los lectores puedan añadir tu sitio como fuente preferida y volver a tu página sin problemas. Con solo añadir dos líneas a tu HTML, esta opción renderiza un botón con el estilo de Google y localizado automáticamente que admite la personalización del dispositivo y del idioma.
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 estándar de JavaScript, sigue las instrucciones de implementación avanzada de JavaScript. El flujo de la interfaz de usuario final es el mismo que el de la implementación estándar de JavaScript.
Implementación de enlaces profundos: si no puedes implementar el botón interactivo (por ejemplo, porque tu CMS no lo admite), puedes usar un enlace profundo para orientar a los usuarios para que añadan tu sitio como fuente preferida. Para ello, puedes añadir en tus páginas web un enlace de texto o una imagen en la que se pueda hacer clic. También puedes usar el enlace profundo en tus publicaciones en redes sociales, newsletters por correo o promociones.

Implementación estándar de JavaScript (recomendada)

Con solo añadir dos líneas a tu HTML, puedes incluir un botón interactivo traducido automáticamente que permite a los lectores añadir tu sitio como fuente preferida y volver al punto donde lo dejaron en tu página. También puedes definir el tema del botón (oscuro o claro) y cambiar el idioma. Recomendamos esta implementación porque ofrece la mejor experiencia de usuario a los lectores.

Se ve así:

Para insertar el botón de JavaScript en tu página web, sigue estos pasos:

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

Definir el tema del botón

De forma predeterminada, el botón Añadir a fuentes preferidas aparece con un tema claro. Para ajustar el tema, añade el atributo de datos data-theme al elemento <div> y asígnale el valor light o dark:

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

Anular el idioma del botón

De forma predeterminada, el botón Añadir a fuentes preferidas se muestra en el idioma del usuario en función de la configuración de su navegador. Para anular este comportamiento, añade el atributo de datos data-lang al elemento <div> y asigna 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>

Descargar códigos de idioma 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 para buscar elementos con el atributo google-add-preferred-source-btn y renderiza la insignia estándar. Sin embargo, en las integraciones personalizadas en las que quieras activar el flujo desde tus propios elementos de la interfaz de usuario o hitos de la aplicación, puedes inicializar el cliente mediante programación y vincular el flujo a activadores personalizados.

Al integrar la biblioteca de fuentes preferidas en interfaces de usuario personalizadas, hitos de aplicaciones o aplicaciones de frameworks modernos, puedes tener un control programático total sobre los ajustes de tiempo de ejecución y el inicio del flujo mediante nuestro SDK de JavaScript. Ofrecemos dos enfoques de integración distintos en función de tus herramientas y tu arquitectura: importaciones de módulos ES (ESM) y colas de retrollamada de secuencias de comandos estándar (IIFE). Ambos modelos de distribución disponen de los mismos métodos y funciones.

Importaciones de módulos ES

En el caso de las configuraciones de compilación modernas y los 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();
};

Colas de retrollamada de secuencias de comandos estándar

En las integraciones de etiquetas de secuencia de comandos estándar, carga la siguiente secuencia de comandos en el <head> del documento con el atributo preferred-sources-control="manual" para evitar que se renderice el botón automáticamente:

<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 inmediatamente todos los elementos con el atributo google-add-preferred-source-btn.

A continuación, usa la cola de retrollamadas 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 directo en botones, contenedores declarativos, secuencias de comandos IIFE y paquetes de módulos ES, consulta la demo de fuentes preferidas.

Implementación de enlaces profundos

Si no puedes usar JavaScript en tu sitio web, puedes usar un enlace profundo para dirigir a tus usuarios a la herramienta de preferencias de fuentes, donde podrán añadir tu sitio como fuente preferida y confirmar su selección.

Utiliza el siguiente formato de URL y sustituye example.com por el nombre de dominio de tu publicación. De esta forma, los usuarios accederán directamente a tu sitio en la herramienta de preferencias de la fuente:

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

Ejemplo de enlace de texto

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

Ejemplo de enlace 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 para botones

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

Descargar recursos de botones