SEO e Performance

Aula 5 de 6

SEO com HTML5

Otimização para motores de busca começa com HTML semântico e meta tags estruturadas.

Meta Tags Essenciais

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- SEO Básico -->
  <title>Título SEO | Nome do Site</title>
  <meta name="description" content="Descrição com até 160 caracteres para o Google.">
  <meta name="robots" content="index, follow">

  <!-- Open Graph (Facebook, LinkedIn) -->
  <meta property="og:title" content="Título para Redes Sociais">
  <meta property="og:description" content="Descrição do link compartilhado.">
  <meta property="og:image" content="https://site.com/imagem.jpg">
  <meta property="og:url" content="https://site.com/pagina">
  <meta property="og:type" content="website">

  <!-- Twitter Card -->
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:title" content="Título Twitter">
  <meta name="twitter:image" content="https://site.com/imagem.jpg">
</head>

Structured Data (JSON-LD)

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "Guia Completo de SEO HTML5",
  "author": {
    "@type": "Person",
    "name": "João Silva"
  },
  "datePublished": "2026-01-15",
  "description": "Aprenda SEO com HTML5, meta tags e dados estruturados.",
  "image": "https://site.com/seo-guide.jpg"
}
</script>

URLs Canônicas e Hreflang

<link rel="canonical" href="https://site.com/pagina">
<link rel="alternate" hreflang="pt-BR" href="https://site.com.br/pagina">
<link rel="alternate" hreflang="en" href="https://site.com/en/page">

Performance

Scripts Assíncronos e Diferidos

<!-- async: executa assim que baixa (não bloqueia HTML parser) -->
<script async src="analytics.js"></script>

<!-- defer: executa em ordem após o HTML ser parseado -->
<script defer src="app.js"></script>
<script defer src="componentes.js"></script>

Preload, Prefetch e Preconnect

<!-- Preload: recursos críticos para a página atual -->
<link rel="preload" href="fontes/inter-regular.woff2" as="font" crossorigin>
<link rel="preload" href="hero.jpg" as="image">

<!-- Prefetch: recursos para a próxima navegação -->
<link rel="prefetch" href="/proxima-pagina" as="document">

<!-- Preconnect: conexão antecipada com origens externas -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://analytics.google.com">

<!-- dns-prefetch: fallback para preconnect -->
<link rel="dns-prefetch" href="https://api.exemplo.com">

Critical CSS e Lazy Loading

<!-- Critical CSS inline -->
<style>
  /* CSS crítico para renderização acima da dobra */
  header { ... }
  .hero { ... }
  @font-face { ... }
</style>

<!-- CSS não-crítico carregado após render -->
<link rel="preload" href="estilos.css" as="style" onload="this.onload=null;this.rel='stylesheet'">

<!-- Lazy loading nativo -->
<img src="foto.jpg" loading="lazy" alt="Descrição" width="800" height="600">
<iframe src="mapa.html" loading="lazy" title="Mapa"></iframe>

<!-- Fallback para lazy loading de imagens -->
<script>
  if ('loading' in HTMLImageElement.prototype) {
    // Navegador suporta lazy loading nativo
  } else {
    // Carregar polyfill ou library (ex: lazysizes)
  }
</script>

# Análise de performance com Lighthouse CLI
npm install -g lighthouse
lighthouse https://meusite.com --view

# Verificar cobertura de CSS/JS
npx coverage

Service Worker e Caching

// service-worker.js
const CACHE_NAME = 'v1';
const ASSETS = [
  '/',
  '/index.html',
  '/estilos.css',
  '/app.js',
  '/offline.html'
];

self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open(CACHE_NAME).then(cache => cache.addAll(ASSETS))
  );
});

self.addEventListener('activate', (event) => {
  event.waitUntil(
    caches.keys().then(keys =>
      Promise.all(keys.filter(k => k !== CACHE_NAME).map(caches.delete.bind(caches)))
    )
  );
});

self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.match(event.request)
      .then(cached => cached || fetch(event.request))
      .catch(() => caches.match('/offline.html'))
  );
});

Lab: Lighthouse Audit

Execute um audit Lighthouse em uma página, implemente as recomendações de performance (preload, lazy loading, async/defer) e repita o teste.

# Gerar build de produção e servir
npx http-server dist -p 8080 -c-1

# Rodar Lighthouse
npx lighthouse http://localhost:8080 --output=json --output-path=./report.json

Performance não é feature — é requisito. Cada milissegundo importa para UX e conversão.