SEO para Devs: Do Básico ao Avançado em um único artigo — Blog

Se você é dev e nunca parou para entender SEO de verdade, esse post é para você.

Não vou enrolar com teoria abstrata. Vou te mostrar o que cada coisa faz, por que importa e como implementar — do básico que todo dev precisa saber até as técnicas avançadas que fazem diferença real no ranqueamento.

SEO é o teste de integração que a maioria dos devs esquece de rodar.

Spoiler: SEO é código. E código bom é responsabilidade sua.

1. O Básico: Meta Tags que todo site precisa

Se o seu site não tem essas tags, ele está invisível para os mecanismos de busca. Simples assim.

Title

A tag <title> é o que aparece na aba do navegador e nos resultados do Google. É o primeiro contato do usuário com a sua página.

head-example.html html

<title>SEO para Devs: Guia Completo | Daniel Guimarães</title>

Regras práticas:

Mantenha entre 50 e 60 caracteres (o Google corta o resto)
Coloque a palavra-chave principal no começo
Evite títulos genéricos como “Home” ou “Página 1”

Meta Description

É o texto que aparece abaixo do título nos resultados de busca. Não afeta diretamente o ranqueamento, mas afeta a taxa de clique — e isso o Google percebe.

meta-description.html html

<meta
    name="description"
    content="Guia prático de SEO para desenvolvedores.
    Meta tags, Open Graph, Schema.org e performance."
>

Regras práticas:

120 a 160 caracteres
Descreva o que o usuário vai encontrar na página
Pense como um copywriter: a pessoa precisa querer clicar

Canonical URL

Se a mesma página pode ser acessada por URLs diferentes (/blog/post, /blog/post?ref=twitter, /blog/post/), o Google pode considerar conteúdo duplicado. A tag canonical resolve isso:

canonical.html html

<link rel="canonical" href="https://meusite.com/blog/meu-post">

Ela diz ao Google: “Essa aqui é a URL oficial. Ignora as variações.”

Robots

Controla o que os crawlers podem ou não fazer:

robots.html html

<!-- Permite indexação normal -->
<meta name="robots" content="index, follow">

<!-- Bloqueia indexação (útil para páginas de staging, admin, etc) -->
<meta name="robots" content="noindex, nofollow">

Se você não declarar nada, o padrão é index, follow. Mas é boa prática ser explícito.

2. Intermediário: Social Media e Open Graph

Você já compartilhou um link no WhatsApp e apareceu aquele card bonito com imagem, título e descrição? Isso é Open Graph.

Se o seu site não tem, quando alguém compartilhar o link vai aparecer… nada. Ou pior: um título e imagem aleatórios que o algoritmo decidiu pegar.

Open Graph (Facebook, LinkedIn, WhatsApp)

open-graph.html html

<meta property="og:title" content="SEO para Devs: Guia Completo">
<meta property="og:description" content="Tudo sobre SEO que você precisa saber como desenvolvedor.">
<meta property="og:image" content="https://meusite.com/images/seo-cover.jpg">
<meta property="og:url" content="https://meusite.com/blog/seo-para-devs">
<meta property="og:type" content="article">
<meta property="og:site_name" content="Daniel Guimarães">
<meta property="og:locale" content="pt_BR">

Pontos importantes:

A imagem precisa ter no mínimo 1200x630px para ficar bonita
Use URLs absolutas (com https://), nunca relativas
O og:type mais comum é website para páginas e article para posts

Twitter Cards

O Twitter/X tem seu próprio protocolo, mas funciona de forma similar:

twitter-cards.html html

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="SEO para Devs: Guia Completo">
<meta name="twitter:description" content="Tudo sobre SEO que ninguém te ensinou.">
<meta name="twitter:image" content="https://meusite.com/images/seo-cover.jpg">
<meta name="twitter:creator" content="@heydan_dev">

O summary_large_image exibe a imagem grande no feed. Se não tiver imagem, use summary para exibir um card compacto.

3. Intermediário: Sitemap e robots.txt

Essas duas coisas são como o mapa e as regras de acesso do seu site para os crawlers.

robots.txt

Fica na raiz do site (/robots.txt) e diz aos robôs quais caminhos eles podem ou não acessar:

robots.txt txt

User-agent: *
Allow: /
Disallow: /admin/
Disallow: /api/

Sitemap: https://meusite.com/sitemap.xml

Sitemap XML

Lista todas as páginas que você quer que o Google indexe, com prioridades e datas:

sitemap.xml xml

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
    <url>
        <loc>https://meusite.com/</loc>
        <lastmod>2026-02-23</lastmod>
        <priority>1.0</priority>
    </url>
    <url>
        <loc>https://meusite.com/blog/seo-para-devs</loc>
        <lastmod>2026-02-23</lastmod>
        <priority>0.8</priority>
    </url>
</urlset>

Em frameworks modernos como Next.js, Nuxt ou SvelteKit, você pode gerar o sitemap dinamicamente com um endpoint do servidor. Nada de escrever XML à mão.

4. Avançado: Schema.org JSON-LD

Aqui é onde a maioria dos devs para de prestar atenção — e é justamente onde você se diferencia.

Schema.org é um vocabulário que ajuda os mecanismos de busca a entender o conteúdo da sua página. Não é só “tem um artigo aqui”. É: “tem um artigo escrito por essa pessoa, publicado nessa data, sobre esses assuntos”.

Isso habilita os Rich Snippets — aqueles resultados do Google com estrelas, datas, breadcrumbs, FAQ e muito mais.

Exemplo: Artigo de Blog

json-ld-article.html html

<script type="application/ld+json">
{
    "@context": "https://schema.org",
    "@type": "Article",
    "headline": "SEO para Devs: Do Básico ao Avançado",
    "author": {
        "@type": "Person",
        "name": "Daniel Guimarães"
    },
    "datePublished": "2026-02-23",
    "description": "Guia completo de SEO para desenvolvedores.",
    "publisher": {
        "@type": "Organization",
        "name": "Daniel Guimarães"
    }
}
</script>

Exemplo: Breadcrumbs

json-ld-breadcrumb.html html

<script type="application/ld+json">
{
    "@context": "https://schema.org",
    "@type": "BreadcrumbList",
    "itemListElement": [
        {
            "@type": "ListItem",
            "position": 1,
            "name": "Blog",
            "item": "https://meusite.com/blog"
        },
        {
            "@type": "ListItem",
            "position": 2,
            "name": "SEO para Devs",
            "item": "https://meusite.com/blog/seo-para-devs"
        }
    ]
}
</script>

Tipos mais usados

WebPage: Qualquer página genérica
Article: Posts de blog, notícias
ProfilePage: Páginas de perfil (portfólios pessoais)
CreativeWork: Projetos, portfólios, design cases
BreadcrumbList: Navegação hierárquica
FAQPage: Perguntas frequentes (gera aqueles dropdowns no Google)

Dica: Você pode validar seu JSON-LD no Rich Results Test do Google. Se tiver erro, ele mostra exatamente o que falta.

5. Avançado: Performance como fator de SEO

Desde 2021, o Google usa as Core Web Vitals como fator de ranqueamento. Sites lentos são penalizados, ponto.

As três métricas que importam:

LCP (Largest Contentful Paint): O maior elemento visível carregou em quanto tempo? Meta: < 2.5s
INP (Interaction to Next Paint): Quanto tempo o site demora para responder a um clique? Meta: < 200ms
CLS (Cumulative Layout Shift): A página “pula” enquanto carrega? Meta: < 0.1

O que você pode fazer como dev

Imagens otimizadas: Use formatos modernos (WebP, AVIF), loading="lazy" e tamanhos responsivos com srcset
Font loading: Use font-display: swap para não bloquear a renderização
Preload crítico: Use <link rel="preload"> para recursos essenciais (fontes, hero images)
Code splitting: Carregue JavaScript sob demanda, não tudo de uma vez

performance-tips.html html

<!-- Preload de fonte crítica -->
<link
    rel="preload"
    href="/fonts/Inter-Regular.woff2"
    as="font"
    type="font/woff2"
    crossorigin
>

<!-- Imagem responsiva otimizada -->
<img
    src="/images/hero-800.webp"
    srcset="/images/hero-400.webp 400w, /images/hero-800.webp 800w"
    sizes="(max-width: 768px) 100vw, 800px"
    loading="lazy"
    alt="Descrição acessível da imagem"
    width="800"
    height="450"
>

6. Avançado: Hreflang e Internacionalização

Se o seu site tem versões em diferentes idiomas, você precisa informar isso aos crawlers para evitar canibalização — quando duas versões da mesma página competem entre si no Google.

hreflang.html html

<link rel="alternate" hreflang="pt-BR" href="https://meusite.com/blog/seo">
<link rel="alternate" hreflang="en-US" href="https://meusite.com/en/blog/seo">
<link rel="alternate" hreflang="x-default" href="https://meusite.com/en/blog/seo">

O x-default define qual versão deve ser exibida quando o idioma do usuário não corresponde a nenhuma das opções declaradas.

Resumo: Checklist de SEO para Devs

Se você leu até aqui, aqui vai o checklist que eu uso nos meus projetos:

Básico (obrigatório):

<title> único e descritivo em cada página?
<meta description> com frase que convence a clicar?
<link rel="canonical"> apontando para a URL correta?
<meta name="robots"> configurado corretamente?

Intermediário (diferencia):

Open Graph configurado? (og:title, og:description, og:image)
Twitter Cards configurados?
Sitemap XML gerado e referenciado no robots.txt?

Avançado (destaca):

Schema.org JSON-LD implementado?
Core Web Vitals dentro das metas? (LCP < 2.5s, INP < 200ms, CLS < 0.1)
Hreflang configurado para sites multilíngues?

Sobre o Quartzo

Se você trabalha com Svelte 5 e SvelteKit, eu criei uma biblioteca chamada Quartzo que nasceu exatamente desse processo. Depois de implementar todo esse SEO manualmente nos meus projetos, cansei de replicar código e organizei tudo em um único componente reutilizável.

O <SeoGeoOptimizer /> cuida de Meta Tags, Open Graph, Twitter Cards e Schema.org JSON-LD de uma vez. Você passa os dados e ele gera tudo de forma segura, com tipagem forte e suporte nativo a Runes.

exemplo-quartzo.svelte svelte

<script lang="ts">
    import { SeoGeoOptimizer } from 'quartzo';

    let { data } = $props();
</script>

<SeoGeoOptimizer
    title={data.seo.title}
    description={data.seo.description}
    url={data.seo.url}
    siteUrl="https://meusite.com"
    image={data.seo.image}
    type="article"
    author="Daniel Guimarães"
/>

O site do Quartzo também tem uma seção de FAQ que explica cada conceito de SEO — se você ainda ficou com dúvida em algum item desse post, vale a pena conferir.

É open source, MIT, e disponível no npm. Confira o site em quartzo.heydan.dev.