Padrões HTML para melhor SEO

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

Introdução

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

O que é SEO?

“Search Engine Optimization”, por Gerd Altmann via Pixabay

Como inserir metatags em HTML

<!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>
Página inicial do StackOverflowsim, eles têm uma página inicial! — visto no painel de Informações da Página do Firefox.
  • 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.

Sintaxe de formatação do HTML

O elemento “documento” 📃

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

A “árvore” do documento 🌳

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

Os metadados do documento 📔

<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>

Elementos do head do HTML

A tag “meta” 🧬

<meta name="author" content="John Doe">
<meta name="description" content="This article explains the HTML metadata">
<meta name="keywords" content="html,metadata,rfc">
<meta name="rating" content="adult" />
<meta name="rating" content="RTA-5042-1996-1400-1577-RTA" />

A tag “link” ⛓️

<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)">
@media print {
.banner > p {
background-color: #ffffff;
color: #000000;
}
}
“Responsive Web Design”, por Clovis Cheminot via Pixabay
<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/">
  • 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.
  • 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>.

A tag “script” 🕹️

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

Conclusão

Próximas etapas 🚶

Referências 🧩

--

--

Pesquisador de Direito Digital. Desenvolvedor Full Stack. Escreve sobre direito, inovação, e programação.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Danilo César

Pesquisador de Direito Digital. Desenvolvedor Full Stack. Escreve sobre direito, inovação, e programação.