Ajudar leitores a encontrar seu site nas fontes preferidas da Pesquisa Google

Se você é proprietário de um site, pode ajudar o público a encontrar sua publicação como uma fonte preferida na Pesquisa Google. Quando um usuário seleciona seu site como uma fonte preferida, é mais provável que seu conteúdo apareça em "Principais notícias", destacado com um selo "preferido". No Modo IA e nas Visões gerais criadas por IA, seu conteúdo pode ser destacado com um selo de "preferido" para usuários que selecionaram seu site como uma fonte preferida.

Fontes preferidas nas Principais notícias

Disponibilidade do recurso

O recurso de fontes preferidas está disponível globalmente para o recurso "Principais notícias" em todos os idiomas em que a Pesquisa Google está disponível. As fontes preferidas também podem aparecer no Modo IA e nas Visões Gerais Criadas por IA em todos os idiomas e locais em que esses recursos estão disponíveis.

Somente sites no nível do domínio e do subdomínio podem aparecer na ferramenta de fontes preferidas. Por exemplo, https://www.example.com/ e https://code.example.com/ podem ser qualificar, mas o subdiretório https://www.example.com/blog não é aceito.

Como ajudar os usuários a encontrar seu site como uma fonte preferida

Se o site aparecer na ferramenta de fontes preferidas (para verificar, insira o site na caixa de pesquisa da ferramenta), use os métodos a seguir para orientar os leitores a selecionar seu site como uma fonte preferida:

Implementação padrão do JavaScript (recomendado): incorpore um botão interativo às suas páginas da Web para que os leitores adicionem seu site como uma fonte preferida e retornem à sua página. Ao adicionar apenas duas linhas ao seu HTML, essa opção renderiza um botão automaticamente localizado e com estilo do Google que oferece suporte à personalização de dispositivos e idiomas.
Implementação avançada de JavaScript com recursos de design personalizados: se você quiser usar seus próprios recursos de design e personalizar o botão JavaScript padrão, siga as instruções de implementação avançada de JavaScript. O fluxo de IU do usuário final permanece o mesmo da implementação padrão do JavaScript.
Implementação de link direto: se você não conseguir implementar o botão interativo (por exemplo, se o CMS não for compatível), use um link direto para direcionar as pessoas a adicionar seu site como uma fonte preferida. Para isso, adicione um link de texto ou uma imagem clicável às suas páginas da Web. Você também pode usar o link direto em posts em redes sociais, newsletters por e-mail ou promoções.

Implementação padrão de JavaScript (recomendada)

Ao adicionar apenas duas linhas ao HTML, você pode incluir um botão interativo traduzido automaticamente, que permite que os leitores adicionem seu site como uma fonte preferida e retornem ao ponto em que pararam na página. Também é possível definir o tema do botão (escuro ou claro) e substituir o idioma dele. Recomendamos essa implementação porque ela oferece a melhor experiência do usuário para os leitores.

Veja como ele vai aparecer:

Para incorporar o botão JavaScript na sua página da Web, faça o seguinte:

Adicione a seguinte tag <script> à sua página da Web (de preferência no elemento <head>), que carrega a biblioteca de fontes preferidas.
```
<script async src="https://news.google.com/swg/js/v1/publisher.js"></script>
```
Adicione a tag <div> a seguir em qualquer lugar do corpo da página da Web em que você quer que o botão apareça.
```
<div google-add-preferred-source-btn></div>
```

Definir o tema do botão

Por padrão, o botão "Adicionar às fontes preferidas" aparece em um tema claro. Para ajustar o tema, adicione o atributo de dados data-theme ao elemento <div> e defina-o como light ou dark:

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

Substituir o idioma do botão

Por padrão, o botão "Adicionar às fontes preferidas" aparece no idioma do usuário com base nas configurações do navegador. Para modificar esse comportamento, adicione o atributo de dados data-lang ao elemento <div> e defina-o como o código de idioma de sua preferência (faça o download da lista de códigos de idioma compatíveis):

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

Baixar códigos de idioma compatíveis

Implementação avançada de JavaScript com recursos de design personalizados

Por padrão, o botão JavaScript padrão verifica automaticamente o DOM em busca de elementos com o atributo google-add-preferred-source-btn e renderiza o selo padrão. No entanto, para integrações personalizadas em que você quer acionar o fluxo usando seus próprios elementos de interface ou marcos do aplicativo, é possível inicializar o cliente de forma programática e vincular o fluxo a acionadores personalizados.

Ao integrar a biblioteca de fontes preferenciais a interfaces do usuário personalizadas, marcos de aplicativos ou aplicativos de framework modernos, é possível ter controle programático total sobre as configurações de ambiente de execução e o início do fluxo usando nosso SDK para JavaScript. Oferecemos duas abordagens de integração distintas, dependendo das suas ferramentas e arquitetura: importações de módulos ES (ESM) e filas de callback de script padrão (IIFE). Os dois modelos de distribuição expõem recursos e métodos idênticos.

Importações de módulos ES

Para configurações de build modernas e ambientes baseados em módulos, importe a biblioteca diretamente para seu 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 callback de script padrão

Para integrações de tag script padrão, carregue o script a seguir no <head> do seu documento com o atributo preferred-sources-control="manual" para evitar a renderização automática de botões:

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

Observação: se o atributo preferred-sources-control="manual" for omitido, ele vai pesquisar e inicializar imediatamente todos os elementos com o atributo google-add-preferred-source-btn.

Em seguida, use a fila de callback global PREFERRED_SOURCE para inicializar opções e vincular acionadores 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 implementações interativas de front-end e back-end que mostram o uso ativo em botões, contêineres declarativos, scripts IIFE e pacotes de módulos ES, confira a demonstração de fontes preferidas.

Implementação de links diretos

Se não for possível usar JavaScript no seu site, use um link direto para direcionar os usuários à ferramenta de fontes preferidas, onde eles podem adicionar seu site como uma fonte preferida e confirmar a seleção.

Use o seguinte formato de URL e substitua example.com pelo nome de domínio da sua publicação, que leva os usuários diretamente ao seu site na ferramenta de fontes preferidas:

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

Exemplo de link de texto

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

Exemplo de link de imagem clicável

<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 imagem de botão

Você pode criar seu próprio selo de promoção personalizado ou fazer o download de recursos gráficos traduzidos em versões oficiais fornecidas pelo Google:

Fazer o download dos recursos de botão