Aprenda HTML Semântico – Impulsione o seu SEO

Aprenda HTML semântico e impulsione o SEO da sua página! Entenda o que é SEO e como utilizá-lo para otimizar as buscas pela sua página na internet.

HTML semântico é escrever o código usando as tags que descrevem o significado de cada parte do conteúdo, como header, nav, main, article, section e footer, em vez de recorrer só a divs. Isso deixa a estrutura clara para navegadores e mecanismos de busca, melhora o SEO da página e ainda favorece a acessibilidade e a manutenção do código.

Caso prefira esse conteúdo no formato de vídeo-aula, assista ao vídeo abaixo ou acesse o nosso canal do YouTube!

O que você aprende neste vídeo

Resposta rápida: Partindo do documento padrão que o VS Code gera, a aula monta uma página: ajusta idioma e título, cria a navegação com logo e lista de links, o rodapé e um artigo com <h1> e <h2> coerentes com o título, dizendo o que cada tag informa ao mecanismo de busca. O visual, papel do CSS, fica de fora.

Neste vídeo (20 min):

• 1:40 - Abre a sigla: SEO é search engine optimization, a otimização para mecanismos de busca como Yahoo, Google e Bing.
• 3:04 - Gera o documento HTML padrão no VS Code com ! e Tab e mostra que ele já é semântico, a começar pela declaração do tipo do documento.
• 3:34 - Troca o idioma do documento, no atributo lang, de inglês para português.
• 6:16 - Preenche o <title>, o texto da aba do navegador, que, segundo o instrutor, é uma das coisas mais importantes da página por estar ligado ao tema dela.
• 6:36 - Divide o corpo da página em três grandes seções semânticas: <header> (cabeçalho), <main> (conteúdo principal) e <footer> (rodapé).
• 7:24 - No cabeçalho, cria a barra de navegação com <nav> e os links com o elemento <a>, cujo href diz o destino.
• 8:48 - Copia a linha do link para baixo com o atalho Shift + Alt + seta para baixo do VS Code, para criar os outros links.
• 11:14 - Põe o logo com <img> e um texto alternativo e, ao quebrar de propósito o endereço da imagem, mostra esse texto aparecendo no lugar dela.
• 11:52 - Coloca os links numa lista não ordenada, <ul>, cada um num <li>; a <ol> seria para itens numerados.
• 14:53 - No conteúdo principal, usa <article>, a tag semântica que diz que a página traz um artigo, como um post de blog.
• 16:34 - Dentro do artigo, abre uma <section> com um <h2> e um parágrafo de texto.
• 18:49 - Fecha com um parágrafo de direitos reservados no <footer>; sem CSS, nenhuma das seções aparece delimitada na tela.

Trechos do vídeo:

• O texto alternativo (o atributo alt) é como a página diz ao mecanismo de busca o que a imagem mostra, por exemplo que aquilo é o logo da empresa, mesmo com a imagem aparecendo; e é ele que aparece no lugar dela quando ela não carrega.
• Os títulos vão de <h1> a <h6>, e o tamanho diminui do 1 para o 6. Para a aula, a relevância para o mecanismo de busca cai na mesma ordem, e a regra é um <h1> por página, com <h2>, <h3> e assim por diante abaixo dele.
• O título da página e o <h1> devem tratar mais ou menos do mesmo assunto, sem estar escritos do mesmo jeito: o <h1> diz ao mecanismo de busca qual é o tema central da página.
• Em páginas em português, o charset usado é o UTF-8, por causa de acento, cedilha e til: com outra codificação, esses caracteres podem quebrar.

Para receber por e-mail o(s) arquivo(s) utilizados na aula, preencha:

Aprenda HTML Semântico – Impulsione o seu SEO

Na aula de hoje, quero te ensinar o que é e como utilizar HTML semântico para impulsionar as buscas pela sua página nos mecanismos de pesquisa.

Vou te explicar o que é SEO (Search Engine Optimization), que nada mais é do que otimização para mecanismos de busca, e como utilizá-lo para que sites como Google, Yahoo e Bing encontrem facilmente seu site e façam referência ao conteúdo dele.

O HTML semântico será a forma principal como vamos organizar e melhorar o SEO dentro do código da página, para que ela fique mais fácil de ser encontrada pelos mecanismos de busca.

E aí, curtiu essa ideia? Então, faça o download do material disponível e aprenda HTML semântico para otimizar sua página para os mecanismos de busca.

O que é SEO?

O objetivo dessa aula é te mostrar como podemos usar o HTML, que utilizamos para construir todo e qualquer site na internet, para desenvolver sites otimizados para os mecanismos de busca.

SEO (Search Engine Optimization), nada mais é do que otimização para mecanismos de busca. Ele ajuda na classificação das páginas na internet em sites de busca, como Google, Yahoo, Bing e assim por diante.

O que é HTML Semântico?

HTML semântico é a prática de escrever o código HTML de maneira que o significado e a estrutura do conteúdo sejam claros e expressivos, para que os navegadores e mecanismos de busca possam encontrá-lo e classificá-lo adequadamente.

O HTML semântico envolve o uso apropriado de elementos HTML para transmitir o conteúdo, como o uso adequado das tags e estruturas de acordo com o elemento.

Ao aplicar uma escrita de HTML semântico em sua página, você melhora o SEO dela, assim como a acessibilidade e a manutenção do código, tornando-o mais claro e acessível para humanos e máquinas.

Criando o Documento HTML

Ao longo dessa aula, iremos trabalhar com o VS Code para escrever e editar o nosso arquivo HTML. Caso você não tenha o VS Code instalado e configurado para trabalhar com HTML e CSS, confira essa aula aqui onde te ensino o passo a passo.

Vamos começar criando um arquivo HTML chamado seo.html. Dentro dele vamos digitar ! e apertar Tab para que o VS Code complete com o nosso código HTML padrão para a página.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
</body>
</html>

Esse HTML padrão já pode ser considerado um HTML semântico, pois ele traz os elementos organizados corretamente dentro de suas tags.

Ele inicia o código identificando o tipo do documento (DOCTYPE) como HTML, seguido pela tag <html>, que envolve todo o conteúdo da página. Dentro dessa tag <html>, já temos o idioma da página definido.

HTML e CSS Impressionador

Você vai aprender não só os fundamentos básicos, intermediários e avançados de HTML e CSS, como também vai aprender a integrar com os principais frameworks. Além disso, você vai sair do curso com um portfólio de projetos completo!

Começar agora

O idioma auxilia os mecanismos de busca a identificarem a linguagem em que a página está escrita, sugerindo opções de tradução.

Na <head>, são inseridas as configurações gerais da página, como o tipo de caractere (UTF8) e a responsividade da página (largura e escala). É nele também que temos o título (<title>) do documento, que é o título exibido nas guias do navegador.

Logo abaixo temos o <body>, o corpo do documento, onde inserimos todo o conteúdo visível da página.

Como Dividimos a Página com o HTML Semântico?

Dentro do nosso body, precisamos estruturar a nossa página de forma significativa e acessível. Usando a escrita de HTML semântico, teremos no nosso body 3 principais seções: o cabeçalho (header), a seção principal (main) e o rodapé (footer).

O cabeçalho (<header>) é a seção inicial da página, nela teremos elementos como o logo e as informações essenciais da página.

Na seção principal (<main>), temos o local principal para o conteúdo da página, é nessa seção que reuniremos as informações mais relevantes para os usuários.

E, por fim, no rodapé (<footer>), temos algumas informações complementares sobre a página, como contatos e outros links informativos.

Inserindo Elementos Semânticos no Header

Dentro do header, geralmente temos a barra de navegação, onde agrupamos os elementos de navegação que irão facilitar a experiência do usuário ao explorar o site. Essa barra de navegação deve ficar dentro da tag <nav>, o elemento semântico adequado.

Nessa barra de navegação, podemos ter diversos elementos, como a logo do site e uma lista de links que serão utilizados para navegar entre as páginas e conteúdos presentes.

Para inserir a imagem da logo à barra de navegação, utilizamos a tag <img> com o atributo src que define o caminho da imagem e o atributo alt que fornece uma descrição alternativa para o conteúdo da imagem.

O atributo alt nas tags de imagem é essencial porque fornece uma descrição do conteúdo presente na imagem. Isso auxilia tanto os mecanismos de busca a identificar aquela imagem, como é um importante recurso de acessibilidade.

Além do logo, podemos inserir os links para navegarmos pelas páginas do nosso site dentro de uma unordered list (lista não ordenada), utilizando a tag <ul>. Essa é uma forma eficaz de agrupar itens no HTML quando não queremos numerá-los em ordem.

Dentro da nossa unordered list, precisamos criar nossos list items (<li>), que são os itens da lista. Esses itens serão os links para navegarmos pelas páginas do nosso site.

Como queremos inserir links, devemos fazer isso utilizando as tags de ancoragem (anchor tags) <a>. Para essas tags, passamos o atributo href que define o destino para o qual aquele link deve levar o usuário.

Para o exemplo dessa aula, vou utilizar o logo da Hashtag e o link para algumas das nossas páginas. Construindo esse código de forma a respeitar o HTML semântico, teremos a seguinte estrutura:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <header>
      <nav>
        <img
          src="https://www.hashtagtreinamentos.com/wp-content/uploads/2022/05/Logo-Hashtag-Original-100x45px.png"
          alt="Logo da Hashtag Treinamentos"
        />
        <ul>
          <li><a href="https://www.hashtagtreinamentos.com">Home</a></li>
          <li>
            <a href="https://www.hashtagtreinamentos.com/contato">Contato</a>
          </li>
          <li><a href="https://www.hashtagtreinamentos.com/blog">Blog</a></li>
        </ul>
      </nav>
    </header>  
</body>
</html>

Podemos visualizar essa página utilizando a extensão Live Server do VS Code, clicando com o botão direito do mouse sobre o nome do arquivo HTML e selecionando Open with Live Server.

Isso abrirá a nossa página no navegador.

Observe que temos a estrutura conforme definimos. A página não está formatada e visualmente atrativa porque o foco principal dessa aula é o HTML Semântico, mas poderíamos sim melhorar a visualização e a distribuição dos elementos com CSS.

Inserindo Elementos Semânticos no Main

Com nosso header pronto, precisamos estruturar adequadamente o conteúdo principal da página.

A estrutura do main vai variar conforme o tipo de página ou publicação que você estiver fazendo. Por exemplo, em um blog, temos a presença de um artigo e existe uma tag semântica adequada para indicar a presença de um artigo, que é a <article>.

Dentro dessa tag, vamos dividir as seções e organizar as informações do artigo. Começando pelo título do artigo, podemos inserir uma tag <h1>. As tags de heading variam de h1 até h6, sendo 1 a mais importante e 6 a menos relevante. Essa relevância é considerada também pelos mecanismos de busca.

Vamos pegar como exemplo um artigo do blog sobre Como Usar ChatGPT, esse será o título do artigo, o h1 do nosso artigo.

<main>
      <article>
        <h1>Como usar ChatGPT</h1>

Agora que temos o assunto principal da página, é importante fazermos um ajuste dentro da <head> do nosso código.

O <title> da sua página deve corresponder ao conteúdo presente nela, isso auxilia os mecanismos de busca a identificarem e ranquearem melhor a sua página.

<!DOCTYPE html>
<html lang="pt">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>ChatGPT + HTML e CSS</title>
  </head>

Feito isso, podemos voltar para o desenvolvimento do nosso main. Até o momento, temos a tag <article> que indica que essa é uma página de artigo, e dentro dessa tag temos uma tag <h1> que exibe o título do artigo.

Dentro do nosso artigo, podemos dividir o conteúdo presente nele em seções. Para isso, utilizaremos a tag <section>. Dentro dessa seção, teremos um segundo título, de menor relevância que o título principal do artigo, então utilizaremos uma tag <h2> para ele.

E logo em seguida, podemos definir o texto dessa seção. Esse texto deve estar dentro de uma tag de parágrafo <p>.

<main>
      <article>
        <h1>Como usar ChatGPT</h1>
        <section>
          <h2>Apresentação do ChatGPT</h2>
          <p>
            O ChatGPT é uma inteligência artificial que pode ser acessada por
            meio do site oficial. Ele possui duas versões: a versão 4, que é
            paga, e a versão 3.5, que pode ser utilizada gratuitamente.
          </p>
        </section>
      </article>
    </main>

Visualizando nossa página, teremos o título do artigo, seguido do título da seção e do nosso pequeno parágrafo introdutório sobre ChatGPT.

Qual a importância de utilizarmos o HTML semântico alinhado com um conteúdo condizente e organizado?

Ao analisar sua página, os mecanismos de busca irão verificar o título e os conteúdos (título do artigo, título da seção e parágrafo) dela. Com isso, eles conseguirão reunir informações suficientes para saber se o material disponível nessa página é interessante ou não de acordo com a busca e a necessidade daquele usuário.

Ou seja, nesse caso, um usuário que estivesse buscando sobre como usar o ChatGPT poderia facilmente ter essa página sendo indicada para ele, pois os elementos semânticos da página estão auxiliando os mecanismos a compreenderem sobre o que ela se trata.

Inserindo Elementos no Footer

Para finalizar, no footer da página, podemos ter algumas informações relevantes sobre a empresa ou o site que está sendo acessado.

É comum também encontrarmos uma declaração de direitos autorais nos rodapés do site, indicando que todo o conteúdo daquele site é de propriedade da empresa. Podemos adicionar essa frase ao nosso rodapé.

<footer>
      <p>© 2024 Hashtag Treinamentos. Todos os Direitos Reservados</p>
</footer>

E nosso site ficará assim:

É claro que nesse caso, nosso site não tem um design visual e uma organização eficiente dos elementos que proporcionam uma melhor experiência para o usuário. Mas para isso, precisaríamos estilizar essa página com o CSS.

Perguntas frequentes

Conclusão – Aprenda HTML Semântico – Impulsione o seu SEO

Nessa aula, eu te ensinei o que é e como utilizar o HTML semântico para impulsionar o SEO do seu site e da sua página na internet.

Vimos, através de um exemplo básico, como otimizar seu site para os mecanismos de busca e como o HTML semântico tem um papel fundamental nisso.

É claro que, além da organização adequada do seu código HTML, é muito importante que o conteúdo da sua página e as informações contidas nela façam sentido e se comuniquem corretamente com esses elementos.

Dessa forma, você conseguirá impulsionar o SEO do seu site e deixar suas páginas com um ranqueamento muito melhor nos mecanismos de busca.

Quer aprender mais? Inscreva-se no nosso Curso de HTML e eleve seu conhecimento em SEO e HTML!

Hashtag Treinamentos

Para acessar publicações de HTML e CSS, clique aqui!