Monte o título, a descrição, o link canônico, as etiquetas Open Graph e o cartão X de uma página.
Que etiquetas são escritas
Uma página precisa de um título, uma descrição, um URL canônico, etiquetas Open Graph e um cartão X. Esta página escreve essas etiquetas e conta o título e a descrição.
Como se usa
Preencha Título e Descrição. A conta fica ao lado de cada campo e atualiza enquanto escreve.
URL canônico, URL da imagem, Texto alternativo, Nome do site, og:type, og:locale, Cartão X e Site X são opcionais. og:type começa em website. Cartão X começa em summary_large_image.
Converter refresca as etiquetas. Mostrar exemplo põe o título em Ada Lovelace notes, a descrição em Short notes on the analytical engine, with a portrait and a canonical page, o URL canônico e a imagem og em https://example.com/ada e https://example.com/ada.jpg, o alt em Portrait of Ada, o site em Example, og:type em article, og:locale em en_US, o cartão em summary_large_image e o site X em @example.
Esse resultado inclui um elemento title, name="description", rel="canonical", og:title, og:description, og:url, og:image, og:image:alt, og:site_name, og:type content="article", og:locale content="en_US", twitter:card content="summary_large_image", twitter:title, twitter:description, twitter:image e twitter:site content="@example".
Limpar tudo esvazia os campos, repõe og:type em website e o cartão em summary_large_image. Copiar resultado copia as etiquetas.
Contas e campos vazios
A conta do título e a da descrição mostram-se sempre. Passados 60 caracteres, a linha do título avisa. Passados 160 caracteres, a linha da descrição avisa. As etiquetas escrevem-se na mesma.
Um campo opcional vazio fica de fora. As aspas do texto são escapadas. og:type é website ou article. O valor do cartão X é summary ou summary_large_image.
Quando usar
Esboçar as etiquetas do head de um artigo.
Ver que um título passou de 60 caracteres antes de o publicar.
Mudar o cartão entre summary e summary_large_image.
Perguntas
Um título longo é cortado aqui?
O aviso é uma conta. O elemento title continua com o texto completo.
Por que se usa twitter: num cartão X?
O nome meta do cartão no head da página continua a ser twitter:card.