Guia Básico de SEO: Como Tornar seu Site Visível nos Mecanismos de Busca

#HTML

Se você já se aventurou pelo mundo da criação de sites, provavelmente já ouviu falar sobre SEO. Mas o que exatamente isso significa?

SEO – É uma abreviação de Search Engine Optimization, traduzido como Otimização para Mecanismos de Busca.

Ou seja, você estará otimizando seu site para que ele apareça nos mecanismos de buscas, (google, bing ou outros navegadores), além de ajudar outros desenvolvedores a entender o seu código.

Vale ressaltar que as tags semânticas não tem efeito na apresentação da página, elas são utilizadas para dar significado ao seu conteúdo o deixando mais claro e ajudando os leitores de tela para que os usuários com deficiência visual possam navegar pela sua página.

Para que ocorra essa otimização é preciso utilizar e compreender um conjunto de técnicas e estratégias que elevem o posicionamento, ou “ranking” do seu site.

Tags que ficam dentro do <head> no HTML:

Descrição do seu site:

<meta name=”description” content=”Compartilhe seus vídeo com amigos, familiares e todo o mundo.”/>

Essa tag, é utilizada para descrever seu site nas pesquisas, então seja claro.

Título do seu site

<tilte> YouTube </title>

Canonical

<link ref=”canonical” href=”https://www.youtube.com” />

A tag canonical no HTML é como uma etiqueta que ajuda os motores de busca, como o Google, a entenderem qual é a página principal quando existem várias páginas com conteúdo muito parecido. Imagine que você tem várias cópias de um livro, mas quer dizer aos leitores qual é a cópia original. É como colocar uma etiqueta na capa do livro original. Assim, quando alguém pesquisa algo relacionado ao conteúdo desse livro, os motores de busca sabem que devem mostrar a versão original nos resultados da pesquisa. Isso evita confusão e ajuda as pessoas a encontrarem exatamente o que estão procurando.

Essa tag é colocada no cabeçalho e especifica a URL canônica da página atual.

Tags que ficam no <body>

Atributo “alt” e a acessibilidade

<img src=”imagem.jpg” alt=”Descrição da imagem” >

As imagens são bem vista pelos mecanismo de busca e adicioná-las em seu site vai agregar um pouco mais de valor a ela. Mas não podemos nos esquecer que esses motores não veem as imagens como nós, e o atributo ALT é o que nos permite descrever do que se trata aquela imagem, tanto para robôs de busca quanto para as pessoas com deficiência visual.

Tags semânticas para uma estrutura melhor:

Tags muitos usadas como <div> e <span> não são semânticas, o que não significa que é proibido o seu uso. Porém, podemos fazer a troca sempre que necessário.

Por elas não terem significado algum, quando vemos um “esqueleto” HTML fica difícil você identificar o conteúdo principal, o rodapé ou até mesmo a sua navegação.

Por isso tente sempre usar tags semânticas, como: <form>, <table>, <footer>, <section>, <main>, <nav> e outros.

Ao invés de fazer seu rodapé assim:

<div class=”footer”> Fim da página, sou um rodapé. </div>

Você pode trocar para:

<footer> Sou um rodapé 😀 </footer>

links úteis: https://developer.mozilla.org/pt-BR/docs/Glossary/Semantics