SEO: Mostre ao google quem você é!

Uma das principais ferramentas que o desenvolvedor front-end tem a sua disposição é a 

querida tag <div>. Com ela é muito mais fácil organizar os blocos, estilizar conteúdos

e ter um bom trabalho para centralizar aquela div (piada obsoleta desde 2009). 

Você pode ter feito assim como eu tutoriais e projetos próprios onde tudo era organizado e estilizado por divs,

mas recentemente, em um desafio do FrontendMentor, recebi ótimos feedbacks e orientações 

para utilizar os elemento semânticos do html. Esse elementos colaboram para um melhor SEO - Search Engine Optimization - 

do seu conteúdo para que os buscadores melhor avaliem e indexem nos resultados de busca.

Em resumo, um site bem escrito para que os mecanismos de busca enxerguem os conteúdos de forma mais clara e fácil 

será um site com maiores chances de aparecer nas primeiras pesquisas de um motor de busca como google ou bing. 

Pense que você tem q escolher 2 livros para estudar front-end: um que não há sumários, nem divisões por sessões 

e que você tem que adivinhar onde estão os conteúdos, e outro com sumário, lições, indicação de páginas e até sessões coloridas

para você saber onde estão as informações que precisa.

E é ai que entram as tags semânticas do html.

Segundo o W3Schools:

"Um elemento semântico descreve claramente seu significado para o browser e desenvolvedor."

No meu desafio do FrontendMentor, eu precisava criar um simples QR Code Card, usando apenas html e css.

Na minha primeira versão, disponível na branch master, eu fiz isso aqui:

index.html
<div class="wrapper">
    <div class="card">
      <div class="card-image">
        <img src="./images/image-qr-code.png" alt="qr-code" />
      </div>


      <div class="card-content">
        <span class="content-title">
          Improve your front-end skills by building projects
        </span>


        <span class="content-description">
          Scan the QR code to visit Frontend Mentor and take your coding
          skills to the next level
        </span>
      </div>
    </div>
    <div class="attribution">
      Challenge by
      <a href="https://www.frontendmentor.io?ref=challenge" target="_blank"
        >Frontend Mentor</a
      >. Coded by
      <a href="https://github.com/kailera" target="_blank">Kailera</a>.
    </div>
  </div>

Perceba que foi utilizado div para organizar o card e os componentes do card e  

span para indicar texto. Como você sabe que é uma página que contém apenas um card, ainda passa

não utilizar um elemento semântico que indique o posicionamento e a função daquele componente.

Mas em uma página com diversos componentes como banners, artigos e até cards de diversos tipos, 

como você saberia dizer qual é um card de maior importância se todos estiverem identificados da mesma forma?

E sobre elementos de textos? Por mais que exista as classes

content-title e content-description, <span> não diz nada sobre o 

significado daquele texto na estrutura. Como desenvolvedores estamos habituados a ver 

códigos constantemente e nossa percepção está treinada para isso. Mas devemos pensar que

MILHARES (senão milhões) de páginas são postadas e atualizadas a todo momento e browsers

são apenas robos codificados, não enxergam cores, tamanhos e significados comuns à humanos.

SEO também otimiza os conteúdos para serem apresentados a pessoas com deficiência visual e 

auditiva, que necessitam de cuidados especiais para que a informação seja apresentada e compreendida da forma mais clara 

possível.

Voltando sobre o desafio, recebi ótimo feedbacks e com base neles, criei uma nova branch - correction, onde fiz as

seguintes alterações no html:

index.html (branch correction)
<main id="container">
    <h1 class="visually-hidden">Frontend Mentor project submission</h1>
    <div class="card">
      <div class="card-image">
        <img src="./images/image-qr-code.png" alt="qr-code" />
      </div>


      <div class="card-content">
        <h2 class="content-title">
          Improve your front-end skills by building projects
        </h2>


        <p class="content-description">
          Scan the QR code to visit Frontend Mentor and take your coding
          skills to the next level
        </p>
      </div>
    </div>
    <div class="attribution">
      Challenge by
      <a href="https://www.frontendmentor.io?ref=challenge" target="_blank"
        >Frontend Mentor</a
      >. Coded by
      <a href="https://github.com/kailera" target="_blank">Kailera</a>.
    </div>
  </main>

*no primeiro exemplo, eu fiquei em dúvida de onde a onde eu copiava e colava por causa das divs,

problema que não tive no segundo exemplo.

Nesse segundo exemplo, usei as tags:

- <main> para indicar um conteúdo de destaque no site;

- <h1> para o título "Frontend Mentor project submission" para usuários que 

necessitem de acessibilidade;

- <h2> Para apresentar um título visível no site;

- <p> Para sequências de textos e parágrafos;

Veja que agora fica claro qual é a parte principal do site, títulos e descrições.

O browser entende melhor qual o conteúdo pois as proprias tags indexam essas informações em

sua própria estrutura.

Assim, como desenvolvedor, aprendi que é necessário ter esse olhar de apresentar a informação de forma

organizada e coerente a nível de código. Em uma grande competição para que o nosso conteúdo

seja visualizado, SEO pode literalmente fazer o google nos enxergar em meio a tanta informação disponível na internet.

Deixo aqui o meu desafio, e uma dica: se quer aprender na prática front-end e receber boas orientações, o site FrontendMentor

tem me ajudado a me desafiar e aprender com pessoas experientes.

FrontendMentor:

https://www.frontendmentor.io

Meu desafio de QRCode:

https://github.com/kailera/qrcode.git

Um pouco de historia de SEO:

https://resultadosdigitais.com.br/marketing/o-que-e-seo/#:~:text=SEO%20%C3%A9%20a%20sigla%20de,outros%20buscadores%2C%20gerando%20tr%C3%A1fego%20org%C3%A2nico.

W3School Documentação:

https://www.w3schools.com/html/html5_semantic_elements.asp

Links de Referência:

https://blog.4linux.com.br/semantica-no-html5/

Imagem de Pixabay