10.1 Marcação Semântica
SEO (otimização para motores de busca) desempenha um papel crucial no desenvolvimento web, pois ajuda a melhorar a visibilidade das páginas da web nos resultados dos motores de busca. A marcação HTML moderna tem um impacto significativo no SEO, ajudando os motores de busca a entenderem e a indexarem melhor o conteúdo. Vamos analisar os principais aspectos do impacto do SEO na marcação HTML moderna.
As tags semânticas do HTML5 ajudam os motores de busca a entender a estrutura e o conteúdo da página web. O uso de tags corretas melhora a acessibilidade e torna o conteúdo mais compreensível para os motores de busca.
Exemplos de tags semânticas:
<header>: cabeçalho da página ou seção<nav>: links de navegação<main>: conteúdo principal da página<section>: seção temática<article>: bloco de conteúdo independente<aside>: informação adicional ou barra lateral<footer>: rodapé da página ou seção
Exemplo de uso:
<body>
<header>
<h1>Título do Site</h1>
<nav>
<ul>
<li><a href="#home">Início</a></li>
<li><a href="#about">Sobre</a></li>
<li><a href="#contact">Contatos</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h2>Artigo 1</h2>
<p>Texto do artigo...</p>
</article>
<section>
<h2>Seção</h2>
<p>Texto da seção...</p>
</section>
</main>
<aside>
<h2>Barra Lateral</h2>
<p>Informação adicional...</p>
</aside>
<footer>
<p>© 2024 Meu Site. Todos os direitos reservados.</p>
</footer>
</body>
10.2 Microdata
Microdata (structured data) é usada para fornecer aos motores de busca informações adicionais sobre o conteúdo da página. Isso ajuda os motores de busca a compreenderem melhor o conteúdo e melhora a visibilidade da página nos resultados de busca.
Exemplos de esquemas (Schema.org):
- Article: para artigos e notícias
- BreadcrumbList: para breadcrumbs
- Product: para descrição de produtos
- Event: para descrição de eventos
Exemplo de uso de microdata:
<body>
<article>
<h1>Título do Artigo</h1>
<p>Autor: Nome do autor</p>
<p>Data de publicação: 1 de janeiro de 2024</p>
<img src="https://example.com/image.jpg" alt="Exemplo de imagem">
<p>Texto do artigo...</p>
</article>
</body>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Article",
"headline": "Título do Artigo",
"author": "Nome do autor",
"datePublished": "2024-01-01",
"image": "https://example.com/image.jpg"
}
</script>
10.3 Otimização de cabeçalhos e meta tags
Cabeçalhos e meta tags desempenham um papel crucial no SEO, pois fornecem aos motores de busca e usuários informações sobre o conteúdo da página.
Meta tags:
<title>: título da página, exibido nos resultados de busca<meta name="description">: descrição da página, usada nos snippets dos resultados de busca<meta name="keywords">: palavras-chave (não têm grande importância nos motores de busca modernos)
Exemplo de uso de meta tags:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exemplo de título de página</title>
<meta name="description" content="Este é um exemplo de descrição de página para SEO.">
<meta name="keywords" content="exemplo, SEO, HTML">
</head>
<body>
<h1>Título da Página</h1>
<p>Conteúdo da página...</p>
</body>
</html>
10.4 Otimização de imagens
A otimização de imagens inclui o uso de atributos alt e title, além de garantir um tempo de
carregamento rápido por meio do uso de compressão e formatos de imagem modernos (por exemplo, WebP).
Exemplo de uso:
<body>
<h1>Exemplo de otimização de imagens</h1>
<img src="example.jpg" alt="Descrição da imagem" title="Título da imagem" loading="lazy">
</body>
10.5 Breadcrumbs
Breadcrumbs (migalhas de pão) são elementos de navegação que mostram o caminho do usuário desde a página principal até a página atual. Eles ajudam os usuários a se orientarem facilmente no site, fornecendo links para os níveis anteriores de navegação. Este elemento é uma parte importante da interface do usuário, especialmente para grandes sites com uma hierarquia profunda de páginas.
Principais aspectos dos breadcrumbs
Os breadcrumbs são uma cadeia de links que geralmente aparecem na parte superior da página, abaixo do cabeçalho ou do menu. Cada link na cadeia leva a uma das páginas pelas quais o usuário passou para chegar à página atual.
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="/home">Início</a></li>
<li class="breadcrumb-item"><a href="/category">Categoria</a></li>
<li class="breadcrumb-item active" aria-current="page">Página Atual</li>
</ol>
</nav>
Tipos de breadcrumbs:
-
Hierárquicos: mostram a hierarquia do site, começando pela página inicial.
- Exemplo: Início > Categoria > Subcategoria > Página Atual
-
Cronológicos: mostram a sequência de ações do usuário, o que é especialmente útil em processos de navegação ou compras em várias etapas.
- Exemplo: Início > Categoria > Produto > Carrinho > Finalização de Compra
-
Atributivos: usados para exibir atributos ou tags da página atual, especialmente úteis para sites com muitas categorias e filtros.
- Exemplo: Início > Eletrônicos > Telefones Celulares > Smartphones > Apple
Vantagens dos breadcrumbs:
- Melhoria da navegação: permitem que os usuários voltem rapidamente para páginas anteriores.
- Vantagens de SEO: ajudam os motores de busca a entenderem a estrutura do site e a melhorarem sua indexação.
- Facilidade de uso: tornam o site mais intuitivo e fácil de usar.
- Redução da taxa de rejeição: simplificam a navegação, o que pode diminuir a taxa de rejeição, já que os usuários podem facilmente voltar para páginas anteriores, em vez de deixar o site.
Vantagens para SEO
Os breadcrumbs desempenham um papel importante no SEO, pois ajudam os motores de busca a entenderem melhor a estrutura do site e melhoram a navegação para os usuários. O uso correto de breadcrumbs pode impactar positivamente o ranqueamento do site nos resultados de busca.
GO TO FULL VERSION