Gerador de Meta Tags
Ferramenta geradora de Meta tags no navegador, compatível com title, description, keywords, canonical, Open Graph, Twitter Card, robots e outras tags. Escape automático de entidades HTML, dicas de comprimento em tempo real com status de cor, cópia e download com um clique.
Sugestões Relacionadas
Casos de uso
- Gera em lote conjuntos completos de Meta tags para página inicial, páginas de listagem e páginas de detalhe antes do lançamento de um novo site, concluindo rapidamente a configuração SEO básica
- Configura tags Open Graph tipo article e Twitter Card tipo summary_large_image antes de publicar artigos de blog para melhorar o efeito ao compartilhar em plataformas sociais
- Configura og:type product em páginas de produtos de e-commerce, define informações estruturadas como og:image, og:price:amount, otimizando a exibição de produtos em redes sociais
- Regenera tags canonical após um redesenho do site ou mudança de domínio para unificar a especificação de URL e evitar a dispersão de peso por conteúdo duplicado
- Configura theme-color para páginas web móveis para que a barra de endereço do Chrome e Safari móvel coincida com as cores da marca
- Gera rapidamente código completo de Meta tags necessário para configuração head ao desenvolver com frameworks SSR/SSG como Next.js, Nuxt.js, Gatsby
- Configura manualmente Meta tags para modelos de página personalizados em sistemas CMS como WordPress e Shopify sem depender de plugins SEO
- Gera rapidamente combinações corretas de robots meta tag (como noindex,nofollow para ambientes de teste) ao solucionar problemas de indexação do site
- Configura cartões de compartilhamento para páginas de destino de campanhas por operadores de mídia social, garantindo que a visualização esteja correta ao compartilhar no Facebook, Twitter/X, LinkedIn, WhatsApp, Slack e Discord
- Conclui automaticamente o escape de entidades de Meta tags ao escrever modelos de página HTML para desenvolvedores frontend, evitando erros de sintaxe HTML causados por caracteres especiais
Como Usar
- Na área de «Tags SEO Básicas», preencha o title da página (título, recomendado 50-60 caracteres), meta description (descrição, recomendado 120-160 caracteres), keywords (palavras-chave separadas por vírgulas), canonical URL (link canônico), author (autor)
- Na área de «Diretrizes de rastreamento robots», selecione regras de indexação e acompanhamento adequadas: index/noindex (indexar ou não), follow/nofollow (seguir links ou não), você pode marcar opções adicionais como noarchive, nosnippet
- Na área de «Configuração de Cor do Tema», insira ou selecione o valor de cor hexadecimal para theme-color, usado para colorir a barra de endereço do navegador móvel
- Alterne para a área de «Tags Open Graph», selecione og:type (escolha entre website/article/product/profile), preencha og:title, og:description, og:image (URL da imagem de compartilhamento, recomendado 1200×630 pixels), og:url, og:site_name, og:locale
- Alterne para a área de «Tags Twitter Card», selecione o tipo de twitter:card (escolha entre summary/summary_large_image/app/player), preencha a conta @twitter:site, twitter:title, twitter:description, twitter:image
- Durante a inserção de conteúdo, observe a área de visualização em tempo real à direita e as dicas de cor do contador de caracteres: verde significa comprimento ideal, laranja significa próximo ao limite, cinza significa muito curto ou longo e precisa de ajuste
- Após confirmar que as tags estão corretas, clique no botão «Copiar para a área de transferência» para copiar todo o código e colar na área HTML head, ou clique em «Baixar arquivo HTML» para salvar como meta-tags.html para uso posterior
Recursos
- Escape automático de entidades HTML: escapa com segurança os caracteres especiais &, <, >, ", ' para evitar erros de sintaxe HTML nas tags geradas
- Indicador inteligente de comprimento de title: exibe verde (ideal) no intervalo de 50-60 caracteres, indicadores laranja/cinza quando excede ou é muito curto, contador em tempo real
- Indicador inteligente de comprimento de meta description: exibe verde (faixa de exibição ideal) em 120-160 caracteres, mudança de cor em tempo real quando muito longo ou curto
- Compatível com 4 opções de og:type: website (site geral), article (artigo/blog), product (página de produto), profile (perfil pessoal), adaptado a diferentes tipos de página
- Compatível com 4 tipos de twitter:card: summary (resumo com imagem pequena), summary_large_image (resumo com imagem grande), app (cartão de aplicativo), player (cartão de vídeo/reprodutor)
- Configuração combinada de diretrizes robots: combina livremente diretivas de rastreamento como index/noindex, follow/nofollow, noarchive, nosnippet, noimageindex
- Meta tag author: suporta configurar tags de autoria como content-author, article:author, ideal para blogs e sites de notícias
- Configuração de cor do tema theme-color: define a cor da barra de endereço móvel do navegador, com seletor de cores e entrada de valor de cor
- Configuração de nome do site og:site_name: campo dedicado para o nome do site no protocolo Open Graph, exibe corretamente o nome do site ao compartilhar em redes
- Configuração de conta @twitter:site: permite inserir o @handle oficial da plataforma Twitter/X, vinculando cartões de compartilhamento à conta oficial
- Saída estruturada em três seções: exibe resultados em três seções claras: Primary SEO, Open Graph e Twitter Card, estrutura clara à primeira vista
- Cópia para a área de transferência com um clique: o código gerado é copiado com um clique sem seleção manual, compatível com vários navegadores
- Download como meta-tags.html: baixa as tags geradas como arquivo HTML independente, conveniente para salvar ou importar diretamente ao projeto
- Geração e visualização em tempo real: gera código de tags instantaneamente ao inserir conteúdo, com visualização sincronizada de resultados SERP e estilo de cartões sociais
Perguntas frequentes
O código gerado pelo Gerador de Meta Tags pode ser copiado diretamente para o site para usar? Precisa de modificações?
Pode ser copiado e usado diretamente. O código gerado por esta ferramenta são Meta tags HTML em formato padrão, com escape automático de entidades HTML concluído, simplesmente cole entre <head> e </head> da sua página web. Você só precisa garantir que as URL que preenche (canonical, og:image, og:url, twitter:image) são endereços online reais do seu site, não marcadores de posição de exemplo. Se você usar soluções de gestão head de frameworks como Next.js, Nuxt.js, React Helmet, Vue Meta, pode que precise de ajustes menores de acordo com a sintaxe de modelos JSX/Vue do framework, mas os atributos e valores de tags podem ser reutilizados completamente.
Por que é obrigatório preencher a imagem og:image? O que acontece se não houver imagem?
og:image afeta diretamente o efeito visual e a taxa de cliques do cartão de compartilhamento social. Links sem og:image ao serem compartilhados em plataformas como Facebook, Twitter, LinkedIn, WeChat, etc., mostrarão um link de texto simples sem visualização de imagem, ou a plataforma extrairá aleatoriamente uma imagem pequena da página (pode ser logo, avatar, imagem publicitária ou até imagem não relacionada), o efeito de exibição é muito ruim, a taxa de cliques geralmente é mais de 50% mais baixa que os compartilhamentos com imagem de visualização correta. O tamanho recomendado de og:image é 1200×630 pixels (proporção 1.91:1), deve ser uma URL absoluta de acesso público, tamanho de arquivo não maior que 5MB.
Devem ser configurados tanto Open Graph quanto Twitter Card? Só configurar OG é suficiente?
A plataforma Twitter/X realmente lerá tags Open Graph como reserva: se você não configurar nenhuma tag com prefixo twitter:, o Twitter tentará usar og:title, og:description, og:image para gerar o cartão. Mas configurar Twitter Card dedicado tem vários benefícios: ①você pode escolher o tipo de twitter:card mais adequado (especialmente o tipo de imagem grande summary_large_image, com OG pode que não use o estilo de imagem grande por padrão); ②você pode configurar twitter:site para vincular sua conta oficial do Twitter, aumentando conversões de seguimento; ③você pode otimizar o comprimento do título e descrição especificamente para o Twitter, distinguindo-os de OG. Recomenda-se configurar ambos, esta ferramenta suporta geração simultânea, a carga de trabalho é quase a mesma.
Quais consequências tem que title e meta description excedam o intervalo de comprimento recomendado? Serão penalizados?
Exceder o comprimento não será penalizado pelos motores de busca, mas será truncado. Nos resultados de busca do Google, a parte de title que excede aproximadamente 600 pixels de largura (chinês aproximadamente 50-60 caracteres) será truncada com reticências, os usuários não verão o título completo; meta description que excede aproximadamente 920 pixels de largura (chinês aproximadamente 120-160 caracteres) também será truncada. O problema de ser muito curto é desperdiçar o valioso espaço de exibição, não podendo transmitir completamente o valor da página e atrair cliques. Note que isto não é um limite de contagem de caracteres preciso, mas um limite de largura de pixels: caracteres de largura total, letras maiúsculas inglesas, letras largas como W/M, emoji ocupam mais largura, a exibição real pode truncar antes do que parece por contagem de caracteres. As dicas de cor desta ferramenta são referência de melhores práticas baseadas em contagem de caracteres.
O que significa escape de entidades HTML? Por que a ferramenta faz isto automaticamente?
Em HTML certos caracteres têm significado sintático especial, se forem escritos diretamente em valores de atributos quebrarão a estrutura HTML: a aspa dupla " é o terminador de valor de atributo, escrevê-la diretamente causará que a tag feche prematuramente; & é o caractere de início de escape de entidades; < e > são caracteres de início e fim de tag. Estes caracteres devem ser escritos em forma de entidade para serem exibidos corretamente: & → &, < → <, > → >, " → ", ' → '. Se seu title ou description contém caracteres especiais como &, aspas, colchetes angulares, escrever diretamente sem escape causará erros de sintaxe HTML, pode fazer com que todas as tags posteriores falhem. Esta ferramenta processa automaticamente estes escapes, você simplesmente insere o texto original diretamente, não precisa escapar manualmente.
Por que os rastreadores do Facebook/Twitter não conseguem capturar Meta tags da minha página escrita com React/Vue?
Porque frameworks frontend modernos como React, Vue, Angular por padrão são renderização do lado do cliente (CSR): o código-fonte HTML está vazio ou só tem um div contêiner, as Meta tags são inseridas dinamicamente no DOM após o navegador executar JavaScript. Mas a maioria dos rastreadores de plataformas sociais como o rastreador do Facebook facebookexternalhit, Twitterbot, LinkedInBot, rastreador do WeChat não executa JavaScript (ou sua capacidade de execução é muito limitada), no HTML original que capturam não há Meta tags, naturalmente não podem gerar cartões de compartilhamento. Soluções: ①usar SSR (renderização do lado do servidor) ou SSG (geração de sites estáticos), como frameworks Next.js, Nuxt.js, Gatsby, Astro, que renderizam Meta tags completas no código-fonte HTML desde o lado do servidor; ②usar serviços de prerenderização como prerender.io, Rendertron para devolver HTML estático aos rastreadores; ③usar serviços de geração de imagens OG dedicados para gerar tags dinamicamente.
canonical e og:url da mesma página devem ser preenchidos iguais?
Sim, devem ser consistentes. A tag canonical é para motores de busca, dizendo-lhes a URL preferida; og:url é para plataformas sociais, dizendo-lhes a URL única deste conteúdo para agregar contagens de curtidas, comentários e compartilhamentos. Que ambos apontem para a mesma URL é a melhor prática, pode evitar dispersão de peso e fragmentação de contagens sociais. Note que ambas devem ser URL absolutas completas (incluindo https://, domínio, caminho completo), não podem ser usados caminhos relativos. Se houver URL com parâmetros UTM, parâmetros de rastreamento, tanto canonical quanto og:url devem apontar para a URL limpa sem parâmetros.
Os links de páginas com noindex ainda serão rastreados pelos rastreadores? Transmitirão peso?
O significado de noindex é «não indexar esta página», não é «não rastrear» nem «não seguir links». O rastreador ainda rastreará páginas noindex (só assim pode ver a tag noindex), se robots meta também estabelecer follow (o valor padrão é follow), o rastreador continuará rastreando links na página. Mas sobre a transmissão de peso: a declaração oficial do Google é que páginas noindex eventualmente serão removidas do índice, e o peso dos links na página também não será transmitido normalmente (porque a página em si não está indexada). Então se você quer que o rastreador chegue a outras páginas através de uma página mas não quer que a página em si seja indexada, usar noindex,follow está bem, mas não espere que páginas noindex possam transmitir peso como páginas normais.
Em quais navegadores o theme-color funciona? O iOS Safari o suporta?
Situação de compatibilidade atual do theme-color: navegadores com kernel Chromium como Chrome/Firefox/Edge/Brave para Android o suportam desde há muito tempo, com o efeito mais óbvio; Safari suporta theme-color desde iOS 15 e macOS Monterey, mas a implementação do Safari é ligeiramente diferente: ajusta automaticamente de acordo com a cor de fundo da página, também suporta usar o atributo media para configurar cores separadas para modo claro/escuro. Chrome de desktop também começou a aplicar theme-color na barra de abas desde alguma versão. IE e navegadores antigos não o suportam, mas não tem problema se não for compatível, só não haverá efeito de cor do tema, não afeta nenhuma função. Recomenda-se estabelecer a cor do tema como a cor do header/barra de navegação do seu site, visualmente mais unificado.
Por que às vezes a descrição que é mostrada nos resultados de busca do Google não é a que escrevi?
O Google não garante usar a 100% a meta description que você escreve. Quando o Google determina que a description que você escreveu não é suficientemente relevante para a consulta de busca do usuário, ou a qualidade de description não é alta (por exemplo é enchimento de palavras-chave, igual em todo o site, não corresponde ao conteúdo), o Google extrairá automaticamente um trecho do conteúdo do corpo da página que considerar mais relevante para o termo de busca como descrição mostrada nos resultados de busca. Este é o comportamento normal do Google, não é um bug. Para aumentar a probabilidade de que description seja usada: ①escreva description única e que descreva com precisão o conteúdo para cada página; ②description inclui naturalmente palavras-chave centrais da página mas sem enchimento; ③controle o comprimento em um intervalo razoável não muito curto; ④o conteúdo de description realmente se reflete no corpo da página. Embora o Google às vezes reescreva, você ainda deve escrever description cuidadosamente: é o principal meio que você tem para controlar ativamente o efeito de exibição.
Após configurar as tags como verificar se têm efeito corretamente? Que ferramentas de verificação há?
Verificar Meta tags tem vários passos e ferramentas: ①primeiro use «Ver código-fonte da página» no navegador, busque no código-fonte HTML original se existem tags como title, description, og: e se seu conteúdo é correto (nota: é código-fonte não o painel Elements, porque o código-fonte é o devolvido pelo servidor, em CSR não serão vistos no código-fonte); ②use Facebook Sharing Debugger para verificar tags OG e atualizar cache; ③use Twitter Card Validator para verificar Twitter Card; ④use Google Rich Results Test para verificar tags básicas; ⑤use a ferramenta «Inspeção de URL» do Google Search Console para ver a página que o Google capturou realmente, estado de indexação; ⑥se for teste local, você pode usar a troca de user-agent do navegador para simular rastreadores de redes sociais, ou usar o comando curl com UA do Facebook para capturar e ver o HTML devolvido.
Cada página precisa configurar Meta tags separadamente? Funciona usar um conjunto de tags para todo o site?
Absolutamente não! Cada página deve ter title e meta description únicos. Se todas as páginas do site usarem o mesmo title e description, os motores de busca não poderão distinguir os temas de conteúdo de diferentes páginas: ①os motores de busca não sabem de que trata cada página, não poderão classificar corretamente; ②em resultados de busca todas as páginas mostram o mesmo título e descrição, os usuários não podem distinguir em qual clicar, CTR extremamente baixo; ③pode ser julgado por motores de busca como site de baixa qualidade afetando o peso de todo o site. Em princípio as tags OG e Twitter Card também deveriam ser diferentes para cada página. Só configurações em nível de site como theme-color, og:site_name, twitter:site podem ser unificadas em todo o site, outras tags devem ser configuradas individualmente de acordo com o conteúdo da página.
Ainda é preciso escrever meta keywords agora? Quantas são apropriadas?
Os principais motores de busca como Google, Bing, Baidu em 2026 já não usam meta keywords como fator de classificação, se você as escreve ou não, o que escreve, basicamente não afeta o SEO. Se seu CMS ou modelo tem este campo, gaste alguns segundos para preencher 3-5 palavras-chave centrais, não gaste muito tempo refletindo sobre a seleção e densidade de palavras-chave. O importante: não encha dezenas de palavras-chave, não repita a mesma palavra muitas vezes, não escreva palavras populares não relacionadas com a página: embora keywords em si não seja usada para classificação, encher de forma excessiva pode ser considerado pelos motores de busca como sinal de spam, não vale a pena. Se seu site não tem campo keywords ou você tem preguiça de preenchê-lo, deixá-lo completamente vazio também está bem, não tem nenhum impacto negativo na classificação.
Qual é a diferença entre robots meta tag e robots.txt? Qual tem maior prioridade?
Ambos têm diferentes níveis de ação e mecanismos: ①robots.txt é um arquivo de texto colocado no diretório raiz do site, controla o comportamento de rastreamento em nível de site ou diretório, por exemplo Disallow: /admin/ diz a todos os rastreadores que não rastreiem o diretório /admin/; mas robots.txt é um «acordo de cavalheiros», rastreadores conformes o respeitarão, e se páginas proibidas de rastrear são apontadas por links externos, ainda podem ser indexadas só sem descrição. ②robots meta é uma tag em nível de página, colocada no HTML head de cada página, pode controlar com precisão comportamentos de index/noindex/follow/nofollow de páginas individuais, com maior prioridade que robots.txt. ③X-Robots-Tag é em nível de cabeçalho de resposta HTTP, com a mesma função que robots meta mas devolvida através de cabeçalhos HTTP, pode ser usada para controle de indexação de arquivos não HTML (como PDF, imagens). Para evitar completamente que uma página seja indexada, você deve usar noindex (meta ou X-Robots-Tag), confiar apenas em robots.txt Disallow não garante que não será indexada.
Ao gerar Meta tags com esta ferramenta ainda preciso configurar dados estruturados Schema.org (JSON-LD)?
As Meta tags e os dados estruturados Schema.org são relações complementares, não de substituição. As Meta tags resolvem principalmente: título e descrição em páginas de resultados de motores de busca, cartões de compartilhamento social, controle básico de rastreamento. Os dados estruturados Schema.org (geralmente incrustados na página em formato JSON-LD) resolvem: resultados de busca ricos (Rich Snippets), como classificação por estrelas de produtos, preço e inventário, navegação de breadcrumb, data de publicação de artigos, blocos dobráveis FAQ, hora e local de eventos e outras visualizações aprimoradas, estas podem melhorar ainda mais o CTR. Recomenda-se que páginas importantes configurem ambas simultaneamente: ①Meta tags básicas (conteúdo gerado por esta ferramenta); ②dados estruturados Schema.org correspondentes ao tipo de página. Ambas não entram em conflito, otimizando conjuntamente o efeito de exibição de busca.
Solução de Problemas
Ao compartilhar links no Facebook/Twitter/LinkedIn não é exibida imagem, ou a imagem mostrada não é a og:image configurada
A URL de og:image usa caminho relativo ou localhost/127.0.0.1/IP de rede interna, os rastreadores de plataformas sociais não podem acessar endereços de rede pública A imagem está bloqueada por robots.txt, ou o servidor/WAF/CDN/firewall intercepta os User-Agent de rastreadores do Facebook/Twitter (facebookexternalhit/Twitterbot/LinkedInBot) O tamanho da imagem não cumpre os requisitos: og:image menor que 200×200 pixels será ignorada, imagem de summary_large_image menor que 300×157 será degradada O arquivo de imagem é muito grande (mais de 5MB-8MB) ou formato não compatível (só suporta JPG/PNG/WebP/GIF, não suporta SVG, algumas plataformas não suportam outros formatos) As tags são renderizadas dinamicamente no lado do cliente com JavaScript, os rastreadores de plataformas sociais não executam JS, só SSR/SSG pode ser rastreado A URL de og:image retorna erro 404/403/5xx, ou redireciona para página de login/página de erro A plataforma armazenou em cache a versão anterior sem imagem, após modificar tags você não usou a ferramenta oficial Debugger para forçar Scrape Again e atualizar o cache
Nos resultados de busca do Google o title é mostrado truncado e incompleto, ou o Google reescreveu automaticamente o título
O comprimento de title excede os 50-60 caracteres chineses (ou aproximadamente 600 pixels de largura), a parte excedida é truncada com reticências O title contém símbolos especiais de largura total, emoji ocupam largura adicional causando truncamento prematuro, o comprimento real mostrado é mais curto que a contagem de caracteres Enchimento de palavras-chave em title ou não corresponde ao conteúdo da página, o Google considera que seu título não é preciso e extrairá outro texto do corpo da página ou texto âncora para reescrever o título O title de cada página está repetido ou é muito semelhante, o Google não consegue distinguir as páginas e gerará automaticamente títulos diferentes O title só tem nome da marca sem descrição do tema da página, ou o nome da marca é muito longo ocupando muito espaço Foram usados muitos separadores como |, -, _, ou o método de separação não é padrão, causando que o Google julgue como enchimento de separadores A página tem hierarquia de títulos h1-h6 desordenada, ou múltiplas tags h1, o Google pode usar conteúdo h1 para reescrever title
Após configurar Meta tags a página mostra caracteres chineses ilegíveis, caracteres especiais anômalos, ou erros de sintaxe HTML
Não foi declarado <meta charset="UTF-8">, ou a posição de declaração não está no início de head (deve estar antes de title) Os valores de atributo content como meta description, og:description contêm aspas duplas (") sem escape, causando que a tag feche prematuramente, estrutura HTML desordenada O conteúdo contém caracteres especiais como &, <, > mas não foram escapados como entidades HTML (& deve ser escrito como &, < como <, > como >) A codificação de salvamento real do arquivo HTML não é UTF-8 (por exemplo foi salvo como GBK/GB2312), mas charset é declarado como UTF-8 causando falta de correspondência de codificação O cabeçalho Content-Type da resposta HTTP do servidor especificou codificação não UTF-8 como charset=GBK, anulando a declaração de meta charset Foi usado escape de entidades incorreto (por exemplo foram escapadas aspas fora de atributos com ", ou foram escapados caracteres que não precisavam de escape) O CMS ou motor de modelo escapou automaticamente repetidamente ao escapar (por exemplo & se tornou &amp;, mostrando-se como & em vez de &)
Foi configurada a tag canonical mas não tem efeito, URL duplicadas continuam sendo indexadas, ou canonical é ignorada por motores de busca
A URL para a qual canonical aponta retorna erro 404/403/5xx, ou redireciona para outras páginas, os motores de busca não podem acessar a versão canônica A página A tem canonical para B, a página B tem canonical para A (canonical circular), ou canonical em cadeia A→B→C→D confunde os motores de busca canonical aponta para páginas com conteúdo muito diferente (não conteúdo altamente duplicado/idêntico), os motores de busca consideram que canonical está configurada incorretamente e a ignoram canonical usa caminho relativo (como href="/page") em vez de URL absoluta completa (href="https://example.com/page") O site tem múltiplas versões de protocolo/domínio (http/https, www/sem www) com canonical mútua, mas o redirecionamento 301 não está bem configurado Páginas de paginação (como ?page=2, ?page=3) todas têm canonical para a primeira página, causando que o conteúdo posterior não seja indexado absolutamente, os motores de busca ignorarão esta canonical irracional A mesma página declara diferentes URL canonical simultaneamente através de tag link no HTML, cabeçalho HTTP Link: <...>; rel="canonical" e Sitemap, conflito de prioridade
Após modificar Meta tags ao compartilhar novamente ainda mostra o título, descrição ou imagem antigos, não vê o efeito de atualização
As plataformas sociais (Facebook/Twitter/LinkedIn) armazenam em cache a informação de OG/Twitter Card por muito tempo (pode durar de vários dias a várias semanas), não voltam a rastrear toda vez que se compartilha Não foram usadas as ferramentas oficiais de depuração das plataformas correspondentes (Facebook Sharing Debugger, Twitter Card Validator, LinkedIn Post Inspector) para executar Scrape Again/novo rastreamento para forçar atualização de cache CDN (Cloudflare, CDN da Alibaba Cloud, CDN da Tencent Cloud, etc.) armazenou em cache a página HTML antiga, os rastreadores capturaram a versão antiga em cache do CDN Cache do lado do servidor, cache SSR, plugins de cache do WordPress, cache de páginas Redis, etc. não foram eliminados, a saída ainda é HTML antigo A URL de recursos como og:image não mudou mas o conteúdo da imagem foi atualizado, navegadores e plataformas armazenam em cache baseando-se em URL, adicionar parâmetros de versão como ?v=2 é necessário para forçar atualização Após modificar tags a página não foi implementada corretamente em produção, foi modificado o arquivo local mas o ambiente de produção ainda é a versão anterior As Meta tags foram colocadas na área body do HTML ou inseridas dinamicamente com JS, os rastreadores nem sequer leram as tags novas, leram a versão armazenada em cache anteriormente
Foi configurado acidentalmente noindex,nofollow causando que todo o site ou páginas importantes não sejam indexadas pelo Google, não podem ser encontradas em buscas
A tag noindex,nofollow do ambiente de desenvolvimento/teste não foi removida ao lançar, todo o site foi publicado com noindex A opção «Aconselhar aos motores de busca que não indexem este site» no painel de administração de CMS como WordPress está marcada, adicionando automaticamente noindex a todas as páginas robots.txt também estabeleceu Disallow, causando que o rastreador nem sequer capture a página e menos veja noindex, mas se houver links externos apontando ainda pode ser indexado O cabeçalho de resposta HTTP retornou X-Robots-Tag: noindex (maior prioridade que a tag meta, muita gente não nota os cabeçalhos de resposta), por exemplo causado por configuração de Nginx/Apache, configuração de CDN CDN/WAF/plugin de segurança adicionaram automaticamente cabeçalho noindex à página (parte de plugins de segurança por operação errônea ou configuração padrão) Foram usadas diretrizes combinadas incorretas, por exemplo foi escrito noindex como index mas outros parâmetros entram em conflito, ou o modelo de todo o site inclui noindex só foi removido na página inicial e as páginas internas ainda o têm Ao migrar o site do ambiente de staging/teste para o ambiente de produção, não foram atualizadas base URL, canonical, configuração de robots, o noindex do ambiente de teste permaneceu no ambiente de produção
Glossário
- Meta tag
- Tag meta HTML, colocada na área head, usada para descrever metadados da página, transmitindo a navegadores, motores de busca e plataformas sociais o título, descrição, autor, regras de rastreamento e outra informação da página.
- title
- Tag de título HTML, define o título da aba do navegador e o título clicável na página de resultados do motor de busca (SERP), é a tag mais importante para SEO, comprimento recomendado 50-60 caracteres.
- meta description
- Tag meta de descrição da página, mostra o texto de descrição abaixo do título na SERP, não afeta diretamente a classificação mas afeta significativamente a taxa de cliques (CTR), comprimento recomendado 120-160 caracteres chineses.
- meta keywords
- Tag meta de palavras-chave, os primeiros motores de busca a usavam para julgar o tema da página, devido ao abuso o Google já anunciou em 2009 que não a usa mais, agora basicamente não tem valor SEO.
- canonical
- Tag de link canônico (rel="canonical"), diz aos motores de busca qual URL é a versão preferida entre várias URL semelhantes, usada para resolver problemas de conteúdo duplicado, URL com parâmetros, domínio preferido, etc.
- Open Graph
- Protocolo de metadados de compartilhamento social lançado pelo Facebook em 2010, usa tags com prefixo og: para controlar o estilo de cartão ao compartilhar links em plataformas sociais, compatível com quase todas as plataformas como Facebook, LinkedIn, WhatsApp, Slack.
- Twitter Card
- Protocolo de cartão de compartilhamento da plataforma Twitter/X, usa tags com prefixo twitter:, suporta quatro tipos de cartão: summary, summary_large_image, app, player, o Twitter as lê com prioridade sobre tags OG.
- og:type
- Tag de tipo de página Open Graph, especifica o tipo de conteúdo, valores comuns são website (site geral), article (artigo), product (produto), profile (perfil pessoal), determina como as plataformas sociais analisam o conteúdo.
- og:image
- Tag de imagem de compartilhamento Open Graph, especifica a URL da imagem de visualização do cartão de compartilhamento, tamanho recomendado 1200×630 pixels (proporção 1.91:1), deve ser uma URL absoluta de acesso público.
- twitter:card
- Tag de tipo Twitter Card, especifica o tipo de cartão de compartilhamento, valores são summary (imagem pequena), summary_large_image (imagem grande), app (aplicativo), player (reprodutor), é tag obrigatória para Twitter Card.
- robots meta
- Tag meta de controle de rastreamento, diz aos motores de busca em nível de página se indexar (index/noindex), se seguir links (follow/nofollow), se mostrar instante (noarchive), etc., com maior prioridade que robots.txt.
- noindex
- Uma das diretrizes robots, proíbe aos motores de busca indexar a página, a página não aparecerá em resultados de busca; o rastreador ainda rastreará a página para ler esta tag, mas não a indexará. Comumente usada em páginas de teste, páginas internas, páginas de baixo valor.
- nofollow
- Uma das diretrizes robots, proíbe aos rastreadores de motores de busca seguir todos os links da página (diferente de rel="nofollow" para links individuais), comumente usada em conteúdo gerado por usuários, links publicitários, páginas com links externos não confiáveis.
- theme-color
- Tag meta de cor do tema do navegador, define a cor da barra de endereços/barra de ferramentas do navegador móvel, efetiva em navegadores como Android Chrome, Safari 15+, proporcionando uma experiência de marca mais imersiva.
- author meta
- Tag meta de autor (name="author"), declara informação do criador do conteúdo da página, usada em blogs e sites de notícias junto com article:author para identificar o autor do conteúdo.
- HTML entity
- Caracteres de escape de entidades HTML, usados para exibir caracteres especiais de forma segura em HTML, como & representa &, < representa <, > representa >, " representa ", ' representa ', evitando erros de sintaxe e problemas XSS.
- SERP
- Search Engine Results Page, página de resultados do motor de busca, refere-se à página de resultados retornada após o usuário inserir palavras-chave em motores de busca como Google/Baidu, que contém elementos como título, descrição, URL, trechos multimídia ricos.
- CTR
- Click-Through Rate, taxa de cliques, refere-se à proporção de cliques de usuários após serem exibidos os resultados de busca. O CTR é um dos indicadores centrais de SEO, diretamente afetado pelo atrativo de title e meta description, e também é um sinal de usuário no algoritmo de classificação do Google.
- crawl budget
- Orçamento de rastreamento, o número de rastreamentos e quantidade de páginas que o motor de busca atribui ao seu site em um tempo determinado. Usar razoavelmente robots meta, canonical, noindex pode evitar desperdiçar orçamento de rastreamento em páginas de baixo valor, permitindo que páginas importantes sejam rastreadas com maior frequência.
- viewport
- Tag meta de janela de visualização (name="viewport"), tag essencial para páginas web responsivas modernas, controla a largura de renderização e escala inicial da página em dispositivos móveis, configuração padrão é width=device-width, initial-scale=1.0.
Tabela de lista de Meta tags comuns e descrição de atributos
| Nome da tag | Função | Exemplo de atributo/escrita | Notas |
|---|---|---|---|
title | Título da página, título da aba do navegador e título SERP | <title>Título da página | Marca</title> | Recomendado 50-60 caracteres, palavras-chave principais no início, marca no final, único para cada página |
meta description | Descrição da página, texto de descrição exibido na SERP | <meta name="description" content="..."> | Recomendado 120-160 caracteres chineses, inclui palavras-chave e CTA, único para cada página |
meta keywords | Tag de palavras-chave | <meta name="keywords" content="palavra1,palavra2,palavra3"> | Motores de busca principais como Google/Bing/Baidu já não a usam, não é necessário configurá-la com prioridade |
link canonical | Link canônico, especifica URL preferida | <link rel="canonical" href="https://example.com/page"> | Deve ser escrita URL absoluta completa, resolve problemas de conteúdo duplicado, não configurar em cadeia |
meta robots | Controle de rastreamento, regras de indexação/acompanhamento em nível de página | <meta name="robots" content="index,follow"> | Maior prioridade que robots.txt, noindex é o que realmente proíbe a indexação |
meta charset | Declaração de codificação de caracteres | <meta charset="UTF-8"> | Deve ser colocada no início de head, páginas web modernas usam UTF-8 uniformemente |
meta viewport | Controle de viewport móvel | <meta name="viewport" content="width=device-width, initial-scale=1.0"> | Essencial para páginas web responsivas, deve ser configurada ou a experiência móvel será muito ruim |
meta author | Informação de autor da página | <meta name="author" content="Nome do autor"> | Identifica o criador do conteúdo, usado em blogs/sites de notícias |
meta theme-color | Cor do tema do navegador móvel | <meta name="theme-color" content="#2563eb"> | Compatível com Android Chrome/Safari 15+, recomendado usar cor principal da marca |
og:title | Título de compartilhamento Open Graph | <meta property="og:title" content="..."> | Título de cartão de compartilhamento social, pode ser diferente do SEO title, mais atraente para cliques |
og:description | Descrição de compartilhamento Open Graph | <meta property="og:description" content="..."> | Descrição de cartão social, recomendado dentro de 200 caracteres |
og:image | Imagem de compartilhamento Open Graph | <meta property="og:image" content="https://.../img.jpg"> | Recomendado 1200×630 pixels, URL absoluta, acesso público, arquivo <5MB |
og:url | URL canônica Open Graph | <meta property="og:url" content="https://example.com/page"> | Deve ser consistente com canonical, usado para agregar contagens de curtidas e compartilhamentos |
og:type | Tipo de conteúdo Open Graph | <meta property="og:type" content="website"> | Opcional website/article/product/profile, diferentes tipos suportam diferentes atributos estendidos |
og:site_name | Nome do site Open Graph | <meta property="og:site_name" content="GeekFormat"> | Mostra o nome geral do site, diferente do título da página |
twitter:card | Tipo de Twitter Card | <meta name="twitter:card" content="summary_large_image"> | Opcional summary/summary_large_image/app/player |
twitter:site | Conta oficial do Twitter | <meta name="twitter:site" content="@username"> | Preencha o @handle do Twitter do site/marca |
twitter:image | Imagem de Twitter Card | <meta name="twitter:image" content="https://.../img.jpg"> | Se não for preenchida é usada og:image como reserva, tipo summary usa 1:1, large usa 2:1 |
Tabela de cenários de aplicação de og:type
| Valor og:type | Cenários de aplicação | Proporção de imagem recomendada | Tags estendíveis |
|---|---|---|---|
website | Página inicial do site, páginas gerais, sobre nós, contato e outras páginas que não são de conteúdo/produto | 1.91:1 (1200×630) | Tags og: básicas são suficientes, sem extensões especiais |
article | Artigos de blog, comunicados de imprensa, documentos de conhecimento, tutoriais, conteúdo de coluna e outro conteúdo relacionado ao tempo | 1.91:1 (1200×630) | article:published_time (hora de publicação), article:modified_time (hora de modificação), article:author (autor), article:section (categoria), article:tag (etiqueta) |
product | Páginas de detalhe de produtos de e-commerce, páginas de produtos, páginas de serviços pagos, páginas de destino de produtos SaaS | 1.91:1 (1200×630) imagem de produto recomendada quadrada ou 4:3 | product:price:amount (preço), product:price:currency (moeda como CNY/USD), product:availability (estado de inventário), product:brand (marca) |
profile | Páginas de perfil pessoal, páginas de dados de usuário, páginas de autor, páginas de currículo pessoal | Imagem de avatar 1:1 ou imagem de capa 1.91:1 | profile:first_name (nome), profile:last_name (sobrenome), profile:username (nome de usuário), profile:gender (gênero) |
Tabela de tipos de twitter:card
| Tipo twitter:card | Estilo de cartão | Requisitos de imagem | Cenários de aplicação | Campos obrigatórios adicionais |
|---|---|---|---|---|
summary | Cartão de resumo com imagem pequena, imagem pequena à esquerda/acima, texto à direita/abaixo | Mínimo 144×144 pixels, quadrado 1:1, <5MB | Artigos comuns, páginas, páginas de ferramentas, conteúdo geral | Sem campos adicionais obrigatórios, preencher tags básicas é suficiente |
summary_large_image | Cartão de resumo com imagem grande, banner grande de largura completa na parte superior, forte impacto visual | Mínimo 300×157 pixels, recomendado 1200×675, proporção aproximadamente 2:1, <5MB | Artigos de blog, páginas de produtos, páginas de eventos, conteúdo que espera alta taxa de cliques (recomendado usar por padrão) | Sem campos adicionais obrigatórios, certifique-se de que o tamanho da imagem cumpra os requisitos |
app | Cartão de download de aplicativo, mostra ícone do aplicativo, nome, classificação, botão de download | Logo do aplicativo imagem quadrada, 144×144 ou mais | Páginas de download de aplicativos iOS/Android, páginas de promoção de aplicativos móveis | twitter:app:name:iphone/ipad/googleplay, twitter:app:id:iphone/ipad/googleplay (ID da loja de aplicativos), twitter:app:url:iphone/ipad/googleplay (scheme personalizado) |
player | Cartão de reprodutor de vídeo/áudio, incorpora diretamente reprodutor multimídia no fluxo | Imagem de capa do reprodutor, a página do reprodutor deve ser HTTPS | Páginas de conteúdo de vídeo, podcasts, páginas de áudio, páginas de transmissão ao vivo | twitter:player (URL do reprodutor, HTTPS), twitter:player:width (largura do reprodutor), twitter:player:height (altura do reprodutor), twitter:player:stream (endereço de fluxo de vídeo/áudio), requer aprovação de lista branca do Twitter |
- Simulador de Daltonismo
- Conversor de cores
- Conversor de .htaccess para Nginx
- Conversor de SQL
- Parser de Cookies
- Gerador de Expressões Cron
- Validador de Expressões Cron
- Formatador de CSS
- Compressor de CSS
- CSV para Excel
- Conversor de Moedas
- Comparador de Diferenças
- Gerador de Favicon
- Formatador de XML
- Conversor Hexadecimal
- Formatador de HTML
- Compressor de HTML
- HTML para Markdown
- Markdown para HTML
- Formatar JavaScript
- Compressor de JS
- Formatador JSX
- Compressor de JSX
- Agrupamento de palavras-chave
- Gerador Lorem Ipsum
- Gerador de Tabela Markdown
- Gerador de Meta Tags
- Gerador de Senhas
- Verificador de Força de Senha
- Gerador de código QR/código de barras
- Testador de Expressões Regulares
- Gerador de Slug
- Gerador de SQL
- Formatador SQL
- Contador de Palavras
- Ferramenta de Tempo
- Formatador de TS
- Compressor de TS
- Formatador de TSX
- Compressão TSX
- Conversor Unix Timestamp
- Gerador UUID
- Formatador de YAML
- Conversor de caixa