Verificar tags OG em localhost e staging

Próximo

Os rastreadores de links online não conseguem acessar localhost, uma intranet nem um site de staging protegido por login. Este verificador trabalha com HTML colado, então você pode testar suas tags og e de Twitter Card antes de a página ficar pública.

Como testar uma página privada ou local

  1. 1

    Abra a página localmente

    Carregue a página no navegador a partir de localhost ou do endereço de staging, com login feito se for preciso.

  2. 2

    Copie o código-fonte

    Abra view-source e copie o head, ou o documento inteiro.

  3. 3

    Cole aqui

    Cole na caixa HTML do head da página e clique em Próximo e depois em Resultados.

  4. 4

    Corrija antes do lançamento

    Resolva qualquer item em vermelho, recarregue sua página local, copie o código-fonte de novo e verifique outra vez.

Por que o HTML colado funciona onde os scanners de URL falham

Um scanner que recebe uma URL precisa buscá-la pela internet. Ele não consegue abrir http://localhost:3000, uma página de rede privada ou um site de staging que pede senha. Como este verificador lê apenas o texto que você cola, nada disso importa: se você consegue ver a página no navegador, consegue verificar as tags dela.

O que verificar antes de ir ao ar

Item Por que importa no staging
og:url Muitas vezes ainda aponta para o endereço de staging ou local e precisa mudar para a URL de produção
og:image Um caminho relativo ou um endereço local não funciona para mais ninguém
og:title e og:description Texto de exemplo deixado em um template passa despercebido com facilidade
twitter:card Fácil de esquecer em um template novo

O erro mais comum no lançamento é copiar valores de staging para produção. Depois de colar, leia com atenção os valores impressos de og:url e og:image: se algum contiver localhost ou o nome de um host de staging, corrija no template.

Um exemplo

Suponha que a sua página local imprima este og:url:

<meta property="og:url" content="http://localhost:3000/pricing">

O verificador vai marcar og:url como presente, porque a tag existe, e mostrar o valor. O problema está no valor, não na tag. O template de produção deveria gerar https://yourdomain.com/pricing.

Os limites de uma verificação local

Isto mostra que o seu marcador está completo e correto como texto. Não é possível confirmar que uma plataforma social conseguirá baixar a imagem depois que o site estiver no ar, porque isso depende de o endereço público final estar acessível. Depois do lançamento, compartilhe a URL publicada em um chat privado ou passe-a uma vez pelo rastreador da plataforma para ver o cartão real.

Rotina pré-lançamento

Transforme esta verificação em parte da sua rotina de publicação. Copie o código-fonte renderizado de uma página por template, cole aqui e leia os valores impressos de og:url e og:image para encontrar endereços locais ou de staging. Faça de novo após o build final, porque uma mudança tardia em um template pode trazer de volta um endereço de staging. Leva um minuto e evita um cartão quebrado no dia do lançamento.

Perguntas frequentes

Sim. Abra a página com o login feito, copie o código-fonte e cole. A ferramenta nunca visita a página por conta própria.

Não. Ele informa que a tag está presente e mostra o valor. Leia o valor e substitua qualquer endereço local ou de staging.

O head basta, porque as tags og e twitter ficam ali. A página inteira também funciona.

Só se as tags estiverem no código-fonte que você copiar. Os rastreadores geralmente leem o HTML bruto, então tags adicionadas depois por scripts não serão encontradas.

Ferramentas relacionadas

Ferramenta disponível em outros idiomas

Guias e casos de uso