Mais difícil que sair de um labirinto?
Tags: seo, lighthouse, ranqueamento
Published: 2023-02-01 03:34:28

Achar seu site é mais difícil que sair de um labirinto? Tá na hora de conhecer o SEO.


![Alice (de Alice no país das maravilhas) perdida em um labirinto](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qqxab2os8c4c49jdvswu.png)


É de graça e vai por de forma orgânica (DE GRAÇA) seu site nas principais recomendações de buscas.



DICA 1 - USE SCHEMAS 

![Print de receitas de torta de maça mostrando como o uso dos rich snippets refletem nas buscas](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5ai52nuftmgrczgxdmam.png)

Sabe quando você da um google e tem uma pré-visualização das informações do produto? Usamos os dados estruturados para passar essa informações para a ferramenta de busca como, por exemplo, o Google.
Exemplo de um snippet

```
<script type="application/ld+json">
    {
      "@context": "https://schema.org/",
      "@type": "Recipe",
      "name": "Party Coffee Cake",
      "author": {
        "@type": "Person",
        "name": "Mary Stone"
      },
      "datePublished": "2018-03-10",
      "description": "This coffee cake is awesome and perfect for parties.",
      "prepTime": "PT20M"
    }
</script>
```
Esse é um exemplo que tirei da doc do [Google](https://developers.google.com/search/docs/appearance/structured-data/intro-structured-data?hl=pt-br), você pode usá-la, mas na doc oficial do [schema.org](https://schema.org/docs/documents.html) você vai encontrar vários atributos usados por outras ferramentas de buscas além das usadas pelo Google como Bing, DuckDuckGo, Baidu (usada na China). Exemplo:

```
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Recipe",
  "author": "John Smith",
  "cookTime": "PT1H",
  "datePublished": "2009-05-08",
  "description": "This classic banana bread recipe comes from my mom -- the walnuts add a nice texture and flavor to the banana bread.",
  "image": "bananabread.jpg",
  "recipeIngredient": [
    "3 or 4 ripe bananas, smashed",
    "1 egg",
    "3/4 cup of sugar"
  ],
  "interactionStatistic": {
    "@type": "InteractionCounter",
    "interactionType": "https://schema.org/Comment",
    "userInteractionCount": "140"
  },
  "name": "Mom's World Famous Banana Bread",
  "nutrition": {
    "@type": "NutritionInformation",
    "calories": "240 calories",
    "fatContent": "9 grams fat"
  },
  "prepTime": "PT15M",
  "recipeInstructions": "Preheat the oven to 350 degrees. Mix in the ingredients in a bowl. Add the flour last. Pour the mixture into a loaf pan and bake for one hour.",
  "recipeYield": "1 loaf",
  "suitableForDiet": "https://schema.org/LowFatDiet"
}
</script>
```



DICA 2 - USE OS ATRIBUTOS DAS TAGS

![Uma tag vermelha](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lcw1w31m2klwr1lcp5lu.png)

Descreve o que sua imagem é. Parece besta? E é. Mas isso vai fazer toda a diferença no seu ranqueamento (o que mexe diretamente no seu bolso) e o mais importante NA ACESSIBILIDADE. Seu site será mais inclusivo e isso é um tópico importantíssimo que podemos discutir em um outro post, mas voltando para o SEO, se eu tenho um site onde vendo sapatos e tenho 10 produtos com a descrição desses sapatos, no momento que alguém procurar por um, as minhas chances de aparecer entre os principais resultados são enormes. Foi mais rápido explicar sobre snippets do que sobre alt? Bom, vamos prestar mais atenção nos pequenos detalhes.

Exemplos de tags que impactam positivamente no SEO:
- [title](https://developer.mozilla.org/pt-BR/docs/Web/HTML/Element/title)
- [meta description](https://developers.google.com/search/docs/appearance/snippet?hl=pt-br#:~:text=A%20meta%20description%20tag%20generally,what%20they're%20looking%20for.)
- [Headings (H1-H6)](https://www.w3schools.com/html/html_headings.asp#:~:text=It%20is%20important%20to%20use,make%20text%20BIG%20or%20bold.)
- [Alt nas imagens](https://www.w3schools.com/tags/att_img_alt.asp)
- [HTML semântico](https://www.w3schools.com/html/html5_semantic_elements.asp)


DICA 3 - USE O LIGHTHOUSE

![Um farol vermelho e branco na beira da praia](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pmgjwbaty863hudf9lj7.png)

Eu sou fã número 1 dessa ferramenta. O [Lighthouse ](https://developer.chrome.com/docs/lighthouse/overview/) pode ser adicionado como uma extensão no seu navegador e ele inspeciona seu site com um click e de graça gera relatórios com diversas modificações que vão melhorar a performance, acessibilidade, SEO e Boas Práticas do seu site. Aqui também vai um extra porque ele te da dicas para tornar sua aplicação mobile friendly.
O Lighthouse te ajuda:
- Se sua aplicação tá uma carroça e você não faz ideia de onde está o problema (ele aponta até os scripts carregados em momentos desnecessários)
- Suas imagens que faltam o alt
- Os botões que deveriam ser maiores
Enfim, perfeito e gratuito, usem. 

Vamos fechando por aqui que ninguém aguenta mais uma linha de texto. Eu deixei dicas e links com diferentes fontes para estudo, se divirta e me conta o que aprendeu.