Forem: Gabriel Gomes de Oliveira

SEO técnico na prática: estudo de caso do site Novas árvores por aí

Gabriel Gomes de Oliveira — Tue, 21 May 2024 00:12:46 +0000

Sejam bem-vindos a mais um post sobre SEO! Anteriormente eu expliquei alguns conceitos sobre o que é o tal do Search Engine Optimization e hoje quis fazer algo mais "mão na massa".

Muito do conteúdo que vejo é teórico, então decidi utilizar um site real para fazer análises e colocar em prática aquilo que aprendemos.

O site que vamos analisar é o "Novas árvores por aí". Uma ONG que ajuda a repaginar cidades tornando-as mais verdes.

Segundo o próprio site:

O Novas Árvores por Aí nasceu para resgatar o verde das matas, há muito trocado pela paisagem cinzenta das grandes cidades. Idealizado pelo ambientalista Nik Sabey, promove desde o plantio de árvores calçadas ao cultivo de pequenos bosques urbanos. Atua também com projetos de paisagismo, jardins de chuva, palestras, cursos, e afins, buscando sempre o resgate da nossa biodiversidade.
O Novas é uma iniciativa que visa incentivar, fomentar, promover e instruir o plantio de árvores nativas.

Eu não sou o mantenedor do site da organização, portanto não conseguirei modificar e ver os resultados das mudanças que estarei sugerindo aqui. Entretanto, pedi permissão para o dono do projeto através do Instagram e ele permitiu que eu fizesse essa análise.

O que é SEO on-page?

SEO on-page é um conjunto de técnicas e estruturas que executamos em nossas páginas para ajudar o robô dos mecanismos de pesquisas (Google, Bing, DuckDuckGo, etc) a trilharem seu caminho com tranquilidade e mostrarem nosso site em seus resultados.

Análise do SEO on-page

Para fazer a análise de SEO on-page do Novas árvores por aí vamos utilizar diversas ferramentas. Elas vão servir para apontar as falhas e sugerir mudanças que podemos fazer para melhorar a estrutura da nossa página perante os robôs.

Busca no Google

A primeira ferramenta que podemos usar é o próprio Google. Uma simples busca já revela muita coisa. Ao pesquisarmos o nome da organização temos esse resultado:

Nota-se que não é um dos melhores resultados. Não temos um ícone que faça o resultado se destacar, não temos a breve descrição do que aquele site representa e até o título está reduzido. Somente nessa primeira pesquisa, notamos 3 pontos de melhoras:

Adicionar metatag de description;
Verificar o porquê o robô do Google não está mostrando o completo do site (a tag está com o conteúdo 'Novas Árvores por Aí | Nasceu para resgatar o verde das matas', porém o resultado só mostra a primeira parte)
Adicionar a tag que aponta para o favicon.

Análise no Lighthouse

Em seguida, vamos para a ferramenta Lighthouse, que possui uma opção de análise de SEO:

Além da falta de metatag de description, a extensão também apontou que o site está com uma metatag de robots para noindex e o arquivo robots.txt também. Ou seja, está dizendo para os robôs não indexarem aquela página nos resultados de pesquisa. Apesar da página ainda aparecer, isso é algo que prejudica o desempenho do site na listagem. Tanto que se buscarmos por "ong árvores", "ong novas árvores" ou "ong árvores por aí", que remetem à ong em questão, o site sequer aparece. Várias outras ficam na frente, ou, ainda, as próprias redes sociais da Novas Árvores por Aí se destacam, ignorando a existência do site. Logo, temos mais um a fazer:

Alterar valor de metatag robots de "noindex" para "index";
Remover valor 'noindex' do arquivo robots.txt.

Análise na Detailed SEO

Agora vamos utilizar a extensão Detailead SEO para verificar o que mais precisamos ajustar em nosso site.

Em primeiro momento, temos essa visão geral do site:

O title está tudo certo, mas, conforme vimos previamente, estamos sem descrição. Além disso, nossa url está como 'not indexable', mostrando mais uma vez a ausência do valor 'index' na meta tag de robots. Visto que já tinhamos isso em nossa lista, seguimos.

Agora temos novos pontos de atenção: não possuímos meta name="keywords" que definiria nossas palavras-chave e o html do site está na linguagem en-US, sendo que ele é do Brasil! Logo, acrescentamos em nossa lista:

Adicionar meta tag de keywords com as palavras-chave referentes ao nosso site; (ex: árvores, ong, reflorestamento).
Adicionar propriedade lang='pt-br' na tag <html> (importante para motores de busca e leitores de acessibilidade).

Agora, olhemos os headings da página:

Temos diversos headings iguais, o que o mecanismo de busca pode considerar spam; além disso, a ordem dos headings está invertida (em teoria, o h1 deveria ser o primeiro na página). Outro ponto importante é que o h1 está sendo usado lá embaixo, na terceira dobra da página, com algo que não é o título principal e sim uma seção secundária da página. Com isso, adicionamos em nossa lista:

Reorganizar os títulos e remover títulos duplicados.

Agora, na aba 'Images' da extensão Detailed SEO temos uma informação importante: muitas imagens estão sem título e sem descrição alternativa. Ambos são importantes para a acessibilidade de nosso site.

Logo, mais uma ação:

Adicionar título e alt text nas imagens.

Lembrando que se uma imagem tem apenas valor estético, ela não necessariamente precisa de um texto descritivo. Mas, se fizer parte de algum contexto, se ela fornece ao usuário alguma informação, o texto alternativo é essencial.

Já na aba 'Schema', vemos os dados estruturados da página. E logo vemos que não há nenhum!

Eu já fiz uma outra publicação explicando o que são, para que servem e como criar dados estruturados em sua página, portanto, não irei aprofundar esse assunto aqui. Porém, é válido colocar em nossa lista:

Adicionar dados estruturados de Organização do tipo 'NGO' (organização não governamental e que não visa lucro).

Ações de melhoria

Com tudo isso exposto, podemos agrupar os problemas que observamos e temos as seguintes ações:

Adicionar metatag de description;
Verificar o porquê o robô do Google não está mostrando o completo do site (a tag está com o conteúdo 'Novas Árvores por Aí | Nasceu para resgatar o verde das matas', porém o resultado só mostra a primeira parte);
Adicionar a tag que aponta para o favicon;
Alterar valor de metatag robots de "noindex" para "index";
Remover valor 'noindex' do arquivo robots.txt;
Adicionar meta tag de keywords com as palavras-chave referentes ao nosso site; (ex: árvores, ong, reflorestamento);
Adicionar propriedade lang='pt-br' na tag <html> (importante para motores de busca e leitores de acessibilidade);
Reorganizar os títulos e remover títulos duplicados;
Adicionar título e alt text nas imagens;
Adicionar dados estruturados de Organização do tipo 'NGO' (organização não governamental e que não visa lucro).

Tendo isso em mente, vem a pergunta: "Depois que eu resolver isso, quanto tempo demora para que a minha página apareça no primeiro resultado de todas as pesquisas no Google?". E, infelizmente, não é assim que funciona.
SEO é um grupo de técnicas para melhorar o modo que os robôs veem e navegam pela nossa página. Mas, não necessariamente, isso significa que nosso site vai se tornar o primeiro nas buscas apenas por termos ajustado tudo de acordo. Esse é, na verdade, o primeiro passo de muitos. Temos que nos perguntar diversas outras coisas: como está a performance do nosso site? Nós estamos respondendo as perguntas que o nosso usuário tem quando ele entra em nosso site? As informações do nosso site estão atualizadas?

O SEO on-page tratado aqui é o primeiro passo. Temos também o SEO off-page (linkagem de outros sites para o seu, marketing, etc), o conteúdo e relevância da nossa página e/ou produto para nos preocupar. E isso vai muito além de decisões de desenvolvimento/engenharia.

No fim, não é atoa que exista toda uma área para análise de SEO e métricas através de analytics, mas esse são pontos que tratamos conforme vamos nos aprofundando nessa matéria.
Essas são apenas algumas ferramentas e práticas que podemos utilizar para ajustar nossos sites. Caso você se interesse mais, recomendo acompanhar o conteúdo do blog de Central de Pesquisa do Google e empresas especializadas na área, como MOZ e Semrush, que estão sempre ensinando algo ou informando dados sobre as ferramentas de pesquisa.

Meus agradecimentos à ONG Novas Árvores por Aí que me permitiu fazer esse post (sigam eles no Instagram); e obrigado para quem leu até aqui, até a próxima!

P.S: caso você encontre qualquer erro ou tenha uma sugestão de como melhorar essa publicação fique à vontade para me mandar uma mensagem ou comentar abaixo. Críticas são sempre bem-vindas. :)

Usando Stimulus para mostrar o nome da imagem no input de arquivo

Gabriel Gomes de Oliveira — Thu, 28 Mar 2024 23:26:31 +0000

Oi, mais um post rápido para ensinar o que acabei de aprender: a usar o Stimulus para conseguir mostrar ao usuário o nome do arquivo que ele está fazendo upload no input tipo 'file'.

É bem chato não mostrar isso para o usuário e, apesar de ser algo bem simples de ser feito com Javascript puro, eu queria aprender como se faz usando o Stimulus!

Primeiro, adicionamos nosso data-controller na tag que engloba o nosso input. No caso, estou modificando um formulário de criação de livros na minha biblioteca pessoal

app/views/books/new.html.erb

  <div data-controller="file-input">
    <label for="file">Escolha uma imagem para capa do livro</label>
    <input type="file" id="file" name="file" />
    <p>Nenhum arquivo selecionado...</p>
  </div>

Depois, criamos o file_input_controller para manipular essa estrutura.

app/javascript/controllers/file_input_controller

import { Controller } from "@hotwired/stimulus";

export default class extends Controller {
}

Precisamos então pensar quais são nossos "alvos", targets, para nossas ações. Queremos que nosso usuário veja o nome do arquivo selecionado após o input, então precisamos verificar o momento que ele faz essa seleção e também precisamos do local onde colocaremos a informação. Então, nossos targets são o input em si e o parágrafo logo em seguida, que mostra ou não se um arquivo foi escolhido.

app/views/books/new.html.erb

  <div data-controller="file-input">
    <label for="file">Escolha uma imagem para capa do livro</label>
    <input type="file" id="file" name="file" data-file-input-target="input" />
    <p data-file-input-target="fileName">Nenhum arquivo selecionado...</p>
  </div>

Criamos também as variáveis dos targets em nosso controller:

app/javascript/controllers/file_input_controller

import { Controller } from "@hotwired/stimulus";

export default class extends Controller {
  static targets = ["input", "fileName"];
}

Precisamos pensar agora em que momento queremos averiguar essa informação. Ou seja, quando o usuário vai querer ter essa interação com o formulário ou quando ela tem que estar disponível para ele?

Oras, imediatamente, assim que a página é carregada, isso já precisa estar disponível funcionalmente.

Dessa forma, vamos chamar o método connect(), que é um lifecycle callback do Stimulus, uma função nativa que vai ser chamada assim que o nosso controller for conectado com alguma parte da DOM.

Como nós queremos verificar se o usuário adicionou um arquivo pelo input, precisamos adicionar algo que observe qualquer mudança nesse elemento e modifique o texto com o nome do arquivo.

Assim, temos o seguinte:

app/javascript/controllers/file_input_controller

import { Controller } from "@hotwired/stimulus";

export default class extends Controller {
    static targets = ["input", "fileName"];

    connect() {
      this.inputTarget.addEventListener("change", this.updateFileName.bind(this));
    }

    updateFileName() {      
      if (this.inputTarget.files.length > 0) {
        this.fileNameTarget.textContent = this.inputTarget.files[0].name;
      }
    }
}

Explicando tudo, assim que o controller se conectar com o elemento DOM com o atributo data-controller="file-input", ele vai buscar o target input (marcado com o atributo data-file-input-target="input") e vai adicionar o "observador de eventos" de change, conectando o contexto do controller para a função updateFileName.

A função updateFileName vai ser ativada quando o valor do input for alterado, verificando se há algum arquivo e, se houver, irá alterar o conteúdo do elemento marcado com o fileNameTarget para o nome do arquivo. E voilà, é isso, acabou.

Parando pra pensar agora, acho que eu quero mostrar a imagem para o usuário também, mas isso eu faço outro dia! Abraço

Stimulus é um tesão (ou Como fazer uma navbar responsiva em Rails 7 e Bulma CSS)

Gabriel Gomes de Oliveira — Fri, 01 Mar 2024 00:20:31 +0000

Esse post é bem rápido e simples, pra seguir ele é necessário conhecimento básico em Ruby on Rails. Se você já manja muito de Rails e Stimulus, esse post não é para você! (por isso a #beginners XD).

De toda forma, gostaria de deixar registrado como aprendi a fazer uma simples navbar responsiva para um projetinho Rails 7 em que estou trabalhando.

Configurações

Ruby 3.3.0
Rails 7.1.3
gem bulma-rails na versão 0.9.4
gem "stimulus-rails"

Pequenos detalhes

Pra esse exemplo estou usando o código "Basic navbar" do Bulma CSS.

O problema que eu quero resolver com esse post é o uso de javascript no projeto Rails.
Para abrir e fechar a navbar, a documentação do Bulma CSS sugira que eu use esse código:

document.addEventListener('DOMContentLoaded', () => {

  // Pega todos os elementos "navbar-burger"
  const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);

  // Adiciona o evento de click em cada um deles
  $navbarBurgers.forEach( el => {
    el.addEventListener('click', () => {

      // Pega o alvo a partir do atributo "data-target" que vem no navbar
      const target = el.dataset.target;
      const $target = document.getElementById(target);

      // Alternar a classe "is-active" do Bulma CSS tanto no "navbar-burger" e no "navbar-menu"
      el.classList.toggle('is-active');
      $target.classList.toggle('is-active');

    });
  });

});

A questão é que eu estava tendo dificuldades para adicionar isso na minha aplicação e sempre que eu trocava de rota, a navbar parava de abrir. O código só funcionava uma vez.
Quando perguntei no grupo do Telegram Ruby Brasil a respeito, me foi sugerido que eu fizesse um "controller do Stimulus"
Eu já tinha ouvido falar a respeito dessa ferramenta, mas ainda não tinha tentado usá-la; então fui aprender.

Stimulus

Sem me aprofundar muito no assunto, o Stimulus é uma "framework de Javascript modesta para o HTML que você já tem". Ou seja, ele é uma ferramenta que te ajuda a manipular seu documento HTML usando javascript e alguns atributos especiais nas tags HTML.

Como eu quero fazer um controller relacionado ao navbar, eu criei dentro da pasta app/javascript/controllers o arquivo navbar_controller.js.
Inicializei ele da forma padrão:

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {}

Depois disso, criei uma partial navbar com o código do Basic Navbar do Bulma CSS

app/views/layouts/_navbar.html.erb

<nav class="navbar is-transparent container is-max-desktop">
  <div class="navbar-brand">
    <a class="navbar-item" href="/">
      <img src="https://bulma.io/images/bulma-logo.png" alt="Bulma: a modern CSS framework based on Flexbox" width="112" height="28">
    </a>
    <div class="navbar-burger">
      <span></span>
      <span></span>
      <span></span>
    </div>
  </div>

  <div class="navbar-menu">
    <div class="navbar-start">
      <a class="navbar-item" href="/">
        Início
      </a>
      <a class="navbar-item" href="/books">
        Catálogo
      </a>
      <a class="navbar-item" href="/">
        Assinatura
      </a>
      <a class="navbar-item" href="/books/new">
        Adicionar livro
      </a>
    </div>

    <div class="navbar-end">
      <div class="navbar-item">
        <div class="field is-grouped">
          <p class="control">
            <a class="bd-tw-button button">
              <span>
                Entrar
              </span>
            </a>
          </p>
          <p class="control">
            <a class="button is-primary">
              <span>Criar conta</span>
            </a>
          </p>
        </div>
      </div>
    </div>
  </div>
</nav>

O que precisamos fazer é adicionar a classe "is-active" à div com a classe "navbar-menu" quando a div "navbar-burger" receber um click, e depois remover a classe "is-active" quando o burger receber outro click.
Dessa forma, precisamos estabelecer para o navbar_controller qual é a "área" que ele vai atuar, ou seja, qual elemento vai ser controlado ou gerenciado.
Para isso, colocamos o atributo data-controller="navbar" em nosso navbar, ficando assim:

<nav class="navbar is-transparent container is-max-desktop" data-controller="navbar">

Depois, precisamos definir qual elemento vai possuir a ação gerenciada pelo controller. Como queremos que seja o navbar-burger, colocamos um atributo chamado data-action, cujo valor tem o seguinte formado: ação->controller#função
O navbar burger fica assim:

<div class="navbar-burger" data-action="click->navbar#toggle">

E então precisamos ver qual é o elemento que será afetado por essa ação. Nosso "alvo" é o menu em si. Então, devemos colocar o atributo data-controller-target, substituindo "controller" pelo nome dado ao nosso controller. Ou seja:

<div class="navbar-menu" data-navbar-target="menu">

Mas aí você se pergunta: que diabo de função é essa?
E eu te respondo!
Lá no nosso navbar_controller.js, vamos adicionar a função toggle(), que é a função que vai ser ativada quando houver um click no navbar-burger.
A função vai pegar o elemento "alvo" (target) e fazer a alternação na classe "is-active". Só que para pegar nosso elemento alvo, precisamos registrá-lo.

app/javascript/controllers/navbar_controller.js

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
    static targets = ["menu"];
}

Todos nossos targets devem ser registrados dentro desse array, passando o valor que colocamos no atributo "data-navbar-target".
Dessa forma, conseguiremos acessar nosso target a partir da expressão this.menuTarget.
Assim, conseguiremos acessar toda a estrutura HTML desse elemento, podendo inclusive manipular suas classes! E, portanto, resolvendo nosso problema:

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
    static targets = ["menu"];

    toggle() {
        this.menuTarget.classList.toggle('is-active');
    }
}

Com isso, conseguimos reduzir todas aquelas 7 linhas de JS puro em 3 atributos HTML e uma função simples com Stimulus.
Eu achei bem divertido fazer isso, é um código extremamente simples e fico imaginando as diversas possibilidades mais complexas as quais essa ferramenta pode nos ajudar a atuar.
Espero que essa publicação seja útil a alguém e é isso!
Para mais exemplos de Stimulus recomendo fortemente sua documentação e as aulas do The Odin Project!

Melhore os resultados de pesquisa do seu site com Dados Estruturados

Gabriel Gomes de Oliveira — Mon, 09 Oct 2023 15:00:00 +0000

O que são Dados Estruturados?

Sabe quando dá aquela vontade de comer um doce maneiro e você joga no Google "receita bolo de cenoura" e vários resultados com foto, avaliações e tempo de preparo aparecem? Tipo assim:

Os dados estruturados são uma formatação específica na qual essas informações precisam ser colocadas para que os resultados das pesquisas tenham um certo destaque, um embelezamento, igual esses cards de receitas.

Por que utilizar Dados Estruturados?

Como podemos ver acima, utilizar essa ferramenta faz com que os resultados sejam apresentados de maneira mais chamativa e acertiva para o nosso usuário.
Ele não é um fator que fará seu site aparecer nos primeiros resultados de pesquisa, mas existem estudos que demonstram uma melhora no posicionamento das páginas que utilizam o formato.
Segundo a própria Google:

O Rotten Tomatoes adicionou dados estruturados a 100 mil páginas únicas e mediu uma taxa de cliques 25% maior nas páginas aprimoradas com dados estruturados, em comparação às páginas sem esse recurso.

O Food Network converteu 80% das páginas deles para ativar os recursos de pesquisa e registrou um aumento de 35% nos acessos.

A Rakuten descobriu que os usuários passam 1,5 vez mais tempo acessando páginas com dados estruturados do que em páginas sem dados estruturados. Além disso, há uma taxa de interação 3,6 vezes maior em páginas AMP com recursos de pesquisa.

A Nestlé identificou uma taxa de cliques 82% mais alta nas páginas que exibem pesquisas aprimoradas em comparação às que não apresentam o recurso.

Ou seja, é sem dúvida algo essencial para aprimorar o SEO da suas páginas e facilitar a vida do usuário para que ele encontre as respostas corretas para a busca que fez.

De onde vem os Dados Estruturados?

Essa formatação foi criada pela organização Schema.org para padronizar os dados nas páginas web e oferecer uma melhor experiência para os usuários. A organização foi fundada e é mantida por um grupo de empresas compostas pela Google, Microsoft, Yahoo e Yandex.
O projeto é open-source e pode ser encontrado no Github.

Tipos de Dados Estruturados

Anteriormente vimos que receitas são um dos tipos de dados estruturados que faz com que a Google apresente o resultado com uma formatação diferenciada. Além de receitas, livros, produtos, perguntas frequentes, filmes, anúncios de emprego e vídeos, também aparecem de forma diferenciada nos resultados quando formatados com dados estruturados.
Apesar do Schema.org ter criado um formato para praticamente tudo o que existe, não é todo tipo de conteúdo que será "estilizado" pelo Google. Há uma lista que pode ser encontrada na documentação da Central de Pesquisa que mostra tudo o que é possível fazer com essas formatações.
De qualquer forma, ainda que você atue com um dado não tratado pelo Google, é interessante já deixar a formatação de acordo com o que o Schema.org propõe, uma vez que a ferramenta de pesquisa está em constante atualização e novas formas podem ser acrescentadas ao longo do tempo.

Formatação dos Dados Estruturados

Há três tipos de formatação de dados estruturados propostos no site da Schema.org e aceitos pelo Google: Microdata, RDFa e JSON-LD. Eu particularmente utilizei apenas o formato JSON-LD e ele é o mais recomendado pela Google atualmente, mas você vai ter que julgar, dependendo da linguagem de programação ou framework que utiliza, qual é a forma de implementação mais vantajosa para seu projeto.

Utilizando Dados Estruturados

Vamos pegar o exemplo dos dados estruturados para uma receita. Ao entrar na Schema.org, encontramos a entidade "Recipe": https://schema.org/Recipe
Temos uma tabela imensa com todas as possíveis propriedades que essa entidade pode possuir, mas podemos pular lá para o final da documentação e seguir os exemplos que ela propõe.
Se você tiver um site ou blog de receitas, por exemplo, vemos que todas as informações necessárias para criar os dados estruturados, em tese, já estariam em seu site, você apenas teria que criar uma tag <script type="application/ld+json"> na tag <head> do seu HTML preenchendo as informações necessárias no formato correto, como o da receita de bolo de cenoura, retirado no site da "Tudo Gostoso":

<script type="application/ld+json">
{
  "@context": "http://schema.org/",
    "@type": "Recipe",
    "name": "Bolo de cenoura",
    "url": "https://www.tudogostoso.com.br/receita/23-bolo-de-cenoura.html",
    "image" : {
        "@context": "http://schema.org",
        "@type": "ImageObject",
        "author": {
                    "@context": "http://schema.org",
                    "@type": "Organization",
                    "name": "TudoGostoso"
                },
        "url": "https://static.itdg.com.br/images/1200-675/d290bc79bcad112ee9095604e45eb262/365326-original.jpg"
    },
    "author": {
        "@context": "http://schema.org",
        "@type": "Organization",
        "name": "TudoGostoso"
    },
    "datePublished": "2019-04-01",
            "description": "Confira como fazer essa receita de bolo de cenoura simples e f&amp;aacute;cil, nossa campe&amp;atilde; de acessos! Uma receita pr&amp;aacute;tica, feita com aux&amp;iacute;lio do liquidificador e perfeita para o caf&amp;eacute; da manh&amp;atilde; e para a hora do lanche!",
        "aggregateRating": {
        "@type": "AggregateRating",
        "reviewCount": "156",
        "ratingValue": "4.7",
        "ratingCount": "14387",
        "bestRating": 5,
        "worstRating": 1
    },        "keywords" : "Receita de Bolo de cenoura",            "prepTime": "PT40M",                "totalTime": "PT40M",    "recipeYield": "8 porções","recipeCategory" : "Bolos e tortas doces",
            "recipeIngredient": ["1\/2 xícara (chá) de óleo","3 cenouras médias raladas","4 ovos","2 xícaras (chá) de açúcar","2 e 1\/2 xícaras (chá) de farinha de trigo","1 colher (sopa) de fermento em pó","1 colher (sopa) de manteiga","3 colheres (sopa) de chocolate em pó","1 xícara (chá) de açúcar","1 xícara (chá) de leite"],        "recipeInstructions": [{
                "@type": "HowToStep",                    "name": "Massa",
                "text": "Em um liquidificador, adicione a cenoura, os ovos e o &amp;oacute;leo, depois misture.",
                "url": "https://www.tudogostoso.com.br/receita/23-bolo-de-cenoura.html#recipe-step1"
            },{
                "@type": "HowToStep","text": "Acrescente o a&amp;ccedil;&amp;uacute;car e bata novamente por 5 minutos.",
                "url": "https://www.tudogostoso.com.br/receita/23-bolo-de-cenoura.html#recipe-step2"
            },{
                "@type": "HowToStep","text": "Em uma tigela ou na batedeira, adicione a farinha de trigo e depois misture novamente.",
                "url": "https://www.tudogostoso.com.br/receita/23-bolo-de-cenoura.html#recipe-step3"
            },{
                "@type": "HowToStep","text": "Acrescente o fermento e misture lentamente com uma colher.",
                "url": "https://www.tudogostoso.com.br/receita/23-bolo-de-cenoura.html#recipe-step4"
            },{
                "@type": "HowToStep","text": "Asse em um forno preaquecido a 180&amp;deg; C por aproximadamente 40 minutos.",
                "url": "https://www.tudogostoso.com.br/receita/23-bolo-de-cenoura.html#recipe-step5"
            },{
                "@type": "HowToStep",                    "name": "Cobertura",
                "text": "Despeje em uma tigela a manteiga, o chocolate em p&amp;oacute;, o a&amp;ccedil;&amp;uacute;car e o leite, depois misture.",
                "url": "https://www.tudogostoso.com.br/receita/23-bolo-de-cenoura.html#recipe-step6"
            },{
                "@type": "HowToStep","text": "Leve a mistura ao fogo e continue misturando at&amp;eacute; obter uma consist&amp;ecirc;ncia cremosa, depois despeje a calda por cima do bolo.",
                "url": "https://www.tudogostoso.com.br/receita/23-bolo-de-cenoura.html#recipe-step7"
            }]
}
</script>

Observando a estrutura acima, vemos todas as informações necessárias para que o robô da Google chegue em nosso site e mostre em seus resultados o que ele oferece, no caso, a receita de bolo de cenoura. Temos ali o tipo de dado estruturado (receita), o autor da receita, a descrição da receita, links para imagens, o passo a passo, os ingredientes.
Também vemos que dentro de uma mesma entidade temos algumas outras entidades, como imagem (ImageObject), autor (Author), avaliação agregada (AggregateRating), "passo a passo de como fazer" (HowToStep).
De início pode parecer muita coisa, mas esse tipo de informação não precisa ser decorada ou lembrada, cada estrutura segue um padrão e há diversos exemplos tanto no site do Schema.org, quanto no próprio guia de recursos da Google, que inclusive é um local de consulta recomendado justamente para você ver quais são as informações mais importantes de cada estrutura que a Google usa nas pesquisas.

Validando os Dados Estruturados

Supondo que fizemos tudo isso do 0 e queremos validar essa estrutura de receita, podemos pegar essa estrutura e jogar no site de teste de pesquisa aprimorada que a própria Google oferece:

Ali temos nosso código e cada dado estruturado é um "item" que a ferramenta vai validar. Se esquecermos ou omitirmos alguma informação, por exemplo os ingredientes da receita, isso faz com que a estrutura seja inválida. Nesse caso, precisaríamos ajustar essa informação.

Na imagem acima temos uma lista com 1 erro crítico e 17 erros não críticos. É essencial solucionar o crítico, mas como os não críticos são opcionais, fica de acordo com as suas prioridades, pois não necessariamente são fatores que atrapalhariam o ranqueamento, ainda que sejam informações úteis aos usuários.

Resumo da ópera

É tudo bem simples para falar a verdade. Acho que podemos resumir isso em um passo a passo:
Identificar os dados -> encontrar a estrutura -> preencher a estrutura com os dados necessários -> validar.
Se na validação surgir algum problema, é só fazer os ajustes necessários.

Ferramentas úteis

Você certamente não vai validar esses dados "à mão"! Sem dúvida alguma isso tudo é muito trabalho para ser feito sem ajuda! Para isso, há diversas ferramentas que podem nos ajudar a criar, validar e até a verificar quais dados estruturados outros sites utilizam para que possamos nos inspirar.

Ferramentas para criação

Editor e gerador para o formato JSON-LD: https://json-ld.org/playground/)
Gerador para o formato JSON-LD: https://technicalseo.com/tools/schema-markup-generator/

Ferramentas para validação

A própria Google tem seu validador, que vinculado com o seu site irá te alertar via e-mail todas as alterações e erros de dados estruturados que você possuir: https://search.google.com/test/rich-results
A Schema.org também possui o seu próprio validador: https://validator.schema.org/

Ferramentas de verificação

Há diversas extensões para diversos navegadores que vasculham o site que você precisar verificar. Essas são algumas que eu utilizei:

OpenLink Structured Data Sniffer muito útil para analisar quais dados estruturados estão presentes e em qual formato eles foram colocados no site que você ativar a extensão. Porém a sua interface não é tão bacana;
Detailed SEO Extension é uma extensão delicinha que não só vai te mostrar dados estruturados como diversos outros aspectos de validação de SEO, como a utilização de meta tags, headings, estrutura HTML, etc.

Finalização

Os dados estruturados são uma de muitas ferramentas relacionadas ao SEO de uma página web. Se você não sabe o que é SEO, eu tenho uma publicação a respeito disso aqui mesmo:

Introdução ao SEO

Gabriel Gomes de Oliveira ・ May 16 '22

#seo #webdev #tutorial #portuguese

Esse é um assunto bem extenso, mas caso você queira se aprofundar nele eu recomendo fortemente a leitura do Centro de Pesquisas da Google, lá você vai encontrar vários exemplos e tudo o que o motor de busca leva em consideração quando o robozinho deles passa no seu site.

Cabe lembrar que não existem métodos de fazer com que sua página apareça em 1° lugar nas pesquisas imediatamente. Esse é um trabalho que demora meses e possivelmente anos. Seguir todas as recomendações ajuda muito, mas não há receita mágica para isso (apesar dos gurus de SEO estarem tentando descobrir algo assim desde sempre).

De qualquer forma, é uma área em constante mudança e que requer estudo, como todos os outros assuntos da programação!

Bom, tudo isso posto, agradeço a atenção de vocês e tô indo ali comer meu bolinho de cenoura

(Eu juro que tem cenoura embaixo de toda essa cobertura)

Introdução ao SEO

Gabriel Gomes de Oliveira — Mon, 16 May 2022 12:02:31 +0000

Por que aprender sobre SEO?

Desde que comecei a estudar desenvolvimento web sempre ouvi frases como "Temos que usar as tags HTML corretamente para melhorar o desempenho do SEO", mas eu nunca soube nada além disso.
Quando mudei de time no trabalho e passei a integrar o time de tráfego (onde um dos objetivos é aumentar o número de visitas no site da empresa), o assunto começou a aparecer com frequência e vi que precisava aprender a respeito.
Resumidamente, o estudo de SEO gira em torno de um conjunto de ferramentas, termos e práticas que devem ser padronizadas tanto na área de produto quanto na área de desenvolvimento para que um site possua uma boa relevância, apareça e se mantenha como um resultado acima das empresas concorrentes nos mecanismos de pesquisa.
SEO é uma área de estudos densa, extremamente específica e relativamente nebulosa. O que eu quero dizer com isso é: existem boas práticas para melhorar o desempenho do SEO, mas em certo momento não dá para saber exatamente como os mecanismos de pesquisa funcionam com profundidade, isso porque nem mesmo os funcionários da Google sabem como funciona o algoritmo de pesquisa muito bem.
De todas as formas, existem sim ferramentas para medir tudo isso e boas práticas que podemos adotar. Os desenvolvedores também deveriam aprender esse tema, uma vez que ele está vinculado diretamente com nossa área e, dependendo do site de seu cliente, é totalmente relevante para ele que seu site tenha um bom ranqueamento nas pesquisas (ou seja, apareça nas primeiras colocações no resultado das pesquisas feita pelos usuários).

O que é SEO?

SEO, search engine optimization, é exatamente o que a tradução literal diz: a otimização do mecanismo de pesquisa. Os mecanismos de pesquisa são: Google, Bing, DuckDuckGo, Baidu, dentre outros.
Essa otimização se dá pelo conjunto de boas práticas adotadas tanto pelos desenvolvedores quanto por aqueles que inserem algum tipo de conteúdo no site, seja produtos num ecommerce, publicações em um blog de receitas, notícias em algum portal ou qualquer informação importante.
Aprimorar o SEO significa:

melhorar a visibilidade em mecanismos de pesquisa (Google, Bing, DuckDuckGo, Baidu, etc);
aumentar o tráfego orgânico no seu site (ou seja, quando você não precisa para aparecer como um link patrocinado no topo das pesquisas);
facilitar as pessoas a acharem o seu site (você pode ter o melhor site de receitas do mundo, mas se ele estiver na segunda página do Google ninguém vai até lá para encontrá-lo);
estar ranqueado em melhores posições nos resultados quando as pesquisas usam palavras-chave relevantes ao seu serviço.

Por que SEO é importante?

Existe um ditado famoso chamado "quem é visto não é lembrado". E basicamente é isso. As práticas de SEO, unidas com práticas de marketing, são coisas que fazem com que mais pessoas encontrem seu produto final.
Mas SEO não é só sobre seu produto ser visto ou ele aparecer em primeiro em todas as pesquisas, é sobre a experiência do usuário ser boa e ele conseguir encontrar o que estava procurando.
O Guia de SEO para iniciantes, da Google, resume esse conceito no seguinte trecho:

Em geral, o processo de otimização de mecanismos de pesquisa (SEO) se dá com a realização de pequenas modificações em partes do seu site. Essas mudanças podem parecer pequenas melhorias quando vistas individualmente, mas, combinadas com outras otimizações, o impacto em termos de experiência do usuário e de resultados da pesquisa orgânica é notável.

Tráfego pago versus tráfego orgânico

Anteriormente, quando citei que o SEO aumenta o tráfego orgânico do site, foi para mostrar também que pouquíssimas pessoas clicam em anúncios pagos, como mostra essa pesquisa feita nos Estados Unidos entre 2015 e 2017.

Dessa forma, quando você tem uma presença orgânica nos resultados das pesquisas, acaba se tornando mais relevante do que se você pagar um link patrocinado (o que também tem seu aspecto de influência, mas isso já é outra área).

Mecanismos de Pesquisa

Apesar de listarmos vários mecanismos de pesquisa, a Google obviamente possui o maior de todos, tendo mais de 90% de marketshare do que os demais. Cada um dos mecanismos de pesquisa possui uma série de boas práticas para que o seu site ou o site de seu cliente seja colocado em melhores posicionamentos. Por conta desse domínio da Google, acabamos focando nas boas práticas que a sua ferramenta sugere, mas voltaremos nessas especificidades depois.
A questão é: Como os mecanismos de pesquisa funcionam? Como eles encontram algum site?
Os mecanismos de pesquisa possuem robôs que "rastejam" pelas páginas, os chamados crawlers, muitas vezes associados com aranhas que vão tecendo suas teias. Eles vão indexando todos os links que encontram nas páginas e conectando uns aos outros. Essa é uma das formas de tornar seu site mais relevante: quando um link direcionando para ele aparece em locais indexados por esses robôs.

Como ser encontrado pelos mecanismos de pesquisa

Os mecanismos de pesquisa podem encontrar o seu site de forma automática ou manual.
Na forma automática, os crawlers acham seu site quando outros sites possuem link direcionando para ele. Ou seja, algum blog, site de notícia, a Wikipédia, ou qualquer outro referencia o seu site com um link.
Porém, se você possui um site novinho em folha, é bem difícil que ele esteja listado em algum lugar da internet, o que nos leva para o cadastro manual nas plataformas dos mecanismos de pesquisa. Se o site for de algum comércio local, restaurante ou similares, essa pesquisa fica mais forte quando a empresa possui um registro bem feito no Google My Business, por ter as funcionalidades de localização, informações gerais do estabelecimento e avaliações.
Na forma manual, você registra o seu domínio nas ferramentas dos próprios mecanismos de pesquisa. A Google possui o Google Search Console, o Bing e Baidu possuem seus respectivos Webmaster Tools. O DuckDuckGo, por sua vez, não tem uma ferramenta similar, uma vez que o mecanismo preza pela privacidade dos dados dos usuários e não rastreia o que é mais clicado/buscado, restando a primeira tática de ser linkado por algum site relevante.
No futuro estudarei o passo a passo de cada um deles e faço um resumo a respeito, mas, por hora, é importante apontar que cada plataforma tem quase as mesmas funcionalidades, mostrando estatísticas e informações sobre quantidades de acessos e métricas para que você possa tentar melhorar o SEO e o seu ranqueamento.

Guiando os robôs

Existem algumas formas de guiar os robôs pelo seu site. Pode acontecer dos buscadores mostrarem páginas restritas que não deveriam ou deixarem de mostrar páginas importantes. Para facilitar essa "navegação", existem os sitemaps, que são o que o próprio nome diz: um "mapa" com os links que seu site possui, os que você quer que os robôs encontrem. Ele deve ser submetido junto ao seu site e existem vários formatos possíveis para isso. O Google Search Console inclusive possui uma ferramenta para que você cadastre o link do seu sitemap. Mais informações sobre isso aqui (em inglês).
Há o Robots.txt, um arquivo relativamente similar onde você pode listar quais páginas quer ou não que os robôs encontrem. Mais informações aqui (em inglês).
Além disso, as meta tags, que também ajudam os crawlers a entender o que está nas páginas do seu site. Mais informações aqui (em inglês).

Nos próximos posts irei explicar a respeito das meta tags e das demais ferramentas. Se quiserem se aprofundar no assunto, todos os links disponíveis possuem mais informações, lembrando que este é um resumo de um humilde estudante :)
Até a próxima!

Referências
2020 Search Market Share - https://www.webfx.com/blog/seo/2019-search-market-share/
4 Search Engine Optimization Techniques for DuckDuckGo - https://searchengineland.com/4-search-engine-optimization-techniques-duck-duck-go-212912
Baidu Webmaster Tools - https://www.seomandarin.com/baidu-webmaster-tools
Bing Webmaster Tools - https://www.bing.com/webmasters/about
Google Search Console - https://search.google.com/search-console/about
Guia de otimização de mecanismos de pesquisa (SEO) para iniciantes - https://developers.google.com/search/docs/beginner/seo-starter-guide?hl=pt-br
How to Submit a Website to Search Engines - https://www.bruceclay.com/seo/submit-website/
Is SEO Opportunity Growing or Shrinking? - https://sparktoro.com/blog/seo-opportunity-growing-shrinking/
SEO 101 - https://moz.com/beginners-guide-to-seo/why-search-engine-marketing-is-necessary