Aprendi o valor das meta tags da maneira embaraçosa Anos atrás EU enviei uma landing page da qual me orgulhava, postei o link em alguns lugares e assisti-o aparecer em todos os lugares como um URL simples sem título, sem descrição e um ícone de imagem quebrado A página em si estava bem - mas EU nunca tinha adicionado Gráfico aberto tags, então cada plataforma social caiu para trás para adivinhar, e cada um deles adivinhou errado O conteúdo era bom e a apresentação do link era lixo, o que na prática significava muito menos cliques do que a página merecia.
Meta tags são o pequeno bloco de HTML que decide como sua página parece em todos os lugares, exceto na própria página: no Google' s resultados, em um Slack unfurl, em um cartão do Facebook ou LinkedIn, em um tweet Eles são fáceis de errar porque existem três padrões sobrepostos - tags SEO padrão, Open Graph e Twitter Cards - e cada um quer nomes de propriedade ligeiramente diferentes para o que é muitas vezes a mesma informação Eu construo Toolz.dev e escrevo muito conteúdo em torno dele, então eu configuro metadados constantemente e construí o Gerador de meta tags para produzir um bloco de tags correto, completo e pronto para cópia a partir de um conjunto de entradas - com avisos de comprimento para que eu nunca envie um título que seja truncado novamente.
tl;dr: Meta tags controlam seu trecho de pesquisa e suas visualizações de links sociais Você precisa de três conjuntos sobrepostos - tags de SEO padrão, Open Graph para a maioria das plataformas e Twitter Cards - e eles compartilham a maior parte de seu conteúdo, mas usam nomes de atributos diferentes Gerador de meta tags Constrói todos os três de um formulário, avisa quando seu título passa ~60 caracteres ou passa de descrição de ~160, escapa do seu texto com segurança e pode emitir um bloco JSON-LD correspondente, tudo no seu navegador.
O que são metatags e por que elas importam?
Meta tags são elementos que vivem dentro de uma página <head> e leve informações sobre a página em vez de conteúdos apresentados nela. o <title> etiqueta e o <meta name="description"> As marcas são as duas mais antigas e importantes: juntos, eles geralmente formam o título clicável e a linha de resumo cinza em um resultado de pesquisa do Google. Faça-os bem e seu resultado lê bem e ganha cliques; deixe-os de fora e os mecanismos de pesquisa sintetizam algo do texto da sua página, muitas vezes desajeitadamente.
Além desses básicos, há dois padrões sociais. Open Graph, originalmente do Facebook, mas agora homenageado pelo LinkedIn, Slack, Discord, Pinterest, WhatsApp e muitos mais, usa tags como og:title, og:description, e og:image Para controlar como um link compartilhado aparece como um cartão. Os cartões do Twitter fazem o mesmo trabalho para Twitter/X com twitter: tags. Há uma sobreposição pesada - o título e a descrição são geralmente idênticos em todos os três - mas cada plataforma lê seu próprio namespace, então você tem que fornecer todos os três para cobrir todos os lugares onde seu link possa ser compartilhado.
A razão pela qual isso importa é a alavancagem. O mesmo conteúdo ganha dramaticamente mais engajamento quando a visualização do link é completa e atraente do que o que está vazio. Um bom título e uma descrição elevam o clique da pesquisa; um cartão de gráfico aberto adequado levanta cliques de cada compartilhamento social. As metatags são uma configuração única por página que continua valendo a pena toda vez que a página é encontrada ou compartilhada, o que é exatamente o tipo de trabalho que vale a pena fazer com cuidado. o Gerador de meta tags Existe de modo que a configuração é uma tarefa de preenchimento do formulário em vez de uma cópia-cola de memória.
Como o gerador de meta tags constrói as tags?
O gerador pega um único conjunto estruturado de entradas - título, descrição, imagem, URL, nome do site e um punhado de opções - e as transforma em três blocos coordenados de HTML. Compreender o fan-out explica por que um formulário produz tantas tags.
Em seus campos principais, ele primeiro escreve o Tags primárias: o <title>, a meta descrição e palavras-chave opcionais, autor, robôs, linguagem, cor do tema e um link canônico. Em seguida, ele reutiliza o mesmo título, descrição e imagem para escrever o Abrir bloco de gráfico com o og: nomes de propriedades, adicionando og:type, og:url, e og:site_name. Finalmente, ele escreve o bloco de cartão do twitter por twitter: nomes, incluindo o estilo do cartão e o punho mapeado para twitter:site e twitter:creator. Como todos os três extraem das mesmas entradas, eles permanecem sincronizados automaticamente - você não pode dar acidentalmente um título ao Facebook e outro ao Twitter.
Dois detalhes tornam a saída segura para colar. Primeiro, apenas os campos que você preenche na verdade são tags de produção, para que você nunca envie vazio content="" atributos. Em segundo lugar, todos os valores são escapados em HTML: uma cotação, um comercial ou um suporte angular em sua descrição são convertidos em sua entidade para que não possam sair do atributo e corromper sua marcação. o Gerador de meta tags Também, opcionalmente, emite um bloco de dados estruturados JSON-LD correspondente, que é uma maneira separada, mas complementar, de descrever a página para os mecanismos de pesquisa.
Qual deve ser o tempo de descrição do título e meta-descrição?
Esta é a pergunta que atrapalha a maioria das pessoas, e a resposta é sobre a largura da tela, não um limite de caracteres rígidos. Os mecanismos de pesquisa truncam títulos e descrições que excedem o espaço que eles alocam, portanto, os limites práticos são os pontos além dos quais seu texto começa a ser cortado com uma reticência.
Para títulos, vise cerca de 50 a 60 caracteres O Google renderiza títulos de até cerca de 600 pixels de largura, o que equivale a cerca de 60 caracteres para texto típico, e depois disso corta o final Para meta descrições, vise cerca de 120 a 160 caracteres; as descrições podem chegar a cerca de 160 antes do truncamento na área de trabalho e o celular às vezes é mais curto Nenhum dos limites é exato porque ambos são medidos em pixels, não em caracteres - um título cheio de letras largas trunca antes de um cheio de pixels estreitos - mas as diretrizes de caracteres estão próximas o suficiente para serem projetadas.
o Gerador de meta tags conta personagens ao vivo e avisa-o enquanto você cruza os limites: um título acima de 60 ou uma descrição acima de 160 fica sinalizado para que você possa aparar antes de enviar Também te cutucar quando um título é muito curto, porque um título de 20 caracteres desperdiça espaço que você poderia usar para palavras-chave Estas são diretrizes ao invés de regras - um título ligeiramente longo não é uma catástrofe - mas ver a contagem enquanto você escreve mantém você honesto Se você está afinando títulos e descrições muito, o contador de palavras É útil para uma cópia mais longa que precisa atingir um alvo de comprimento.
Qual é a diferença entre tags de SEO, Open Graph e cartões do Twitter?
Eles atendem consumidores diferentes e saber qual é o que impede você de pensar que terminou quando você cobriu apenas um. Veja como os três conjuntos se alinham para os campos que compartilham.
| propósito | Etiqueta de SEO | Gráfico aberto | cartão do twitter |
|---|---|---|---|
| Título da página | <title> |
og:title |
twitter:title |
| resumo | meta name="description" |
og:description |
twitter:description |
| imagem de visualização | - | og:image |
twitter:image |
| endereço canônico | link rel="canonical" |
og:url |
twitter:url |
| Estilo do cartão | - | og:type |
twitter:card |
| atribuição | meta name="author" |
og:site_name |
twitter:site |
A coluna SEO é o que o Google lê para o resultado da pesquisa A coluna Open Graph é o que a maioria das plataformas sociais e de bate-papo lê para seus cartões de link A coluna do Twitter é o que o Twitter/X lê A sobreposição é óbvia - título e descrição se repetem em todos os três - mas porque cada plataforma só olha em seu próprio namespace, omitir uma coluna significa que a plataforma cai de volta para adivinhar O Gerador de meta tags Preenche as três colunas de um formulário com precisão para que você nunca deixe uma plataforma suspeitendo.
Ainda preciso de dados estruturados JSON-LD?
Meta tags e dados estruturados respondem a perguntas diferentes, de modo que as úteis se complementam em vez de substituir umas às outras. Meta tags informam às plataformas como exibir sua página; JSON-LD informa aos mecanismos de pesquisa sobre o que é sua página de uma maneira legível à máquina que pode desbloquear resultados ricos.
JSON-LD é um bloco de JSON, envolto em um <script type="application/ld+json"> tag, que descreve sua página como uma entidade digitada - um WebSite, um Artigo, um Produto, uma Receita e assim por diante - com propriedades nomeadas Os mecanismos de pesquisa a usam para entender relacionamentos e, nos casos certos, para mostrar resultados aprimorados, como bylines de artigos, classificações de estrelas ou acordeões de perguntas frequentes diretamente na pesquisa Não controla seu trecho da mesma forma que o título e a descrição; adiciona uma camada de significado no topo.
o Gerador de meta tags emite um bloco inicial JSON-LD ao lado das meta tags, digitado como WebSite ou Artigo com base no seu tipo Open Graph e preenchido a partir dos mesmos campos É uma base sólida que você pode estender com propriedades específicas do tipo Os dados estruturados valem a pena adicionar sempre que você quiser ser elegível para resultados ricos, embora não seja uma alavanca de classificação mágica - ele permite recursos, não os força Para a imagem mais ampla de como essas peças se encaixam, o Kit de ferramentas para desenvolvedores web O RoundUp cobre as ferramentas ao redor que uso.
Casos de uso comuns para um gerador de metatags
Lançando uma nova página ou site
O óbvio. Cada nova página precisa de um título, uma descrição e um cartão social, e digitar o conjunto completo de SEO, Open Graph e Tags do Twitter à mão é tedioso e propenso a erros. Preencher o formulário uma vez e copiar um bloco correto completo transforma uma tarefa complicada em trinta segundos, e os avisos de comprimento significam que a página é iniciada com um trecho que é exibido totalmente em vez de ser truncado no primeiro dia.
Corrigindo visualizações de links ruins ou ausentes
Quando um link compartilhado aparece sem imagem ou com o texto errado, a causa quase sempre está faltando ou malformada Open Graph tags Reconstruindo as tags com o gerador - certificando-se og:image, og:title, e og:description estão todos presentes e corretos - corrige a visualização Após a atualização, o cache relevante da plataforma & #39; s às vezes precisa ser atualizado através de sua ferramenta de depuração, mas as próprias tags saem corretamente.
Padronização de metadados em uma equipe
Em um projeto com vários colaboradores, metatags derivam: uma página tem tags do Twitter, outra não, uma terceira tem uma descrição com o dobro do comprimento recomendado. Usar um único gerador como referência para o que um conjunto de tags completos se parece, mantém todos produzindo a mesma forma de metadados. A saída funciona como documentação de quais tags o projeto espera.
Preparando metadados para uma estrutura
Em Next.js, Nuxt, React ou similar, você não cola RAW <meta> tags - você alimenta valores em uma API de cabeçalho ou metadados O gerador ainda é útil como fonte de verdade para quais tags e valores você precisa: preencha o formulário, leia o conjunto completo e traduza-o em seu objeto de metadados framework' Ele remove as suposições sobre quais og: e twitter: Campos a serem incluídos.
Por que gerar metatags no navegador?
o Gerador de meta tags executa inteiramente do lado do cliente Os títulos, descrições, URLs e links de imagem que você insere permanecem em seu navegador e nunca são carregados, e a ferramenta funciona offline uma vez carregada Que a privacidade importa porque você está frequentemente preparando metadados para páginas que ainda não são públicas - um produto inédito, uma campanha client' s draft, uma ferramenta interna Colar isso em um gerador do lado do servidor significa entregar seus planos não anunciados para outra pessoa & #39; s logs; fazê-lo no navegador significa que ele nunca sai da sua máquina Privacidade de dados em ferramentas online O guia explica porque eu trato isso como inegociável.
O trabalho de metadados também se conecta a algumas tarefas vizinhas. o gerador de slug Construa o URL limpo que seu canônico e og:url As tags apontam para. o codificador de entidades html É útil quando você precisa escapar de um personagem teimoso. e o Codificador/decodificador de URL Lida com a codificação dos parâmetros de consulta que às vezes ficam em uma URL canônica. Juntos, eles cobrem os trabalhos pequenos e exigentes que envolvem o envio de uma página corretamente.
FAQ
Quais metatags o gerador cria?
Ele cria as tags SEO padrão - título, descrição, palavras-chave, autor, robôs, linguagem, tema-cor e canônico - além de tags Open Graph como og: title, og: description, og: image e og: url, e as tags correspondentes do Twitter Card Ele também pode emitir um bloco de dados estruturados JSON-LD. Apenas os campos que você preenche produzem tags, para que a saída permaneça limpa.
Qual deve ser o meu título e meta descrição?
Apontar para um título de cerca de 50 a 60 caracteres e uma descrição de cerca de 120 a 160 caracteres. O Google trunca o texto desses pontos porque mede a largura em pixels, não os caracteres exatos. O gerador conta enquanto você digita e avisa quando é provável que um título ou descrição sejam cortados nos resultados da pesquisa.
O que são tags de grafos abertos e eu preciso delas?
As tags do Open Graph controlam a aparência da sua página quando compartilhadas no Facebook, LinkedIn, Slack, Discord e muitas outras plataformas. Sem eles, um link compartilhado pode mostrar nenhuma imagem ou texto de fallback estranho. Se você deseja visualizar links de links atraentes e previsíveis em qualquer lugar do seu conteúdo, as tags de grafo aberta são fortemente recomendadas e o gerador as cria para você.
Qual é a diferença entre os dois tipos de cartão do Twitter?
O cartão de resumo mostra uma pequena miniatura quadrada ao lado do título e da descrição, enquanto summary_large_image mostra uma imagem de banner grande acima deles. Use o cartão de imagem grande quando tiver uma imagem de compartilhamento ampla e de alta qualidade que deseja dominar a visualização e use o resumo para um cartão mais compacto. O gerador permite que você alterne entre eles e escreva o valor correto do Twitter:Card.
Onde eu coloco as metatags geradas?
Cole o bloco dentro do elemento principal da sua página HTML, idealmente próximo ao topo antes de outros scripts. Em uma estrutura como Next.js, React ou Vue, adicione as tags equivalentes por meio da API Head ou Metadata da estrutura, usando o HTML gerado como sua referência para exatamente quais tags e valores a incluir.
Ainda preciso de uma url canônica se tiver tags de grafo aberto?
Sim. O link canônico informa aos mecanismos de pesquisa qual URL é a versão oficial de uma página para evitar problemas de conteúdo duplicado, enquanto og:url define o URL usado em pré-visualizações sociais. Eles servem a propósitos diferentes, embora os valores geralmente sejam idênticos, portanto, definir os dois é uma boa prática.
O gerador de meta tags é gratuito e privado?
Sim. É totalmente gratuito, sem limites, e cada tag é construída em JavaScript dentro do seu navegador. Os links de texto, URLs e imagens que você insere nunca são enviados a um servidor, portanto, você pode preparar metadados com segurança para páginas não publicadas ou internas.
A adição de metatags melhora minha classificação de pesquisa?
Meta tags ajudam os mecanismos de pesquisa e as plataformas sociais a exibirem sua página corretamente, mas são um fator entre muitos. Um título e uma descrição fortes podem aumentar a taxa de cliques e os dados estruturados podem permitir resultados avançados, mas a qualidade do conteúdo, links e a integridade do site ainda geram classificações. Trate boas metatags como base necessária, em vez de um atalho de classificação.
