OpenGraph og:title og:description og:image
Controle como sua página aparece quando compartilhada nas redes sociais.
OpenGraph og:title og:description og:image é uma aula grátis de HTML Academy no CoddyKit. Esta é a aula 1 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de HTML Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de HTML Academy inclui 4 aulas no total.
O que é OpenGraph?
OpenGraph é um protocolo de metadados introduzido pelo Facebook para que qualquer página possa descrever como deve ser exibida quando compartilhada em uma plataforma social. Os marcadores ficam no <head> como pares <meta property="og:..." content="..."> e são coletados por todas as principais redes sociais.
Marcadores principais
Na prática, os quatro marcadores obrigatórios são og:title, og:description, og:image e og:url. A ausência de qualquer um deles produz um cartão de compartilhamento pouco atraente ou, pior, um cartão sem pré-visualização, que os usuários tendem a ignorar.
<meta property="og:title" content="Learn HTML">
<meta property="og:description" content="From DOCTYPE to Web Components.">
<meta property="og:image" content="https://example.com/og.png">
<meta property="og:url" content="https://example.com/learn">og:title
O título exibido no cartão de compartilhamento. Mantenha-o com menos de aproximadamente 60 caracteres para que caiba em uma linha e não seja truncado pela rede social. Faça-o corresponder ao <title> da página, mas sinta-se à vontade para otimizá-lo visando obter mais cliques.
og:description
Resumo de uma ou duas frases exibido abaixo do título. Procure usar de 120 a 160 caracteres — o suficiente para despertar interesse, mas curto o bastante para ser exibido por completo em todas as plataformas. Evite iscas de cliques; descrições honestas geram mais engajamento a longo prazo.
og:image
A imagem principal. Utilize um JPG ou PNG de 1200x630 pixels (com menos de aproximadamente 5 MB). Use sempre uma URL absoluta — URLs relativas não funcionam porque o coletor não tem o conceito de "esta página". Forneça og:image:width e og:image:height para evitar uma solicitação extra durante a geração da pré-visualização.
og:url
A URL canônica da página. Defina-a mesmo quando a página já tiver um <link rel="canonical"> — alguns coletores dão preferência ao marcador OG. Remova os parâmetros de rastreamento para que as URLs compartilhadas não se multipliquem em muitas páginas "diferentes" no banco de dados da plataforma social.
og:type
Informa à plataforma que tipo de conteúdo é este: "website", "article", "product", "video.movie", "book" etc. Article é a opção mais comum para publicações de blog e habilita marcadores adicionais, como article:published_time e article:author.
og:locale
Localidade BCP-47 do conteúdo (por exemplo, "en_US", "tr_TR"). Combinada com og:locale:alternate, informa à rede em quais outros idiomas a página está disponível; é assim que o Facebook decide se deve traduzir uma pré-visualização.
og:site_name
O nome exibido do site que publica o conteúdo. Algumas redes o mostram como subtítulo no cartão. Mantenha-o curto e consistente em todas as páginas para que a marca seja apresentada da mesma forma, independentemente do artigo compartilhado.
Testando os cartões
Utilize o Depurador de compartilhamento do Facebook e o Post Inspector do LinkedIn para buscar a página como o coletor a vê, visualizar os marcadores interpretados e atualizar a pré-visualização armazenada em cache. Após publicar uma nova og:image, é necessário coletar a página novamente; caso contrário, os usuários verão a imagem antiga por dias.
Armadilhas comuns
Os marcadores renderizados no servidor são obrigatórios — a maioria dos coletores não executa JavaScript, portanto os marcadores OG injetados pelo React no cliente ficam invisíveis para eles. Renderize-os no HTML inicial, idealmente com SSR ou SSG; caso contrário, os cartões de compartilhamento permanecerão genéricos para sempre.
Verificação de conhecimento
Por que og:image deve usar uma URL absoluta em vez de um caminho relativo?
Resumo
Os marcadores OpenGraph (og:title, og:description, og:image com URL absoluta, og:url, og:type, og:locale, og:site_name) controlam a aparência de todas as páginas quando compartilhadas. Renderize-os no servidor, mantenha os títulos com menos de 60 caracteres e as descrições próximas de 150, use imagens de 1200x630 e teste com o Depurador de compartilhamento do Facebook antes do lançamento.
Aprenda HTML com um tutor de IA — grátis
Escreva e execute código real no seu navegador, obtenha ajuda instantânea de um tutor de IA 24/7 e continue de onde parou na web ou no app.
- Cursos
- 40
- Aulas
- 159
Perguntas Frequentes
A aula “OpenGraph og:title og:description og:image” é grátis?
Sim — o texto completo de “OpenGraph og:title og:description og:image” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de HTML Academy, atualize para CoddyKit PRO. O curso de HTML Academy inclui 4 aulas no total.
O que vou aprender em “OpenGraph og:title og:description og:image”?
Controle como sua página aparece quando compartilhada nas redes sociais. Você pratica HTML Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar HTML Academy?
Nenhuma experiência prévia é necessária. HTML Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 1 de 4.
Quanto tempo leva a aula “OpenGraph og:title og:description og:image”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de HTML Academy?
Sim. Cada aula de HTML Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- OpenGraph og:title og:description og:image
- Meta tags de cartão do Twitter
- Fundamentos de dados estruturados JSON-LD
- Hreflang para páginas internacionais