Executando verificação de segurança...
62

🏆 Melhor Guia do SEO para dev - Usando código para aumentar sua visualizaçāo organica

SEO, ou Search Engine Optimization, é um grupo de técnicas e práticas que você pode tomar como estratégia para alavancar a forma que usuários te encontram e encontram sua empresa/produto online.

Em outras palavras, é uma forma de cravar seu nome na praça e fazer com que, quando alguém for buscar um problema ou seu nome propriamente dito, você apareça como a solução principal para ele.

Ao longo desse artigo vou disponibilizar alguns exemplos, mas é importante que você
NÃO COPIE E COLE ELES sem antes mudar o que está escrito e melhorar para o seu contexto.

alt text

Mas preciso deixar um recado muito importante.
Se você entrou nesse artigo achando que tem uma pílula mágica que você vai colocar no seu site e tudo vai se resolver da noite para o dia, já pode tirar seu cavalinho da chuva.

Não existe magic pill, rapaz. SEO é assim como a academia, uma forma de construir seu nome e um conjunto de boas práticas e ferramentas que, com o tempo, vão te ajudar a ter um contato melhor com quem sua empresa resolve os problemas de fato.

alt text

Se na academia você precisa comer bem e se exercitar todos os dias, no SEO funciona da mesma forma. Você precisa constantemente ir evoluindo e se adaptando com as mudanças.

Pois basta uma canetada de uma empresa como a Google e você perde seu trono de primeiro colocado na lista dos top.

Quer dizer, até existe magic pill, os anabolizantes nesse caso seria um tráfego pago, mas esse não é nosso foco aqui. Tudo que usaremos será feito de forma 100% natural e orgânica 🌱

Ou seja, fique atento e stay natty, kids.


Tudo começou quando precisei fazer isso na pele, para uma plataforma do qual sou dono, chamada Alertpix , focado em streamers e em soluções para quem faz live.

Sentimos no começo que nossa busca estava muito ruim. As pessoas buscavam nosso nome e só achavam o Twitter ou artigos de sites falando sobre nós de alguma forma. Mas o nosso site mesmo que era bom, nada.

Então, virei para o meu sócio Chris e me comprometi a aprender o máximo possível sobre como resolver esse problema e aparecer mais na hora que forem pesquisar pelos problemas que podemos resolver.


Bom, depois de uma longa pesquisa fiz uma lista com várias coisas que poderíamos melhorar, esse foi o resultado:

  • Otimizar lighthouse
  • hierarquizar melhor ( h1, h2, h3 )
  • alt nas imagens
  • Metatags ( meta description )
  • O.G ( Open Graph )
  • json-ld
  • blog com conteúdos long tail
  • pSEO + long tail volume
  • quantidade suficiente de palavras chaves por página
  • robots.txt
  • Sitemap
  • Keyword Planner do Google, o SEMrush e o Ahrefs ( palavras chaves )
  • canonical tag

Vou abordar um por um e dar um exemplo prático de como você pode melhorar o seu site também.

Estarei utilizando Next.js aqui, pois é um framework que já vem com muita coisa nativa pensada em SEO, mas você pode usar e implementar no framework que quiser.


Otimizar lighthouse

  • Lighthouse é uma ferramenta, que usamos em formato de extensão do Google, para mensurar o quanto nossa aplicação está otimizada pensando no usuário final.

alt text

Ela traz várias métricas bacanas que você pode ficar de olho. Como acessibilidade, performance, melhores práticas, entre outras. Mas aqui focaremos no SEO.

A ideia é sempre você melhorar conforme a ferramenta vai te avisando, e por mais que não seja 100% ainda sim vale muito a pena se apegar no que a ferramenta te entrega e fazer as melhorias propostas nela.

alt text

Ah, e falando em acessibilidade, aqui está mais um item da nossa lista.

Alt + hierarquizaçao / semantica do HTML

Afinal de contas, a acessibilidade de um site pode interferir em um SEO?

O que o Google e outros buscadores podem levar em consideração é se suas imagens estão com alt bem definidos, se sua semântica do HTML está bem clara e se suas tags estão bem hierarquizadas (ou seja, utilizando h1, h2, h3 e outras tags corretamente).

Então, por esse lado, sim. Características de um site bem acessível são hábitos saudáveis para um bom SEO.

Evite títulos enganosos ou clickbait.
Não use uma lista de palavras-chave como título e nem um alt genérico para tudo.

Metatags

Meta tags são elementos HTML que fornecem informações sobre a página da web para navegadores e mecanismos de busca. Essas informações não são exibidas diretamente aos visitantes da página, mas são utilizadas para diversas finalidades, como otimização para motores de busca (SEO), compartilhamento em redes sociais e configuração de exibição em dispositivos móveis. Alguns tipos comuns de meta tags incluem:

Meta Description: Fornece um resumo curto da página. Esse texto frequentemente aparece nos resultados de busca, ajudando a atrair cliques.

<meta name="description" content="Uma descrição breve e informativa da página.">

Meta Keywords: Lista palavras-chave relevantes para a página. Embora seu uso tenha diminuído em importância para SEO, ainda é usado ocasionalmente.

<meta name="keywords" content="palavra-chave1, palavra-chave2, palavra-chave3">

Meta Charset: Define o conjunto de caracteres usado na página, ajudando a garantir a exibição de texto.

<meta charset="UTF-8">

Meta Viewport: Configura a exibição da página em dispositivos móveis, permitindo uma melhor experiência de usuário em diferentes tamanhos de tela.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Meta Robots: Indica aos motores de busca como indexar ou não a página. Pode ser usado para permitir ou bloquear a indexação da página.

<meta name="robots" content="index, follow">

Meta Author: Especifica o autor da página ou do conteúdo.


<meta name="author" content="Nome do Autor">

Meta Open Graph: Utilizado para a integração com redes sociais como Facebook, melhorando a exibição quando a página é compartilhada.


<meta property="og:title" content="Título da Página">
<meta property="og:description" content="Descrição da Página">
<meta property="og:image" content="URL da Imagem">
<meta property="og:url" content="URL da Página">

Essas tags são colocadas dentro da seção do documento HTML.

Cada meta tag tem um propósito específico e pode ser usada de acordo com as necessidades do desenvolvedor da página.

Tudo isso conta bastante pra ferramentas de pesquisa como o Google saberem e disponibilizarem seu conteúdo.

O.G Open Graph

alt text

O Open Graph (OG) é um protocolo desenvolvido pelo Facebook para integrar qualquer página web com a rede social, permitindo que o conteúdo de uma página seja compartilhado de maneira mais rica e atraente. Quando uma página da web contém meta tags Open Graph, os links compartilhados em redes sociais podem exibir títulos, descrições, imagens e outros detalhes de forma otimizada. Isso melhora a aparência e a funcionalidade dos links, incentivando mais interações e cliques.

Aqui estão algumas das meta tags Open Graph mais comuns e seus usos:

Define o título da página que será exibido quando o conteúdo for compartilhado.

<meta property="og:title" content="Título da Página">

Fornece uma descrição curta e atraente da página.

<meta property="og:description" content="Descrição da Página">

Especifica a URL de uma imagem representativa da página. Esta imagem será exibida como um thumbnail quando a página for compartilhada.

<meta property="og:image" content="URL da Imagem">

Define a URL canônica da página, garantindo que a URL correta seja associada ao conteúdo.

<meta property="og:url" content="URL da Página">
#### Indica o tipo de conteúdo da página, como "website", "article", "video", etc.

``` html
<meta property="og:type" content="website">

Nome do site onde a página está hospedada.

<meta property="og:site_name" content="Nome do Site">

Benefícios do uso de Open Graph

Atração Visual: Melhora a aparência dos links compartilhados, exibindo imagens e informações adicionais.
Aumento de Cliques: Títulos e descrições otimizados podem aumentar a taxa de cliques (CTR) nos links.
Controle de Conteúdo: Permite que os proprietários de sites controlem como seu conteúdo é exibido nas redes sociais.
Consistência: Garante que os links compartilhados tenham uma aparência consistente, independentemente de onde são compartilhados.
Implementar meta tags Open Graph é uma prática recomendada para qualquer site que deseja aumentar sua visibilidade e atratividade em plataformas de redes sociais.

Você pode verificar se seu site ta tudo ok e como ele aparece em diferentes platafromas usando ferramentas como essa: https://opengraph.dev/panel?url=https://alertpix.live

Assim, toda vez que compartilhar o link do seu site você deixa ele mais atrativo e com menos cara de golpe. Isso da um ar de profissionalismo para seu site.

json-ld

JSON-LD (JavaScript Object Notation for Linked Data) é um formato baseado em JSON usado para estruturar dados de forma que possam ser facilmente compreendidos por máquinas. É comumente usado para adicionar metadados a páginas da web de forma que motores de busca e outras aplicações possam processar e entender esses dados com mais eficiência.

JSON-LD é frequentemente utilizado para implementar esquemas de dados estruturados (como schema.org), permitindo que informações sobre produtos, eventos, organizações, pessoas, receitas e muito mais sejam incluídas em uma página da web. Esses dados estruturados podem melhorar significativamente a SEO e aumentar a visibilidade do conteúdo nos resultados de busca, exibindo rich snippets.

Ou seja, mais uma ferramenta pra você conversar diretamente com os servidores e buscadores. Basicamente é uma forma de dizer ao google "Oi, esse sou eu, eu faço isso e resolvo isso...".

Um exemplo de como usamos isso aqui na alertpix é para fazer uma espécie de "Faq" com perguntas e respostas que sao comummente pesquisados por nosso publico.

Assim:
alt text

Mas aí você deve estar se perguntando, quais perguntas foram essas e de onde eu tirei tais perguntas?

E aqui vou mostrar uma dica que eu poderia facilmente estar cobrando:

  • Você não decide isso.
  • É um erro seu achar que você sabe mais do seu negócio que o Google.

Vá e pergunte a ele, mas de uma forma diferente.

Te apresento a Keyword Planner + Google ADS

alt text
alt text

Existe diversas formas inteligentes de voce descobrir quais palavras sao ideais pra voce colocar no seu site, mas ja te adianto, nao é da sua cabeça que voce vai tirar isso. Faça uma pesquisa, aprimore e tire o puro suco do milho verde das palavras.

Essa é uma prática que demanda um tempinho mas se paga bastante.
Vale tambem pesquisar por sites dos seus concorrentes e ver como as pessoas chegam ate eles. Copie o que da certo :)

Long Tail

O conceito de "long tail" (cauda longa) é sobre vender uma variedade enorme de itens únicos em pequenas quantidades, ao invés de focar em poucos itens populares em grandes quantidades. No SEO e marketing de conteúdo, isso significa usar palavras-chave mais específicas e menos competitivas, que têm menos buscas, mas atraem pessoas com intenção de compra clara e menos concorrência.

alt text

Então, ao invés de usar "tenis" para vender um tenis de corrida, você pode usar "Tênis de corrida feminino até 400 reais" por exemplo.
Nada mais é que super nichar e ser bizarramente específico. Da pra introduzir isso em seu site utilizando blogposts, fazendo vídeos no youtube e linkando em seu site e de outras maneiras também.

Mais uma vez, não é você quem define essas palavras ideais. Utilize ferramentas como Google Keyword Planner, Ahrefs, SEMrush, e Ubersuggest para identificar oportunidades de palavras-chave long tail.

E na hora de utilizar, certifique de as colocar em titulos, subtitulos, e nas tags que ja mostrei aqui nesse artigo.

O robots.txt é um arquivo que diz aos motores de busca o que eles podem ou não acessar no seu site. Ele fica na raiz do domínio e tem uma estrutura simples:

Estrutura Básica


User-agent: *
Disallow: /admin/
Disallow: /private/
Allow: /public/

Sitemap: https://www.exemplo.com/sitemap.xml

Principais Elementos

  • User-agent: Especifica a quais robôs a regra se aplica. O * vale para todos.
  • Disallow: Bloqueia diretórios ou arquivos.
  • Allow: Permite diretórios ou arquivos específicos.

Benefícios
Controle de Indexação: Decide o que os motores de busca veem.
Segurança: Protege áreas sensíveis.
Otimização: Direciona os robôs para as partes importantes do site.
Lembre-se: qualquer um pode ver seu robots.txt e nem todos os robôs seguem as regras.

Sitemaps

Um sitemap é um arquivo que lista todas as páginas do seu site para ajudar os motores de busca a encontrar, rastrear e indexar seu conteúdo de maneira mais eficiente. Ele pode ser em formato XML ou HTML.

Tipos de Sitemaps
XML Sitemap: Feito para motores de busca. Contém URLs e informações como a última atualização, frequência de mudanças e importância relativa das páginas.
HTML Sitemap: Feito para usuários. Oferece uma visão geral do conteúdo do site, facilitando a navegação.
Estrutura Básica de um XML Sitemap
Aqui está um exemplo básico de um sitemap em XML:

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
   <url>
      <loc>https://www.exemplo.com/</loc>
      <lastmod>2024-07-08</lastmod>
      <changefreq>monthly</changefreq>
      <priority>1.0</priority>
   </url>
   <url>
      <loc>https://www.exemplo.com/pagina1</loc>
      <lastmod>2024-07-08</lastmod>
      <changefreq>weekly</changefreq>
      <priority>0.8</priority>
   </url>
   <!-- Mais URLs -->
</urlset>

Principais Elementos do XML Sitemap

  • <loc>: URL da página.
  • <lastmod>: Data da última modificação.
  • <changefreq>: Frequência de mudanças esperadas (daily, weekly, monthly, etc.).
  • <priority>: Importância relativa da página (0.0 a 1.0).

Benefícios de um Sitemap
Melhor Rastreamento: Ajuda os motores de busca a encontrar todas as páginas, mesmo as mais profundas.

Indexação Rápida: Páginas novas ou atualizadas são indexadas mais rapidamente.
Organização: Mantém o site bem organizado e melhora a navegação para os usuários (no caso do HTML sitemap).

Como Usar

Criar o Sitemap: Use ferramentas como Yoast SEO (para WordPress), Screaming Frog, ou geradores de sitemap online.

Enviar para Motores de Busca: Envie o sitemap através do Google Search Console e do Bing Webmaster Tools.

Exemplo de Inclusão no robots.txt

Sitemap: https://www.exemplo.com/sitemap.xml

Um sitemap é essencial para garantir que os motores de busca encontrem e indexem todo o conteúdo importante do seu site, ajudando a melhorar a SEO e a experiência do usuário.

Bonus - Use Nextjs

O nextjs é um framework poderoso que tras pra gente algumas vantagens na melhora do SEO.
Mas preciso ser honesto, ele nao é unico. Tem outros como Astro e Nuxt que fazem isso de uma forma muito boa tambem e facilitam sua vida.

  • SSR, SSG, Image optimization entre outras vantagens fazem do Next uma ótima ferramenta para te auxiliar nessa jornada.

Bom galera, é isso.
Com essas práticas, você estará no caminho certo para aumentar o tráfego qualificado e o sucesso do seu blog.
Lembre-se que SEO muda sempre, entao sempre busque a melhor e mais atualizada estratégia para você.

Se você gosta desse tipo de conteúdo e pretende subir um SaaS próprio alguma vez na sua vida, vem comigo e me segue, estou postando diáriamente conteúdos no meu twitter e semanalmente no meu youtube.
Esse artigo também estará em formato de vídeo muito em breve no meu canal do youtube:
https://youtube.com/@daniellimae

https://x.com/daniellimae

Carregando publicação patrocinada...
4

Ótimo artigo, tenho tentando sempre aprender algo novo sobre SEO para implementar no meu site Bora Churrasco, no começo foi muito frustrante, parece que nada dá um resultado kkk

Mas devagar, seguindo algumas dicas está aumentando os resultados, segue abaixo:

Google Search Bora Churrasco

Não conhecia o JsonLd, acabei de implementar também em algumas páginas, muito obrigado pela sua contribuição

1

Genial!! ta conseguindo otimos resultados. Adorei a ideia do site, bora se conectar! Te coloco no grupo de founders e criadores de SaaS br que criamos. Me chama no linkedin ou twitter @daniellimae

1
2

Opa, eu uso o Adsense mesmo do Google, deu um trabalho para começar a de fato a aparecer e aprovar.

Mas uma hora deu certo, talvez tenham plataformas mais fáceis de implementar ou até que paguem melhor

3

Excelente contribuição!
Estou para assinar o SEMRush, mesmo sendo caro, fiz as contas do que gasto em tráfego pago para determinada keyword que tem um KD relativamente fácil, e percebi que se conseguir rankea-la teria uma redução significativa nos custos.

Você conseguiu rankear bem outras keywords além da própria marca? Para link building, o SEMRush tem ajudado de alguma forma?

1

Olha, pra ser honesto, eu fiz esse artigo como forma de me ajudar tambem a entender mais sobre SEO. Entao, fui aplicando as coisas essa semana ainda na Alertpix.
O Toolkit deles é brabo d+, mas nao usamos nada pago por aqui por enquanto.
Os blogposts deles sao muito bons tambem, recomendo.

3

Amigo, eu participo de um programa do Google, chamado Google Product experts, onde ajudamos o pessoal em diversos produtos, e tenho certeza que esse tutorial cairia como uma luva na comunidade do Google Search, gostaria de pedir a sua permissão, para postar esse conteúdo na comunidade como um guia, todos os créditos serão dados a você, ou caso você mesmo queira ou possa fazer uma postagem, segue o link da comunidade.

https://support.google.com/websearch/community?hl=pt-BR
https://support.google.com/webmasters/community?hl=pt-BR

Postei o link das duas, pois as dúvidas relacionadas a SEO, aparecem nas duas comunidades.

1
2

[SEO] Muito bom, estou saindo satisfeito deste post, pes embora senti a falta de alguns tópicos que prometeu falar no inicio como Keyword Planner do Google, o SEMrush e o Ahrefs ( palavras chaves ) e canonical tag. Valeu muito

1

Fala gnoma! Feliz que curtiu o artigo, obrigado pelo feedback!
Falei um pouco mais no meu video do canal, pra nao deixar tudo aqui.

Mas realemnte, algumas partes ficaram pra tras. Quem sabe uma parte 2 eu nao abordo tudo isso! Valeu amigo. o/

2

Ótimo artigo, já vinha utilizando praticamente todas as técnicas a um bom tempo e garanto pra vcs que funciona muito bem! Especialmente a tal "cauda longa", faz bastante sentido captar usuários nessa soma de pequenos nichos de conteúdo!
imagem

1

Que material excepcional. É pra isso que eu pago internet. Parabéns! Vou salvar esse material como consulta, tá maravilhoso. Pretendo inclusive referenciar ele em conteúdos meus, posso?

1
1
1
1

Muito bom artigo mano, obrigado por compartilhar, deixando aqui meus 5 centavos de contribuição, utilizo muito ferramentas como:
https://www.webpagetest.org/ e https://pagespeed.web.dev/ para olhar para web core vitals e performance das paginas o que ajudam muito no SEO, o lighthouse é legal mas ele sempre usa os recursos da maquina do usuario que roda no browser para dar os numeros, então pode ocilar em maquinas mais fracas.

Esses 2 sites acima tem a mesma ideia e vc pode configurar para rodar o teste em diferentes dispositivos ou sempre no mesmo para ter uma confiabilidade maior nos numeros.

1

Opa! Cheguei aqui através de um vídeo seu.
Eu não uso o NextJS, mas gostaria também de ingressar nesse mundo do "indie hacking". A ferramenta que estou aprendendo no momento é PHP. Já usei NextJS por um tempo e, se me lembro hem, gerar páginas no servidor e só depois as enviar para o usuário é o "creme de la creme" do SEO, e o PHP faz isso por padrão. Minha dúvida é, na sua visão, é viável usar PHP, sem nenhum framework, e fazer o SEO "na mão"? Teria como competir com quem usa frameworks?

Valeu pelo post e pelo vídeo!!

1

Algo que nao foi citado e faz parte da composição do SEO, e que por sinal você fez justamente com esta postagem é o Backlink, apontamento follow do tabnews para o site do alertpix, muito bom.

0
0
1
2