Na seção de estrutura do documento, você aprendeu sobre os componentes que (quase) sempre encontra no <head> de um documento HTML. Embora tudo em <head>, incluindo <title>, <link>, <script>, <style> e os <base> menos usados, seja na verdade "metadados", existe uma tag <meta> para metadados que não pode ser representada por esses outros elementos.
A especificação inclui vários metatipos, e há muitos outros tipos de meta compatíveis com aplicativos que não estão em nenhuma especificação oficial. Nesta seção, vamos abordar os atributos e valores incluídos nas especificações, alguns metadados e valores de conteúdo comuns e alguns metadados que são extremamente úteis para otimização de mecanismos de pesquisa, postagens em mídias sociais e experiência do usuário que não são oficialmente definidas pelo WHWG ou W3C.
As tags <meta> necessárias, revisadas novamente
Vamos rever as duas tags <meta> necessárias já abordadas, a declaração do conjunto de caracteres e a metatag da janela de visualização, para entender melhor a tag <meta> no processo.
O atributo charset do elemento <meta> surgiu de uma maneira única. Originalmente, os metadados do conjunto de caracteres eram escritos como <meta http-equiv="Content-Type" content="text/html; charset=<characterset>" />, mas muitos desenvolvedores digitaram incorretamente o atributo content como content="text/html" charset="<characterset>", de modo que os navegadores começaram a oferecer suporte ao conjunto de caracteres como um atributo. Agora ele está padronizado no padrão HTML atual como <meta charset="<charset>" />, em que, para HTML,<charset> é a string "utf-8" que não diferencia maiúsculas de minúsculas.
Você deve ter notado a meta-declaração do conjunto de caracteres original usada para incluir o atributo http-equiv. Essa é a abreviação de "http-equivalent", pois a metatag é basicamente replicando o que poderia ser definido em um cabeçalho HTTP. Além da exceção charset, todas as outras metatags definidas na especificação HTML WHWG contêm o atributo http-equiv ou name.
Metatags oficiais definidas
Há dois tipos principais de metatags: diretivas pragma, com o atributo http-equiv, como a metatag de conjunto de caracteres, e metatipos nomeados, como a metatag da janela de visualização com o atributo name, que discutimos na seção Estrutura do documento. Os metatipos name e http-equiv precisam incluir o atributo content, que define o conteúdo para o tipo de metadados listados.
Diretivas do pragma
O atributo http-equiv tem como valor uma diretiva pragma. Essas diretivas descrevem como a página precisa ser analisada. Os valores de http-equiv compatíveis ativam as diretivas de configuração quando não é possível definir cabeçalhos HTTP diretamente.
A especificação define sete diretivas pragma, a maioria delas com outros métodos de definição. Por exemplo, embora seja possível incluir uma diretiva de linguagem com <meta http-equiv="content-language" content="en-us" />, já discutimos o uso do atributo lang no elemento HTML, que é o que deve ser usado.
A diretiva pragma mais comum é a refresh.
<meta http-equiv="refresh" content="60; https://machinelearningworkshop.com/regTimeout" />
Embora seja possível definir uma diretiva para atualizar em um intervalo do número de segundos definido no atributo content e até mesmo redirecionar para um URL diferente, isso não é aconselhável. Atualizar e redirecionar conteúdo sem uma solicitação explícita do usuário prejudica a usabilidade e afeta negativamente a acessibilidade. Você não odeia quando está no meio de um parágrafo e a página é redefinida? Imagine ter problemas cognitivos ou de visão e isso está acontecendo. Se você quiser definir uma atualização com um redirecionamento, certifique-se de que o usuário tenha tempo suficiente para ler a página, um link para acelerar o processo e, se apropriado, um botão para "parar o relógio" e impedir o redirecionamento.
Não incluiremos isso em nosso site porque não há motivo para expirar uma sessão de usuário além de irritar nossos visitantes.
A diretiva pragma mais útil é a content-security-policy, que permite definir uma política de conteúdo para o documento atual. Na maioria das vezes, as políticas de conteúdo especificam origens de servidor e endpoints de script permitidos, o que ajuda a proteger contra ataques de scripting em vários sites.
<meta http-equiv="content-security-policy" content="default-src https:" />
Caso você não tenha acesso para alterar os cabeçalhos HTTP (ou tenha, veja a seguir uma lista de valores de conteúdo separados por espaço para diretivas content-security-policy).
Metatags nomeadas
Na maioria das vezes, você incluirá metadados nomeados. Inclua o atributo name, sendo que o valor do atributo é o nome dos metadados. Assim como nas diretivas pragma, o atributo content é obrigatório.
O atributo name é o nome dos metadados. Além de viewport, é recomendável incluir description e theme-color, mas não keywords.
Palavras-chave
Os vendedores do snake-oil da otimização de mecanismos de pesquisa abusaram da metatag de palavras-chave, preenchendo-os com listas de spam separadas por vírgulas em vez de listas de termos-chave relevantes, de modo que os mecanismos de pesquisa não consideram mais esses metadados úteis. Não é preciso perder tempo, esforço nem bytes para adicioná-lo.
Descrição
No entanto, o valor description é útil para SEO: o valor do conteúdo da descrição geralmente é mostrado pelos mecanismos de pesquisa abaixo do título da página nos resultados da pesquisa. Vários navegadores, como o Firefox e o Opera, usam isso como a descrição padrão de páginas adicionadas aos favoritos. A descrição deve ser um resumo breve e preciso do conteúdo da página.
<meta name="description"
content="Register for a machine learning workshop at our school for machines who can't learn good and want to do other stuff good too" />
Se a segunda metade da descrição não faz sentido para você, provavelmente ainda não viu o filme Zoolander.
Robôs
Se você não quiser que seu site seja indexado pelos mecanismos de pesquisa, avise-os. <meta name="robots" content="noindex, nofollow" /> instrui os bots a não indexar o site e não seguir links. Os bots devem ouvir o pedido, mas não há legislação que exija que eles atendam a ele. Não é necessário incluir <meta name="robots" content="index, follow" /> para solicitar a indexação do site e os links seguintes, já que esse é o padrão, a menos que os cabeçalhos HTTP digam o contrário.
<meta name="robots" content="index, follow" />
Cor do tema
O valor theme-color permite definir uma cor para personalizar a interface do navegador. O valor de cor no atributo content será usado pelos navegadores e sistemas operacionais compatíveis, permitindo que você forneça uma cor sugerida para os user agents compatíveis com a cor da barra de título, da barra de guias ou de outros componentes do Google Chrome. Essa metatag é útil principalmente para Progressive Web Apps. Mas, se você estiver incluindo um arquivo de manifesto, que é exigido por um PWA, é possível incluir a cor do tema nele. No entanto, defini-la no HTML garante que a cor seja encontrada imediatamente antes da renderização, o que pode ser mais rápido no primeiro carregamento do que esperar pelo manifesto.
Para definir a cor do tema para o tom azul do plano de fundo do site, inclua:
<meta name="theme-color" content="#226DAA" />
A metatag de cores do tema pode incluir um atributo media, que permite a configuração de cores de tema diferentes com base em consultas de mídia. O atributo media só pode ser incluído nessa metatag e é ignorado em todas as outras.
Há vários outros metavalores name, mas os que discutimos são os mais comuns. Exceto para declarar valores theme-color diferentes para consultas de mídia distintas, inclua somente uma de cada metatag. Se você precisar incluir mais de um tipo de metatag para oferecer suporte a navegadores legados, os valores legados devem vir depois dos mais recentes, já que os user agents leem as regras sucessivas até encontrarem uma correspondência.
Abrir gráfico
O Open Graph e protocolos de metatags semelhantes podem ser usados para controlar como sites de mídias sociais, como Twitter, LinkedIn e Facebook, exibem links para seu conteúdo. Se não forem incluídos, os sites de mídia social vão usar corretamente o título da página e a descrição da metatag de descrição, as mesmas informações que os mecanismos de pesquisa vão apresentar, mas você pode definir intencionalmente o que quer que os usuários vejam quando um link for postado no seu site.
Quando você posta um link para MachineLearningWorkshop.com ou web.dev no Facebook ou no Twitter, um card com a imagem, o título e a descrição do site aparece. O card inteiro é um hiperlink para o URL que você forneceu.
As metatags do Open Graph têm dois atributos cada: property em vez de name e o conteúdo ou valor dessa propriedade. O atributo property não é definido nas especificações oficiais, mas é amplamente aceito por aplicativos que suportam o protocolo Open Graph. Criar atributos "novos" como property garante que os valores de atributo criados para o atributo do protocolo não entrem em conflito com os valores futuros dos atributos name ou http-equiv.
Criar um card de mídia do Facebook:
<meta property="og:title" content="Machine Learning Workshop" />
<meta property="og:description" content="School for Machines Who Can't Learn Good and Want to Do Other Stuff Good Too" />
<meta property="og:image" content="http://www.machinelearningworkshop.com/image/all.png" />
<meta property="og:image:alt" content="Black and white line drawing of refrigerator, french door refrigerator, range, washer, fan, microwave, vaccuum, space heater and air conditioner" />
Inclua um título para sua postagem. Esse título geralmente é exibido abaixo da imagem e acima da descrição. A descrição deve ter até três frases que resumam sua postagem. Ele vai aparecer depois do título definido em og:title. Forneça o URL absoluto para a imagem do banner que você quer exibir, incluindo o protocolo https://. Ao incluir uma imagem em HTML, sempre inclua uma descrição de texto alternativa para a imagem, mesmo quando ela aparecer em outro lugar. Para cards de mídias sociais do Open Graph, defina o alt como o valor do conteúdo para a propriedade og:image:alt. Também é possível incluir um URL canônico com og:url.
Essas metatags são todas definidas no protocolo Open Graph. Os valores precisam ser o conteúdo que você quer que o aplicativo da Web de terceiros exiba.
Outras mídias sociais têm sintaxes próprias semelhantes, como a marcação de cards do Twitter. Isso permite fornecer uma experiência diferente, dependendo de onde o link aparece, ou ativar o acompanhamento de links adicionando um parâmetro ao final do URL.
<meta name="twitter:title" content="Machine Learning Workshop" />
<meta name="twitter:description" content="School for machines who can't learn good and want to do other stuff good too" />
<meta name="twitter:url" content="https://www.machinelearningworkshop.com/?src=twitter" />
<meta name="twitter:image:src" content="http://www.machinelearningworkshop.com/image/all.png" />
<meta name="twitter:image:alt" content="27 different home appliances" />
<meta name="twitter:creator" content="@estellevw" />
<meta name="twitter:site" content="@perfmattersconf" />
No caso do Twitter, para garantir que o valor do atributo name não entre em conflito com especificações futuras, em vez de usar um novo atributo, como property no Open Graph, para dados do card do Twitter, todos os valores de nome são prefixados com twitter:.
Você pode ver como o card de mídia social será exibido no Twitter e no Facebook.
Você pode ter diferentes imagens, títulos e descrições de cards para diferentes sites de mídias sociais ou para diferentes parâmetros de link. Por exemplo, https://perfmattersconf.com define valores diferentes para og:image, og:title e og:description com base no parâmetro do URL.
Se você inserir https://perfmattersconf.com?name=erica e https://perfmattersconf.com?name=melanie no Card Validator do Twitter, verá esses dois cards diferentes. Fornecemos conteúdo diferente, mesmo que ambos estejam vinculados à mesma página inicial da conferência.
Outras metainformações úteis
Se alguém adicionar seu site aos favoritos, adicioná-lo à tela inicial ou se o site for um Progressive Web App ou funcionar off-line ou sem os recursos do Chrome exibidos, é possível fornecer ícones de aplicativos para a tela inicial do dispositivo móvel.
É possível usar a tag <link> para vincular as imagens de inicialização que você quer usar. Veja um exemplo de inclusão de algumas imagens com consultas de mídia:
<link rel="apple-touch-startup-image" href="icons/ios-portrait.png" media="orientation: portrait" />
<link rel="apple-touch-startup-image" href="icons/ios-landscape.png" media="orientation: landscape" />
Se seu site ou aplicativo for compatível com o aplicativo da Web, o que significa que o site pode permanecer sozinho com o mínimo de IU, como não ter botão "Voltar", você também pode usar metatags para informar ao navegador:
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="mobile-web-app-capable" content="yes" />
Só inclua essas informações se o app realmente for compatível com apps. Caso seu site não seja, você deverá configurar seus apoiadores mais leais, aqueles que adicionaram seu site à tela inicial, para oferecer uma experiência do usuário muito ruim. Você vai perder o amor deles!
Se alguém quiser salvar seu ícone na tela inicial de um dispositivo pequeno, forneça ao sistema operacional um nome curto que não ocupe muito espaço na tela inicial de um dispositivo pequeno. Faça isso incluindo uma metatag ou usando um arquivo de manifesto da Web. Veja a seguir o método da metatag:
<meta name="apple-mobile-web-app-title" content="MLW" />
<meta name="application-name" content="MLW" />
Você abordou várias metatags, e todas elas deixarão seu cabeçalho mais longo. Se você estiver criando um Progressive Web App compatível com apps da Web e compatível com o modo off-line, em vez de incluir essas duas metatags adicionais, será possível incluir short_name: MLW de forma mais simples e sucinta em um arquivo de manifesto da Web.
O arquivo de manifesto pode impedir um cabeçalho pesado de tags <link> e <meta>. Podemos criar um arquivo de manifesto, geralmente chamado de manifest.webmanifest ou manifest.json. Em seguida, usamos a tag <link> com um atributo rel definido como manifest e o atributo href definido como o URL do arquivo de manifesto:
<link rel="manifest" href="/mlw.webmanifest" />
O foco desta série é HTML. Confira o curso web.dev sobre Progressive Web Apps (em inglês) ou a documentação do manifesto de app da Web do MDN (em inglês).
O HTML será parecido com este:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Machine Learning Workshop</title>
<meta name="viewport" content="width=device-width" />
<meta name="description" content="Register for a machine learning workshop at our school for machines who can't learn good and want to do other stuff good too" />
<meta property="og:title" content="Machine Learning Workshop" />
<meta property="og:description" content="School for Machines Who Can't Learn Good and Want to Do Other Stuff Good Too" />
<meta property="og:image" content="http://www.machinelearningworkshop.com/image/all.png" />
<meta property="og:image:alt" content="Black and white line drawing of refrigerator, french door refrigerator, range, washer, fan, microwave, vaccuum, space heater and air conditioner" />
<meta name="twitter:title" content="Machine Learning Workshop" />
<meta name="twitter:description" content="School for machines who can't learn good and want to do other stuff good too" />
<meta name="twitter:url" content="https://www.machinelearningworkshop.com/?src=twitter" />
<meta name="twitter:image:src" content="http://www.machinelearningworkshop.com/image/all.png" />
<meta name="twitter:image:alt" content="27 different home appliances" />
<meta name="twitter:creator" content="@estellevw" />
<meta name="twitter:site" content="@perfmattersconf" />
<link rel="stylesheet" src="css/styles.css" />
<link rel="icon" type="image/png" href="/images/favicon.png" />
<link rel="alternate" href="https://www.machinelearningworkshop.com/fr/" hreflang="fr-FR" />
<link rel="alternate" href="https://www.machinelearningworkshop.com/pt/" hreflang="pt-BR" />
<link rel="canonical" href="https://www.machinelearning.com" />
<link rel="manifest" href="/mlwmanifest.json" />
</head>
<body>
<!-- <script defer src="scripts/lightswitch.js"></script>-->
</body>
</html>
É bastante, mas já terminou.
Agora que o <head> está quase completo, é possível analisar alguns HTML semântico.
Teste seu conhecimento
Teste seu conhecimento sobre metadados
A diretiva de atualização do pragma.
Abra as metatags do Graph.