A abordagem SEO tem múltiplas vantagens. A implementação de uma estratégia deste tipo optimiza a qualidade das páginas de vendas de um comerciante. Consequentemente, o investimento em SEO permite-lhepoupar dinheiro e ser produtivo ao mesmo tempo. Também fornece visibilidade a longo prazo e obter contactos qualificados. Além disso, a referenciação natural oferece uma elevada taxa de conversão e um bom conhecimento da marca. No entanto, as páginas têm de ser bem estruturadas, a começar pelas etiquetas semânticas. Estas têm um impacto significativo nos motores de busca. Descubra as diferentes etapas para melhorar a sua SEO.
Definição de uma etiqueta semântica em HTML5
Uma etiqueta semântica em HTML5 é uma etiqueta HTML melhorada que fornece informações precisas sobre o conteúdo de uma página Web. Para o efeito, torna muito mais fácil paraindexação do motor de busca. Também orienta o navegador para garantir uma apresentação de fácil utilização para os leitores.
O papel das etiquetas semânticas HTML5 na referenciação natural
As etiquetas HTML dão uma apresentação visual a uma página Web, indicando a sua estrutura aos navegadores. No entanto, não fornecem quaisquer pormenores sobre o conteúdo da página, ao contrário das etiquetas semânticas HTML5. As etiquetas semânticas dão significado ao conteúdo, tornando-o mais fácil de compreender pelos motores de busca. Além disso, a sua utilização influencia a referenciação e a indexação naturais, estruturando estas últimas. Além disso, promovem uma melhor experiência do utilizador graças a uma reprodução suave.
As vantagens da marcação semântica em HTML5 para a referenciação natural
As etiquetas semânticas HTML5 são um trunfo essencial para a otimização dos motores de busca. Em primeiro lugar, permitem aos motores de busca compreender rapidamente o tema e a estrutura. Isto favorece a indexação e melhora o posicionamento da página. Também facilitam a manutenção do código. Como resultado, os programadores podem facilmente modificá-los mesmo após semanas ou mesmo meses. Tudo o que têm de fazer é modificar o CSS enquanto se direccionam para a etiqueta .
Comparação entre a marcação HTML e HTML5
As etiquetas semânticas HTML5 diferem das etiquetas tradicionais de várias formas. Em primeiro lugar, as etiquetas semânticas HTML5 oferecem novas funcionalidades, tais como suporte multimédia. Ao contrário das antigas etiquetas, as etiquetas HTML5 integram nativamente formatos de imagem, incluindo gráficos vectoriais. Além disso, podem ser utilizadas de forma mais ampla, permitindo aos utilizadores desenhar uma variedade de formas. Para além de uma declaração de documento curta, as etiquetas HTML5 optimizam as regras de sintaxe para uma maior compatibilidade.
Os diferentes tipos de etiquetas semânticas que são essenciais
No código HTML, as etiquetas semânticas são escritas com uma etiqueta de abertura e uma etiqueta de fecho que contém uma barra . Quanto ao conteúdo, este é inserido no meio das duas etiquetas da seguinte forma: conteúdo.
A etiqueta
A etiqueta define o cabeçalho do conteúdo que inclui o logótipo da empresa e a navegação principal do sítio. Transmite informações repetitivas de cada página para os robots de indexação. No entanto, esta etiqueta é única no código HTML. Por outras palavras, uma etiqueta não pode conter outra numa página. É assim que ela é codificada em HTML5:
<header>
<h1>... </h1>
<img src=" »image »" alt=" O" logo du site »>
A etiqueta
A tag
<li><ahref= »#Accueil »>Início</a></li>
<li><ahref= »#Apropos »>Sobre nós</a></li>
<li><ahref= »#Contact »>Contacto</a></li>
A etiqueta
A tag designa o conteúdo principal da página Web. É essencial notar que este elemento constitui a base para a codificação do conteúdo de um sítio. Também agrupa as etiquetas e . A etiqueta indica aos motores de busca o texto do conteúdo. Por outras palavras, pode ser um post de blogue, uma massagem de fórum ou uma ficha de produto.
Em geral, agrupa o título, os pormenores da publicação, a categoria, o conteúdo e os artigos ligados. Quanto à etiqueta , designa a estruturação mais definida desta última. Note-se também que esta etiqueta pode conter várias . Eis como a escrever:
<body>
...
<p>... </p>
<p>... </p>
</body>
A etiqueta é escrita como :
<article>
<header>
<h2>...</h2>
<p>...<time datetime=" »… »">...</time> ...</p>
<p>...</p>
<p><ahref= »lien du site »> ...</a></p>
A etiqueta
A etiqueta
<p>... </p>
A etiqueta
A etiqueta
<img src=" »" image »>
<p>... </p>
A etiqueta Hn
Marcação Hn preenche os títulos dos conteúdos da página, para além de ser crucial para os motores de busca. Melhora a legibilidade para estes navegadores. Contém também palavras-chave principais e secundárias para fornecer informações-chave sobre o assunto. Estas etiquetas de título são classificadas em 6 níveis.
O <h1> indica o título principal e mais importante da página ou do artigo. O título <h2> marca os subtítulos e divide o texto em parágrafos separados. Os subparágrafos podem ser criados utilizando a função <h3> e <h4> para um nível extra de pormenor. Etiquetas <h5> e <h6> também existem, mas raramente são utilizados para entrar em pormenores.
É essencial ter apenas um <h1> tags por página, enquanto o número de <h2>, <h3>, <h4> pode ser mais elevado. O objetivo é estruturar o conteúdo de uma forma coerente e fluida.
Etiquetas de descrição
e
.
As etiquetas
,
e
são utilizadas para criar listas de descrições estruturadas. Ao contrário das listas clássicas
e
, estas etiquetas podem ser utilizadas para apresentar definições detalhadas, ideais para explicar termos complexos ou criar um glossário num sítio Web.
Fruta
Apple
Árvore
Árvore de maçã
Família
<Rosáceas
As etiquetas
e
A etiqueta
indica uma citação no conteúdo e a etiqueta designa o seu nome e fonte. É importante notar que é inserido dentro da etiqueta
. Eis como codificá-las em HTML :
<p>... </p>
Etiquetas e
A etiqueta destaca extractos de código permitindo que os motores de busca os reconheçam. A etiqueta
apresenta texto pré-formatado, preservando a estrutura do código original. Estas etiquetas indicam a natureza específica do conteúdo aos robots de indexação.
Outras etiquetas semânticas importantes para SEO
As meta tags HTML fazem referência ao título, autor, palavras-chave e descrição do conteúdo. Estas etiquetas são essenciais para que os motores de busca indexem o seu sítio e o seu conteúdo. Por exemplo, a etiqueta
descreve o objetivo da página e é crucial para a indexação. A etiqueta de meta-descrição, por sua vez, fornece uma descrição pormenorizada da página e incentiva os cliques nos resultados da pesquisa.
As etiquetas <p></p> indicam parágrafos autónomos, enquanto as etiquetas <a></a> são hiperligações entre páginas. Marcação <em></em> realça texto e etiquetas <strong></strong> realçar esta última.
A etiqueta
A etiqueta HTML
marca o endereço da sua empresa. Está localizada no rodapé ou na página de contactos. Em suma, esta etiqueta limita-se a enquadrar os elementos do endereço para uma formatação adequada. Em HTML5, escreve-se: seu endereço.
A etiqueta
Esta etiqueta apresenta dados temporais, tais como o data de publicação de um artigo ou de um evento futuro. Inclui um atributo datetime numericamente, enquanto o formato apresentado ao utilizador pode variar entre as etiquetas e . Eis um exemplo típico de utilização: Quinta-feira, 10 de agosto, às 12:30.
A etiqueta
A etiqueta indica meios de comunicação como ilustrações, diagramas, exemplos de código ou fotografias. Estes elementos são associados ao conteúdo sem interromper o fluxo do documento. Imagens <figure> não precisa do <p>As listas com marcadores podem ser omitidas para listas de imagens. Também pode utilizar <figcaption> para descrever estes meios de comunicação. Note-se que esta etiqueta não deve ser utilizada para todas as imagens de um artigo e pode ser confundida com
A etiqueta
A tag é geralmente usada dentro da tag . Ela fornece um uma breve descrição, uma legenda ou um título.e a um elemento.
Estratégia de implementação de etiquetas semânticas em HTML5
Existem dois métodos para implementar etiquetas semânticas em HTML5. Utilizando a ferramenta de marcação HTML do Google, que não requer qualquer manipulação do código fonte. Este método envolve vários passos simples.
Em primeiro lugar, escolher o tipo de dados a estruturar na ferramenta de marcação HTML do Google. O passo seguinte é introduzir o URL da página ou copie e cole o código HTML do artigo. Adicione as novas etiquetas clicando em "Nome" para apresentar o título no separador "Os meus elementos de dados". Criar o código HTML com as etiquetas destacadas em amarelo, clicando em "Criar HTML". Por fim, clique em inserir as etiquetas no código fonte da página através do back office.
Também pode instalar plugins como o Yoast SEO ou o Schema Pro para integrar estas etiquetas semânticas. Depois de descarregar o plugin, basta preencher os campos com os valores adequados e clicar em "inserir". As etiquetas HTML5 serão automaticamente adicionadas ao código fonte da sua página.
A estrutura semântica do código HTML5 para uma boa classificação SEO
Embora existam muitas combinações diferentes de etiquetas HTML5, é importante respeitar uma organização precisa para otimizar a sua SEO. Eis a estrutura correcta para melhorar o seu SEO:
<html doctype
<html lang= »fr »>
<head>
<metacharset= »utf-8’ />
</head>
<body>
<header>
<li><ahref= »#Accueil »>Início</a></li>
<li><ahref= »#Apropos »>Sobre nós</a></li>
<li><ahref= »#Contact »>Contacto</a></li>
<article>
...
...
</body>
</html>
Melhores práticas de marcação HTML5 para melhorar a SEO
Para começar, utilize o Estilo CSS para formatação. Mesmo que os browsers apliquem estilos a estas etiquetas, estas não devem ser utilizadas para formatar o texto. Por exemplo, não utilize as etiquetas de título simplesmente para alterar o tamanho do tipo de letra. Em vez disso, utilize-as de uma forma semântica. Da mesma forma, não utilize <blockquote> para indentação, ou <strong> ou <em> negrito ou itálico sem razão aparente.
Organizar os títulos numa hierarquia coerente. Por exemplo, legendas <h3 > deve seguir o <h2> adequada. Esta estrutura cria uma hierarquia lógica no seu conteúdo, facilitando a compreensão dos leitores e dos motores de busca. Pode utilizar a ferramenta de auditoria de sites da Semrush para detetar problemas com os títulos <h1> e outros erros de SEO. Note-se que esta abordagem hierárquica também se aplica a todas as outras etiquetas semânticas HTML.
Recomendamos fazer uma utilização razoável das etiquetas de título de modo a não comprometer a legibilidade e a compreensão das páginas. Além disso, recomenda-se vivamente que se evite a utilização de títulos demasiado longos ou a sua utilização abusiva para efeitos de formatação. Por último, não são recomendadas combinações inadequadas com outras etiquetas nem tamanhos de título visualmente inconsistentes.