Aprenda HTML semântico e impulsione o seu SEO da sua página! Entenda o que é SEO e como utilizá-lo para otimizar as buscas pela sua página na internet.
Caso prefira esse conteúdo no formato de vídeo-aula, assista ao vídeo abaixo ou acesse o nosso canal do YouTube!
Para receber por e-mail o(s) arquivo(s) utilizados na aula, preencha:
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 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.
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.
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.
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.
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.
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.
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.
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.
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.
Para acessar publicações de HTML e CSS, clique aqui!
Expert em conteúdos da Hashtag Treinamentos. Auxilia na criação de conteúdos de variados temas voltados para aqueles que acompanham nossos canais.
Quer sair do zero no Python e virar uma referência na sua empresa? Inscreva-se agora mesmo no Python Impressionador