⚠AvisoSEO

Atributo lang ausente em <html> — Essencial para acessibilidade e SEO

O atributo lang ajuda mecanismos de busca e leitores de tela a entenderem o idioma da página.

O que é o atributo lang?

O atributo lang na tag <html> declara o idioma principal do conteúdo da página. Ele informa a navegadores, mecanismos de busca e tecnologias assistivas em que idioma o texto está.

Por que é crítico?

Acessibilidade (requisito WCAG)

Leitores de tela usam o atributo lang para escolher as regras de pronúncia corretas
Sem ele, um leitor de tela pode tentar ler texto em português com pronúncia em inglês — tornando o conteúdo incompreensível
É um requisito WCAG Nível A — o nível mais básico de conformidade de acessibilidade

SEO

Os mecanismos de busca usam isso para entender o idioma do conteúdo e entregá-lo ao público certo
É um sinal para SEO internacional e geo-targeting
Ajuda na indexação correta em resultados de busca específicos por idioma

Recursos do navegador

Navegadores usam isso para verificação ortográfica no idioma correto
Sugestões de tradução — O navegador sugere traduzir páginas quando o lang não bate com o idioma do usuário
Hifenização e renderização de texto — Alguns idiomas exigem tratamento de texto diferente

Como corrigir

Adicione o atributo lang à sua tag <html>:

<html lang="en">

Códigos de idioma comuns

Código	Idioma
`en`	Inglês
`es`	Espanhol
`fr`	Francês
`de`	Alemão
`pt`	Português
`ja`	Japonês
`zh`	Chinês
`ar`	Árabe
`ko`	Coreano
`it`	Italiano

Para variantes regionais

<html lang="en-US">  <!-- American English -->
<html lang="en-GB">  <!-- British English -->
<html lang="pt-BR">  <!-- Brazilian Portuguese -->
<html lang="zh-CN">  <!-- Simplified Chinese -->

Boas práticas

Sempre inclua — Toda página HTML deve ter um atributo lang
Use o código correto — Códigos de duas letras ISO 639-1
Combine com o conteúdo — Defina o idioma da maior parte do conteúdo da página
Use lang em subelementos — Para conteúdo multilíngue: <span lang="fr">Bonjour</span>

Verifique suas etiquetas Open Graph

Artigos relacionados

og:image quebrada

A URL de og:image não retorna uma imagem válida. As plataformas sociais mostrarão uma pré-visualização quebrada ou ausente.

URL canônica diferente da URL da página

A URL canônica aponta para uma URL diferente da página atual.

Charset não é a primeira meta tag

A declaração de charset deve ser o primeiro elemento dentro de <head>.

og:description poderia ser mais longa

Você tem espaço para uma descrição mais detalhada e aumentar o engajamento.

og:description contém uma URL

A og:description deve ser um resumo legível, não uma URL.

Keyword stuffing em og:description

Repetir as mesmas palavras em excesso na descrição parece spam.

Servidor MCP do OpenGraph

Inspecione tags OG direto do seu editor

O servidor MCP do OpenGraph permite inspecionar e analisar meta tags Open Graph diretamente do seu editor com IA ou assistente. Ele oferece duas ferramentas:

inspect_og— Obter e pontuar tags OG de qualquer URL
suggest_og_tags— Gerar HTML de meta tags recomendadas

Adicione o servidor ao arquivo .cursor/mcp.json do seu projeto:

{
  "mcpServers": {
    "opengraph": {
      "command": "npx",
      "args": ["-y", "opengraph-mcp"]
    }
  }
}

Reinicie o Cursor depois de adicionar a configuração.

Adicione ao seu arquivo .vscode/mcp.json (requer extensão GitHub Copilot):

{
  "servers": {
    "opengraph": {
      "command": "npx",
      "args": ["-y", "opengraph-mcp"]
    }
  }
}

Certifique-se de ter o GitHub Copilot com suporte a MCP habilitado.

Adicione ao seu arquivo claude_desktop_config.json:

{
  "mcpServers": {
    "opengraph": {
      "command": "npx",
      "args": ["-y", "opengraph-mcp"]
    }
  }
}

O arquivo de configuração fica em ~/Library/Application Support/Claude/claude_desktop_config.json no macOS ou %APPDATA%\Claude\claude_desktop_config.json no Windows.

Adicione ao seu arquivo ~/.codeium/windsurf/mcp_config.json:

{
  "mcpServers": {
    "opengraph": {
      "command": "npx",
      "args": ["-y", "opengraph-mcp"]
    }
  }
}

Reinicie o Windsurf depois de modificar a configuração.

Adicione ao seu settings.json do Zed em context_servers:

{
  "context_servers": {
    "opengraph": {
      "command": {
        "path": "npx",
        "args": ["-y", "opengraph-mcp"]
      }
    }
  }
}

Abra as configurações com Cmd+, e adicione a configuração.

Exemplos de uso

▶"Inspecione as tags OG de github.com"

▶"Sugira meta tags OG para o meu site https://example.com"

▶"Verifique se o meu blog tem etiquetas Open Graph corretas"