Gerador de meta tags

O que é um gerador de meta tags

Pega no pouco de que precisam um resultado de pesquisa e um cartão de partilha — um título, uma descrição, um URL, uma imagem — e escreve as tags que os transportam: o elemento title, a meta descrição, as propriedades Open Graph que o Facebook e o LinkedIn lêem, e os nomes do cartão do Twitter. Copia o bloco para o cabeçalho da sua página e está feito.

Este também pré-visualiza o resultado e mede-o. Tudo corre no seu navegador: nada é enviado e não há conta.

A medição é a parte que vale a pena explicar, porque quase todas as outras ferramentas do género medem a coisa errada.

Como usar o gerador

1. Preencha os campos. Título, descrição, URL, nome do site e imagem de partilha. Escolha o tipo de conteúdo e o estilo do cartão do Twitter. Os campos vazios são omitidos: uma tag com valor vazio é pior do que tag nenhuma.
2. Arraste a largura da pré-visualização. A pré-visualização é redesenhada e o painel diz-lhe se o seu título cabe ou é cortado a essa largura. Não há um valor correcto, e é precisamente essa a questão.
3. Copie as tags. O bloco é gerado com cada valor escapado para atributo HTML, por isso um e comercial no seu título ou aspas na sua descrição não podem partir a marcação.

A regra dos 60 caracteres mede a grandeza errada

O conselho está por todo o lado: não passe dos 60 caracteres no título nem dos 155 na descrição. Vale a pena perguntar de onde vêm esses números, porque a própria documentação da Google diz outra coisa. Na página que descreve como são gerados os links de título, a Google escreve que o título é cortado nos resultados conforme necessário, «normalmente para caber na largura do dispositivo». A largura do dispositivo. Nem uma contagem de caracteres, nem um orçamento fixo de píxeis: um telemóvel e um monitor largo cortam em sítios diferentes, pelo que nenhum número único pode servir aos dois.

Essa mesma página merece ser lida por outra razão. Enumera as fontes de onde a Google tira um link de título: o elemento title, o título visual principal, os cabeçalhos, a tag og:title, outro texto grande e destacado, e até o texto das ligações que apontam para a página a partir de outros sites. O seu elemento title é uma entrada entre várias. Afiná-lo a uma contagem de caracteres trata-o como uma saída garantida, e não é.

Quanto vale então uma contagem de caracteres como indicador da largura? Medimos. Sessenta caracteres de Arial a 20 píxeis são 267 píxeis se forem todos ele minúsculo, e 1133 se forem todos vê duplo maiúsculo — um factor de 4,2. Não é uma aproximação com alguma margem de erro; é outra grandeza que por acaso está correlacionada.

Em texto real a correlação melhora, mas continua frouxa. Em 1193 títulos reais de páginas em cinco línguas — os deste próprio site, medidos sobre o HTML compilado —, o número de caracteres que cabe num orçamento fixo foi de 47 a 72. A regra dos «60 caracteres» acerta em média e falha até um quinto em qualquer título concreto. E a discordância entre as duas regras depende inteiramente do orçamento de píxeis que se assuma: discordam em 16,7% desses títulos a 512 píxeis, em 5,0% a 580 e em 7,2% a 600. O número mais interessante é o do meio. A regra dos caracteres parece melhor perto dos 580 píxeis porque é aí que caem sessenta caracteres de prosa média, o que faz dela uma coincidência calibrada sobre um palpite acerca de um orçamento que ninguém publica, e não uma regra.

Por isso esta ferramenta não lhe dá um limite. Mede o seu título com o motor de texto do seu próprio navegador, mostra a largura em píxeis e deixa-o mover a largura da pré-visualização para ver onde o título cai. Se quiser um alvo, aponte a que o sentido sobreviva ao corte, e não a acertar num número.

Limitações assumidas

A pré-visualização é uma aproximação de um resultado de pesquisa, não uma simulação. A disposição da Google muda, os resultados levam ligações internas, datas, migalhas e distintivos que deslocam o espaço disponível, e o telemóvel e o computador diferem. Encare o controlo de largura como forma de ver quanta folga o seu título tem, não como uma previsão.

Fora da Google ninguém conhece o orçamento, e as fontes que citam um discordam entre si em mais de 17%: circulam 512, 580 e 600 píxeis, e também 18 e 20 píxeis de corpo. Esta página escolhe Arial a 20 píxeis para o título por ser a combinação mais citada, e diz claramente que isso é um relato e não uma especificação.

A medição é feita com o canvas do navegador e não com uma tabela de larguras embutida, e essa escolha pesa mais do que parece. Uma tabela não consegue aplicar kerning, e com uma escrita cursiva não é apenas imprecisa mas falsa: as letras árabes ligam-se e mudam de forma consoante as vizinhas, pelo que um texto desenhado é mais estreito do que a soma das suas letras isoladas. O nosso próprio script de medição tem exactamente esse defeito, e é por isso que os seus valores árabes exageram a largura — e por isso a ferramenta que está a usar não funciona assim.

A contagem de caracteres aqui conta o que chamaria caracteres, por segmentação de grafemas. Não é o que fazem a maioria dos contadores. Um emoji de foguetão é um caractere mas duas unidades para o String.length do JavaScript; um emoji de família formado por quatro pessoas unidas por junções de largura zero é um caractere e onze unidades; uma letra acentuada escrita como base mais marca combinante é um caractere e duas unidades. Se o seu título tiver alguma dessas coisas, um contador feito do modo habitual indica um número que não conta nada que um leitor consiga ver, e esta ferramenta mostra-lhe os dois.

Por fim, as tags são geradas mas não validadas contra um rastreador real. Se a sua imagem de partilha está acessível, tem a proporção certa ou está bloqueada por uma regra de robots é coisa que só um pedido lhe pode dizer, e pedir o seu URL exigiria um servidor, coisa que este site não usa para nada além de um modelo de texto.

Porque é gratuito

Escrever uma dúzia de linhas de marcação e medir um pouco de texto é trabalho que a sua própria máquina faz num milissegundo. Não há envios, nem conta, nem nada para marcar de água.

Se quiser rever o HTML onde vai colar isto, o codificador de entidades HTML e o formatador de HTML deste site tratam desse lado, também sem enviar nada.