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

ūüŹÜ 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

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.

2

√ď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

2
2
1

[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

0
0
1
2