SEO E MARKETING DIGITAL

Padrões HTML para melhor SEO: o elemento HEAD

Fundamentos da Otimização para Mecanismos de Busca (SEO), e como implementar tags para obter melhores resultados

14 min readJul 6, 2021

Neste artigo, entenderemos os fundamentos da Otimização para Mecanismos de Busca (do inglês, “Search Engine Optimization”, ou “SEO”) e dos formato e sintaxe do HTML. Também, aprenderemos como implementar tags em nossos sites, e como isso pode nos ajudar a obter melhores resultados nos mecanismos de pesquisa. Vamos investigar como estes funcionam, e quais as metatags que eles entendem.

💡 Se você não está familiarizado com a sintaxe HTML, recomenda a leitura do meu artigo “CSS e HTML explicado para iniciantes absolutos: Parte 1” antes de continuarmos neste atual, já que certos conhecimentos de linguagem de marcação podem ser necessários.

Introdução

Suponha que você acabou de descobrir um novo autor e caminhe até a próxima livraria, no seu bairro, esperando encontrar o novo livro desta pessoa lá. Como você começa a procurá-lo?

Existem muitas opções que podem te ajudar nesta tarefa: (a) você pergunta ao vendedor, fornecendo algumas informações sobre o livro; (b) você caminha pelos corredores, procurando a categoria específica à qual o livro pertence; ou, (c) você verifica cada livro nesta livraria, um a um, procurando pela capa específica que contenha as informações desejadas.

Biblioteca com múltiplos níveis de estantes de livros — *“Shelf Bookcase Library”, por* *Deedee86* *via* *Pixabay*

Como você pôde perceber, algumas dessas escolhas podem levar algum tempo, mas todas essas têm uma coisa em comum: os metadados do documento. Isto quer dizer que existem algumas informações sobre esses objetos que podem ser utilizadas para catalogação e, também, para melhor atender aos propósitos de pesquisa.

Este é o básico da Otimização para Mecanismos de Busca (SEO), ou Técnicas de SEO, um processo que visa otimizar a maneira como buscamos coisas específicas na internet. Vamos descobrir como isso funciona, e como podemos desenvolver melhores implementações em nossos sites ou aplicativos, com fins de alcançar melhores posições quando os usuários procuram por palavras-chave específicas em seus motores de busca favoritos.

O que é SEO?

Search Engine Optimization (SEO) é um conjunto de técnicas com o objetivo de tornar o conteúdo da web “amigável” para a busca, fazendo com que os buscadores “entendam” o nosso site e conduzam os usuários aos nossos serviços. Pequenas melhorias que fazemos, resultam em usuários mais relevantes visualizando nosso conteúdo e, também, nos ajudam a promover e monetizar o conteúdo da web.

Existem muitos especialistas na internet que podem ajudar a melhorar nossa visibilidade nos resultados dessas páginas, e também a fornecer serviços úteis. Vamos entender como podemos aplicar algumas dessas técnicas seguindo as diretrizes do HTML.

*“Search Engine Optimization”, por* *Gerd Altmann* *via* *Pixabay*

Como inserir metatags em HTML

Antes de começarmos, pare um minuto para verificar as informações de metadados usadas na página da web de agora.

Acima da barra de endereços do navegador web, o título e o ícone — ou favicon, o “ícone dos Favoritos” — são apresentados antes mesmo de a página ser totalmente renderizada. Viu como nosso navegador já coleta algumas dessas informações antes do processamento? Por debaixo dos panos, quando uma solicitação é feita a um servidor da web, nosso navegador procura por informações como estas:

<!doctype html>
<html lang="en" dir="ltr">
  <head>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link rel="icon" href="/favicon.png">
[...]
    <title>My simple web page</title>
    <meta name="description" content="In order to fully understand SEO, we have to start by the basics, learning its fundamentals.">
[...]
  </head>

💡 Alguns navegadores fornecem informações mais detalhadas sobre os metadados coletados da página web. Se você estiver usando o Mozilla Firefox, você pode abrir o painel de Informações da Página, pressionando Ctrl + I em seu PC ou seguindo este guia. A janela que será aberta deve ser similar a esta:

*Página inicial do* *StackOverflow* — *sim, eles têm uma página inicial!* *— visto no painel de Informações da Página do Firefox.*

Ainda que você não entenda plenamente o HTML, observe estas informações:

O código-fonte informa ao navegador que este é um documento do tipo HTML;
A segunda linha especifica que os elementos HTML seguintes serão exibidos no idioma inglês e na direção “esquerda para direita” (do inglês, “left to right”, ou LTR);
Há algumas definições de viewport para renderizar a página da web atual;
Há, também, alguns valores fornecidos para o ícone, para o título, e uma descrição sobre a página.

Na verdade, HTML não é um bicho-de-sete-cabeças: nós podemos inserir facilmente metatags em nosso arquivo HTML, as adicionando diretamente no topo de nosso documento, dentro do elemento head do HTML.

O elemento head serve para fornecer algumas informações sobre a página, como definições de renderização, links, folhas de estilo e scripts. A maioria desses metadados não são “legíveis” para humanos, e não serão exibidos na página, mas serão interpretados apenas pelo servidor web e pelo navegador web do cliente.

Os motores de busca geralmente coletam dados do elemento head para fornecer melhores resultados, o que significa que podemos inserir metatags para melhorar a visibilidade de nossas páginas web e aplicativos, seguindo a sintaxe de formatação do HTML.

Sintaxe de formatação do HTML

A sintaxe de formatação do HTML é o conjunto de regras que estruturam um arquivo HTML, de maneira que o conteúdo possa ser reconhecido pelo navegador e renderizado corretamente para o usuário.

Existem muitos elementos definidos nos padrões HTML, e os desenvolvedores também implementaram elementos customizados, além de alguns atributos globais.

Para os fins deste artigo, vamos adentrar apenas em alguns daqueles que podem ser empregados pelas técnicas de SEO, para que você possa implementá-las em seu próprio site ou aplicativo, para obter melhores resultados.

O elemento “documento” 📃

O primeiro passo para criar um arquivo HTML é informar que este é um arquivo HTML.

De acordo com o HTML Standard, definido pelo Web Hypertext Application Technology Working Group (WHATWG), uma comunidade fundada pelos criadores dos principais navegadores web em 2004:

O elemento html representa a raiz de um documento HTML.

Em outras palavras, refere-se ao único elemento ao qual pertencem todos os elementos do HTML. Você pode pensar nisso como sendo uma árvore de nós: todo o documento é um nó de documento; logo, outros elementos HTML são nós hierárquicos, assim:

*Estrutura de* nós DOM HTML. Imagem de *W3Schools*.

A “árvore” do documento 🌳

A maneira como a maioria dos mecanismos de pesquisa funciona é percorrendo partes relevantes de todo o documento e, em seguida, reunindo informações de seus nós para estabelecer relações entre o elemento e seu conteúdo, como textos, procurando pelos elementos p do HTML (para os parágrafos), ou imagens e sua legenda correspondente — por exemplo:

<figure>
    <img src="/media/cc0-images/elephant-660-480.jpg" alt="Elephant at sunset">
    <figcaption>An elephant at sunset</figcaption>
</figure>

Observe o atributo alt no exemplo acima: ele pode ser utilizado por leitores de tela, para que deficientes visuais saibam do que trata a figura; mas também para fins de SEO, já que podemos usá-lo para descrever ao mecanismo de pesquisa do que se trata essa imagem e como ela está relacionada ao texto mais próximo.

Por falar em acessibilidade web, devemos evitar colocar textos dentro de imagens, uma vez que estes não serão lidos por muitos usuários. Em vez disso, podemos usar uma imagem relevante próxima a um trecho de texto que explica do que se trata a figura.

💡 A prática mais recomendada é colocar a figura mais importante próxima ao topo da página web, como uma imagem de banner, e as demais imagens próximas de seu contexto, como um texto relevante ou o título da seção.

Os metadados do documento 📔

Outra ótima maneira de fornecer informações para os mecanismos de pesquisa é utilizando metatags. No documento HTML, estas podem ser fornecidas logo no início, dentro do elemento head. Por exemplo:

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0">
    <meta name="generator" content="WordPress 5.6">
    <title>The document metadata</title>    <meta name="author" content="John Doe">
    <meta name="description" content="This article explains the HTML metadata">
    <meta name="keywords" content="html,metadata,rfc">
    
    <link rel="alternate" type="application/atom+xml" href="blog-posts.xml">
    <link rel="canonical" href="http://www.example.com/html/">
    <link rel="license" href="https://creativecommons.org/licenses/by/4.0/">
</head>

💡 De acordo com o padrão HTML5, * [elementos void] (https://html.spec.whatwg.org/multipage/syntax.html#void-elements) *, como as tags link emeta são * fechamento automático *, pois não possuem nenhum conteúdo. Isso significa que você pode encerrá-los apenas digitando >, ao invés de />. Outros * elementos nulos * incluem: area,base, br,col, embed,hr, img,input, param,source, track e wbr.

Vamos entender cada um desses elementos usados em nosso código de exemplo.

Elementos do head do HTML

A tag “meta” 🧬

Primeiramente, a tag meta é usada para definir metadados sobre o arquivo HTML, e pode modificar a maneira como os navegadores web renderizam o documento.

O MDN Web Docs tem uma grande lista sobre os valores que podem ser atribuídos à metatag name, incluindo atributos como author, description, generator e keywords. A maioria dessas são autodescritivas e já são informadas automaticamente por frameworks modernos.

Vamos voltar ao nosso exemplo anterior. As três primeiras metatags podem ser úteis: (i) para informar a codificação dos caracteres — estamos usando UTF-8, o charset padrão -; (ii) para especificar o tamanho do dispositivo (também para habilitar o comportamento responsivo); e (iii) para identificar o software que gerou a página web.

Essas três linhas abaixo podem ser usadas para descrever o nome de um dos autores da página, um breve resumo do documento — navegadores modernos podem usá-lo como a descrição padrão das páginas favoritadas — e algumas palavras-chave (separadas por vírgula) relacionadas ao conteúdo da página atual:

<meta name="author" content="John Doe">
<meta name="description" content="This article explains the HTML metadata">
<meta name="keywords" content="html,metadata,rfc">

💡 A maioria dos mecanismos de pesquisa utiliza esses metadados para fornecer uma breve descrição da página web em seus resultados, portanto, usar uma boa combinação de palavras-chave pode gerar melhores resultados. Entretanto, tenha cuidado: o uso de várias palavras-chave desnecessárias deve ser evitado, e pode prejudicar a sua posição nas buscas.

Se estiver lidando com conteúdo explícito, é fortemente recomendado pela maioria dos motores de busca especificar os metadados rating, para que não sejam incluídos nos resultados da pesquisa para usuários que não são permitidos, não querem ou não esperam encontrá-los, ao utilizarem filtros de pesquisa, como o SafeSearch da Google. Isso pode ser feito incluindo uma das seguintes metatags:

<meta name="rating" content="adult" />
<meta name="rating" content="RTA-5042-1996-1400-1577-RTA" />

Outra coisa a se notar sobre as metatags é que muitos buscadores podem alterar o título do resultado da busca se encontrarem um texto alternativo dentro do conteúdo da página que melhor indique sua relevância para a busca dos usuários. De acordo com a Central de Pesquisa do Google, isto pode ocorrer quando “a tag de título, conforme especificada pelo proprietário de um site, é limitada a ser estática ou fixa, independentemente da consulta”, de modo que o título do resultado da pesquisa pode diferir da tag title definida no arquivo HTML.

A tag “link” ⛓️

Às vezes, desenvolvedores precisam estabelecer conexões para usar recursos externos de uma origem diferente, por diversos motivos, como para evitar a repetição de códigos, ou para reduzir o tamanho do arquivo final. Isso pode ser feito utilizando o elemento link.

O elemento External Resource Link, ou a tag <link>, do HTML informa ao navegador web que deve obter este arquivo, e usar seu conteúdo na página web atual. Por exemplo:

<link rel="icon" href="favicon.png">
<link href="default-stylesheet.css" rel="stylesheet"><link href="https://example.com/css/print.css" rel="stylesheet" media="print">
<link href="mobile.css" rel="stylesheet" media="screen and (max-width: 576px)">

Neste exemplo, estamos informando ao navegador para localizar o arquivo CSS padrão, usado para a maioria dos tipos de mídia em default-stylesheet.css. Observe que os arquivos também podem estar localizados fora do diretório da página atual, como quando definimos a localização como sendo https://example.com/css/print.css, em um servidor da web diferente do nosso.

O atributo media especifica que este recurso só deve ser usado pelo navegador web quando a condição de mídia correspondente for verdadeira. Portanto, em nosso exemplo, se estivermos imprimindo esta página web, nosso navegador irá renderizar a página de acordo com as folhas de estilo localizadas naquele arquivo.

Em termos de impressão de páginas, podemos adicionar nosso código dentro de um media breakpoint em nosso arquivo CSS, assim:

@media print {
    .banner > p {
        background-color: #ffffff;
        color: #000000;
    }
}

💡 HTML respeita a ordem das informações fornecidas, então podemos definir um novo arquivo CSS para substituir o anterior: adicionando um elemento de recurso externo após a linha default-stylesheet.css, em nosso exemplo.

O mesmo se aplica ao arquivo mobile.css: se estivermos abrindo esta página em um dispositivo cuja tela é de 576px ou menos, o navegador irá renderizar a página web de acordo com este arquivo.

💡 Há alguns media breakpoints comuns, com base nas dimensões médias de tamanho de tela de dispositivos, tais como: 576px (dispositivos pequenos), 768px (dispositivos médios), 992px (dispositivos grandes) e 1200px (dispositivos muito grandes).

*“Responsive Web Design”, por* *Clovis Cheminot* *via* *Pixabay*

Para melhores resultados de SEO, devemos usar o atributo rel também, que estabelece uma relação entre alguns recursos vinculados e nossa página web atual.

De acordo com MDN Web Docs, o atributo rel expressa tokens que são semanticamente válidos para máquinas e para humanos. Em nosso exemplo, usamos três deles:

<link rel="alternate" type="application/atom+xml" href="blog-posts.xml">
<link rel="canonical" href="http://www.example.com/html/">
<link rel="license" href="https://creativecommons.org/licenses/by/4.0/">

Vamos compreender cada um deles:

O valor alternate descreve outras representações do documento atual, como um feed de distribuição, ou um formato e idioma alternativos, destinados a outros tipos de mídia. Em nosso exemplo, demonstramos que há um Feed Atom para nossas postagens como uma representação alternativa.
O valor canonical é usado quando uma única página pode ser acessada em várias URLs, ou quando houver páginas diferentes contendo o mesmo conteúdo. Pode ocorrer de haver versões duplicadas da mesma página, como example.com/html/ e example.com/?p=html, logo todos os outros URLs com conteúdo semelhante devem ser consideradas URLs duplicadas e obtidas com menos frequência.

💡 Desenvolvedores geralmente publicamente o mesmo conteúdo em várias plataformas ou canais de informação, para alcançar um público ainda maior. Esta técnica é conhecida como “crossposting” e deve ser usada junto com a URL canonical, para que os mecanismos de busca possam priorizar aquela que for mais representativa de um conjunto de páginas duplicadas.

O valor license indica as informações de licenciamento para o elemento ou página web atual. Pode ser usado nos elementos HTML <a>, <area>, <form> e <link>, e, portanto, fornece um hiperlink com as regras e declarações, por exemplo:

<a rel="license" href="http://creativecommons.org/licenses/by/4.0/"><img alt="Creative Commons License" style="border-width:0" src="https://i.creativecommons.org/l/by/4.0/88x31.png" /></a><br />This work is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by/4.0/">Creative Commons Attribution 4.0 International License</a>.

💡 O sinônimo copyright está incorreto e deve ser evitado, embora seja reconhecido por muitos navegadores e mecanismos de busca.

A tag link, entretanto, não pode ser usada para carregar scripts: em vez disso, podemos usar a tagscript.

A tag “script” 🕹️

A tag script é utilizada para incorporar código executável, e geralmente serve para incluir código JavaScript na página. Também, esta tag pode conter dados, como o JSON (JavaScript Object Notation), que podem ser processados pela página web ou aplicativo.

Assim como as tags link, os elementos script podem se referir ao código JavaScript localizado em outro servidor web ou diretório, como neste exemplo:

<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

Observe que estamos usando os atributos integrity e crossorigin ao adicionar esta solicitação a um servidor web externo. Esta é uma prática recomendada para criar aplicativos mais seguros, para que o navegador verifique a resposta.

O atributo integrity impede que o navegador web carregue um conteúdo que não corresponde à resposta esperada pelo servidor web. Ele contém um hash de um recurso como seu valor, o que garante que o arquivo foi recebido sem modificações e entregue sem uma manipulação inesperada.
O atributo crossorigin define como o elemento lida com solicitações de origem cruzada (do inglês, "cross-origin requests"), adicionando um campo Origin na Requisição HTTP para um servidor de origem diferente. Fornece, também, suporte para o mecanismo de Cross-Origin Resource Sharing (CORS), e pode ser definido como anonymous (valor padrão), ou use-credentials: o primeiro cria solicitações CORS com credentials flag definidas como same-origin; o segundo, com credentials flag definidas como include.

Em nosso exemplo, o navegador não executará o código se o arquivo entregue não corresponder ao hash informado, utilizando o algoritmo criptográfico SHA-256.

💡 As tags link e script do HTML podem implementar integrity e crossorigin para fornecerem maior segurança, permitindo a verificação apropriada dos dados recebidos e sua fonte de origem.

Esse código pode ser implementado no head ou no body de nosso arquivo HTML, de maneira que o navegador solicite o arquivo antes ou depois que o conteúdo da página for totalmente carregado. Além disso, ele pode ser carregado em paralelo com a renderização dos elementos da página web, de forma assíncrona ou síncrona.

Os desenvolvedores costumam inserir o elemento script logo após todos os elementos da página web serem definidos: em geral, desta forma garantimos que o usuário não será apresentado a uma página em branco até que todos os scripts sejam carregados, o que pode levar algum tempo dependendo da conexão de rede do usuário.

💡 Para os fins deste artigo, não abordaremos os prós e os contras de inserir o elemento script no elemento head ou body ainda, nem sobre fazê-lo de forma síncrona ou assíncrona, haja vista que estes tópicos necessitariam de um artigo próprio. Na verdade, você pode seguir esta série de artigos, já que os aprenderemos em um outro momento.

Em termos de SEO, inserir tags link e script dentro do elemento head oubody não produz grande diferença, pois os motores de busca (crawlers) geralmente não lêem scripts ou folhas de estilo, mas o nosso conteúdo HTML apenas. Por outro lado, este posicionamento pode impactar na experiência dos usuários, e a ordem de suas declarações importa para outros scripts que os utilizam como dependências.

Conclusão

Terminamos, agora vamos recapitular. Vimos o básico das técnicas de SEO, e como inserir metatags utilizando HTML. Em seguida, aprendemos sobre os elementos e a “árvore” do documento. Finalmente, cobrimos alguns elementos do elemento HTML head, e sobre as tags meta,link e script, além de como utilizá-las corretamente para obter melhores resultados nos mecanismos de pesquisa.

No próximo artigo desta série, abordaremos o elemento body do HTML, e como ele pode ser implementado para obter melhores resultados de SEO. Não deixe de acompanhar. 🏆

Próximas etapas 🚶

Há muitos protocolos que aumentam o poder das técnicas de SEO, e podemos aplicá-los em nossas páginas web com fins de obter melhores resultados. Se você gostaria de saber mais sobre estes, certifique-se de seguir esta série, pois continuaremos explorando como fazer uso das melhores técnicas de SEO.

Se você tem alguma dúvida ou sugestão sobre esses assuntos, comente abaixo. 📣

Referências 🧩

[1] The Document Metadata (Header) element — HTML: HyperText Markup Language | MDN. (2021, June 2). MDN Web Docs. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/head.

[2] The External Resource Link element — HTML: HyperText Markup Language | MDN. (2021, June 9). MDN Web Docs. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link.

[3] The metadata element — HTML: HyperText Markup Language | MDN. (2021, June 2). MDN Web Docs. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta.

[4] The Script element — HTML: HyperText Markup Language | MDN. (2021, June 2). MDN Web Docs. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script.

[5] Consolidate Duplicate URLs with Canonicals | Google Search Central. (n.d.). Google Developers. Retrieved July 5, 2021, from https://developers.google.com/search/docs/advanced/crawling/consolidate-duplicate-urls.

[6] HTML attribute: crossorigin — HTML: HyperText Markup Language | MDN. (2021, May 26). MDN Web Docs. https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/crossorigin.

[7] HTML attribute: rel — HTML: HyperText Markup Language | MDN. (2021, June 22). MDN Web Docs. https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel.

[8] HTML Standard. (2021). WHATWG. https://html.spec.whatwg.org/.

[9] SEO Starter Guide: The Basics | Google Search Central. (n.d.). Google Developers. Retrieved July 2, 2021, from https://developers.google.com/search/docs/beginner/seo-starter-guide.