Ir para o conteúdo principal
Isenção de responsabilidade de tradução: esse conteúdo foi traduzido para sua conveniência com o uso de software e pode não ter sido revisado por uma pessoa. O texto oficial é a versão em inglês e sempre será o texto mais atualizado. Para ver a versão em inglês, clique aqui.

Configure o robots.txt e as meta tags de imagem do seu sítio Web para pré-visualizações de hiperligações de publicações sociais

Ultima atualização: Janeiro 18, 2024

Disponível com qualquer uma das seguintes assinaturas, salvo menção ao contrário:

Marketing Hub Professional, Enterprise
Marketing Hub Basic (versão anterior)

Ao criar e publicar um post social no HubSpot, a rede social correspondente tentará gerar uma visualização de imagem para seu post. Com base no link que você inseriu para o post, a rede social vai examinar as metatags no código fonte da sua página e rastrear o arquivo robots.txt do seu site.

Se você estiver hospedando seu site em um provedor externo, como o WordPress, e a visualização da sua publicação não aparecer como esperado, siga as instruções abaixo.

Atualizar seu robots.txt

Um arquivo robots.txt informa aos mecanismos de pesquisa como indexar seu site. Se você não tiver adicionado ou configurado seu arquivo robots.txt corretamente, redes sociais não poderão analisar o conteúdo das suas páginas. Facebook e X (antigo Twitter) fornecem as cadeias de agentes do utilizador que terá de adicionar ao seu ficheiro robots.txt:

User-agent: facebookexternalhit
Disallow:

User-agent: Twitterbot
Disallow:

O LinkedIn não fornece documentação para sua string de agente do usuário, mas você pode usar o inspetor de post do LinkedIn para confirmar se o LinkedIn pode rastrear o conteúdo do seu site.

Adicione várias metatags à <head>seção das páginas do seu site

Os mecanismos de pesquisa e redes sociais analisarão a seção do cabeçalho do seu HTML para procurar o metadados necessário para gerar uma visualização da página. Deve incluir os metadados para o Facebook e X (antigo Twitter) depois das suas meta tags principais:

<!-- Primary Meta Tags -->
<title>Meta Tags — Preview, Edit and Generate</title>
<meta name="title" content="Meta Tags — Preview, Edit and Generate">
<meta name="description" content="With Meta Tags you can edit and experiment with your content then preview how your webpage will look on Google, Facebook, Twitter and more!">

<!-- Open Graph / Facebook -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://example.com">
<meta property="og:title" content="Title of your Website Page">
<meta property="og:description" content="Description of your Website Page">
<meta property="og:image" content="https://example.com/image.png">

<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:url" content="https://example.com/">
<meta property="twitter:title" content="Title of your Website Page">
<meta property="twitter:description" content="Description of your Website Page">
<meta property="twitter:image" content="https://example.com/image.png">

Preencha os atributos de conteúdo para cada uma das metatags acima com os valores correspondentes para sua página. Pode validar as suas meta-etiquetas utilizando a ferramenta de depuração do Facebook , o validador de cartões X e o inspetor de posts do LinkedIn .

Se a imagem em destaque de um link que inseriu não estiver a ser apresentada corretamente na pré-visualização social (por exemplo, a imagem está cortada ou a proporção está incorrecta), poderá ser necessário editar a imagem para que tenha as dimensões correctas para a rede social em que está a publicar e, em seguida, voltar a publicar a página. Se você estiver publicando no Facebook, pode aprender mais sobre os requisitos de imagem em destaque em sua documentação.

As seguintes dimensões são recomendadas para otimização da imagem em destaque em cada rede:

  • Facebook: 1.91:1
  • X (anteriormente Twitter): 16:9 para publicações com fotografias e 1,91:1 para imagens em destaque em publicações com hiperligações
  • Instagram (quadrado): 1:1
  • Instagram (retrato): 4:5
  • Instagram (paisagem): 1.91:1
  • LinkedIn (paisagem): 1.91:1

Certifique-se de que qualquer mídia incluída em seus posts sociais sigam as diretrizes de tamanho de arquivo para cada rede. Se a HubSpot determinar que um arquivo é muito grande para publicar em uma determinada rede, um aviso será exibido. O tamanho máximo de arquivo para cada rede social está listado abaixo:

  • Facebook: 8MB (recomenda-se menos de 1MB para ficheiros PNG para evitar pixelização)
  • Instagram: 8MB
  • X (anteriormente Twitter): 5MB (15MB para GIFs)
  • LinkedIn: 10MB

Discrepâncias na cor e nitidez da imagem

Diferenças na cor da imagem

Os perfis de cores incorporados podem afetar a forma como a imagem em destaque é exibida no post social. Os sistemas processam perfis de cores fora do comum de maneiras diferentes, e é por isso que as cores podem parecer diferentes ao visualizar a imagem no gerenciador de arquivos. Pode executar o URL da sua imagem através de uma ferramenta externa  para ver se está a utilizar um perfil de cor invulgar. Se necessário, você pode remover o perfil de cores com interferência em uma ferramenta de edição de fotos como o Photoshop e republicar a página antes de publicar os posts sociais.

Diferenças na nitidez da imagem

O gerenciador de arquivos da HubSpot usa a compactação de imagem em JPEGs e PNGs para ajudar a otimizar as velocidades de carregamento do seu conteúdo hospedado na HubSpot. As redes de mídias sociais também usam compressão de imagem nos posts, mas a qualidade pode variar em relação à compressão usada pelo HubSpot. Por isso, é recomendável usar imagens com resolução relativamente alta (na relação de aspecto recomendada) para cada rede. Se a imagem não estiver em conformidade com os requisitos de uma rede social, um aviso será exibido na ferramenta de publicação social do HubSpot para ajudá-lo a ajustar sua imagem.

 

Se você ainda encontrar problemas com as visualizações do link não aparecendo corretamente, confira nosso guia de solução de problemas.

Esse artigo foi útil?
Este formulário deve ser usado apenas para fazer comentários sobre esses artigos. Saiba como obter ajuda para usar a HubSpot.