OpenGraph e metadados de cartões do Twitter
Adicione meta tags og: e twitter: para obter prévias enriquecidas de links em redes sociais.
OpenGraph e metadados de cartões do Twitter é uma aula grátis de Sveltejs Academy no CoddyKit. Esta é a aula 2 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 Sveltejs Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Sveltejs Academy inclui 4 aulas no total.
Por que usar tags OG
Os metadados do Open Graph oferecem às plataformas sociais (Facebook, LinkedIn, Slack) prévias detalhadas quando os links são compartilhados.
Tags OG obrigatórias
og:title, og:description, og:image e og:url são as mais importantes.
<svelte:head>
<meta property="og:title" content={title} />
<meta property="og:description" content={description} />
<meta property="og:image" content={imageUrl} />
<meta property="og:url" content={url} />
</svelte:head>Dimensões da imagem
1200x630 é o tamanho recomendado para imagens OG, garantindo a melhor exibição nas diferentes plataformas.
Cartões do Twitter
O Twitter respeita as tags OG, mas também possui seus próprios metadados twitter: para oferecer mais controle.
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content={title} />Tipos de cartão
O Twitter oferece os cartões summary, summary_large_image, app e player.
Validação
Use o Depurador de compartilhamento do Facebook e o Validador de cartões do Twitter para visualizar suas tags.
URLs absolutas
As URLs das imagens OG precisam ser absolutas; os caminhos relativos falham.
Personalização por página
Defina tags OG por artigo, produto ou perfil para obter prévias contextualizadas.
Evite padrões duplicados
Forneça valores padrão para todo o site no leiaute raiz e substitua-os por página.
Armazenamento em cache
As plataformas sociais armazenam os dados OG em cache. Use os depuradores delas para atualizá-los.
Impacto no mundo real
Prévias detalhadas aumentam significativamente as taxas de cliques em compartilhamentos sociais.
Verificação rápida
Por que as URLs das imagens OG precisam ser absolutas?
Recapitulação
Adicione metadados OG e do Twitter em <svelte:head>, usando URLs absolutas para as imagens e obtendo prévias sociais detalhadas.
Perguntas Frequentes
A aula “OpenGraph e metadados de cartões do Twitter” é grátis?
Sim — o texto completo de “OpenGraph e metadados de cartões do Twitter” é 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 Sveltejs Academy, atualize para CoddyKit PRO. O curso de Sveltejs Academy inclui 4 aulas no total.
O que vou aprender em “OpenGraph e metadados de cartões do Twitter”?
Adicione meta tags og: e twitter: para obter prévias enriquecidas de links em redes sociais. Você pratica Sveltejs 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 Sveltejs Academy?
Nenhuma experiência prévia é necessária. Sveltejs 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 2 de 4.
Quanto tempo leva a aula “OpenGraph e metadados de cartões do Twitter”?
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 Sveltejs Academy?
Sim. Cada aula de Sveltejs 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
- svelte:head para meta tags dinâmicas
- OpenGraph e metadados de cartões do Twitter
- Dados estruturados JSON-LD no SvelteKit
- URLs canônicas e geração de Sitemap