"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; const headings = [{ "data": { "id": "introdução", "hProperties": { "id": "introdução" } }, "depth": 2, "value": "Introdução" }, { "data": { "id": "nunca-ouviu-falar-em-metadados-de-site", "hProperties": { "id": "nunca-ouviu-falar-em-metadados-de-site" } }, "depth": 2, "value": "Nunca ouviu falar em metadados de site?" }, { "data": { "id": "configurando-metadados-open-graph", "hProperties": { "id": "configurando-metadados-open-graph" } }, "depth": 2, "value": "Configurando metadados Open Graph" }, { "data": { "id": "configurando-metadados-de-cartões-do-twitter", "hProperties": { "id": "configurando-metadados-de-cartões-do-twitter" } }, "depth": 2, "value": "Configurando metadados de Cartões do Twitter" }, { "data": { "id": "notas-finais", "hProperties": { "id": "notas-finais" } }, "depth": 2, "value": "Notas finais" }]; const readingTime = { "minutes": 3, "words": 893, "text": "3 min read" }; const frontmatter = undefined; function _createMdxContent(props) { const _components = { a: "a", code: "code", h2: "h2", img: "img", li: "li", p: "p", pre: "pre", span: "span", ul: "ul", ..._provideComponents(), ...props.components }; return _jsxs(_Fragment, { children: [_jsxs(_components.h2, { id: "introdução", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#introdução", children: _jsx(_components.span, { children: "#" }) }), "Introdução"] }), "\n", _jsx(_components.p, { children: "Quando você compartilha um link do seu site nas redes sociais, você quer que ele fique bonito. Em vez de mostrar apenas um link simples, você quer mostrar um belo preview com todos os metadados necessários, como título, descrição e imagem. É aqui que entram os metadados Open Graph e Cartões Twitter (agora X)." }), "\n", _jsxs(_components.p, { children: ["Neste artigo, vamos mostrar como configurar os metadados Open Graph (", _jsx(_components.a, { href: "https://ogp.me/", children: "ogp.me" }), ") e Cartões Twitter para o seu site. Também vamos mostrar como testar seus metadados para garantir que eles fiquem bonitos nas redes sociais."] }), "\n", _jsxs(_components.h2, { id: "nunca-ouviu-falar-em-metadados-de-site", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#nunca-ouviu-falar-em-metadados-de-site", children: _jsx(_components.span, { children: "#" }) }), "Nunca ouviu falar em metadados de site?"] }), "\n", _jsx(_components.p, { children: "Quando um humano visita um site, ele vê o conteúdo renderizado pelo navegador. Mas quando um bot (como um rastreador de mecanismo de busca ou um scraper de mídia social) visita um site, ele vê apenas o HTML bruto. Agora os metadados do site entram em ação para fornecer informações estruturadas sobre o site para o bot, que pode usá-las para renderizar uma saída estruturada, como um cartão de preview." }), "\n", _jsxs(_components.p, { children: ["Se você clicar com o botão direito em um site e selecionar \"Ver código-fonte da página\", verá o HTML bruto do site. Os metadados geralmente são incluídos na seção ", _jsx(_components.code, { children: "" }), " do HTML, e parecem algo assim:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-html", children: "\n\n" }) }), "\n", _jsx(_components.p, { children: "O código acima é autoexplicativo: o título do site é \"Página Inicial do Meu Site\" e a descrição é \"Este é o meu site.\"." }), "\n", _jsxs(_components.p, { children: ["Você pode notar o prefixo ", _jsx(_components.code, { children: "og:" }), " nos metadados, que significa ", _jsx(_components.a, { href: "https://ogp.me/", children: "Open Graph" }), ". Open Graph é um protocolo desenvolvido pelo Facebook para fornecer informações estruturadas sobre um site. O Twitter (agora X) também tem seu próprio protocolo de metadados, chamado Cartões Twitter."] }), "\n", _jsxs(_components.h2, { id: "configurando-metadados-open-graph", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#configurando-metadados-open-graph", children: _jsx(_components.span, { children: "#" }) }), "Configurando metadados Open Graph"] }), "\n", _jsx(_components.p, { children: "Algumas das tags de metadados Open Graph mais comuns são:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "og:site_name" }), ": O nome do site."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "og:title" }), ": O título da página atual."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "og:description" }), ": Uma breve descrição do site."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "og:image" }), ": A URL da imagem a ser exibida."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "og:url" }), ": A ", _jsx(_components.a, { href: "https://developers.google.com/search/docs/crawling-indexing/canonicalization", children: "URL canônica" }), " do site."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "og:type" }), ": O tipo do site (por exemplo, website, artigo, vídeo)."] }), "\n"] }), "\n", _jsxs(_components.p, { children: ["A diferença entre ", _jsx(_components.code, { children: "og:title" }), " e ", _jsx(_components.code, { children: "og:site_name" }), " é que ", _jsx(_components.code, { children: "og:title" }), " é o título da página atual (por exemplo, o título do post do blog), enquanto ", _jsx(_components.code, { children: "og:site_name" }), " é o nome do site (por exemplo, o nome do blog). Se você verificar o código-fonte desta página, verá os seguintes metadados Open Graph:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-html", children: "\n\n\n\n\n\n" }) }), "\n", _jsxs(_components.p, { children: ["Como configuramos ", _jsx(_components.code, { children: "og:type" }), " como ", _jsx(_components.code, { children: "article" }), ", metadados adicionais como autor e data de publicação podem ser adicionados. Por exemplo, se você quiser adicionar as tags para um post de blog, pode adicionar os seguintes metadados:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-html", children: "\n\n" }) }), "\n", _jsxs(_components.p, { children: ["O Open Graph especifica que, se você quiser adicionar múltiplos valores, deve usar múltiplas tags ", _jsx(_components.code, { children: "" }), " com o mesmo nome de propriedade."] }), "\n", _jsxs(_components.p, { children: ["Depois de adicionar os metadados Open Graph ao seu site, você pode testá-los usando o ", _jsx(_components.a, { href: "https://developers.facebook.com/tools/debug/", children: "Facebook Sharing Debugger" }), ". Basta inserir a URL do seu site e clicar em \"Debug\". Se houver algum problema com os metadados, o depurador mostrará os erros."] }), "\n", _jsxs(_components.p, { children: ["Aqui está um exemplo de nosso post no blog ", _jsx(_components.a, { href: "/when-should-i-use-jwts", children: "Quando devo usar JWTs?" }), " no Facebook Sharing Debugger:"] }), "\n", _jsx(_components.p, { children: _jsx(_components.img, { src: "https://uploads.strapi.logto.io/Screenshot_2024_08_24_at_15_29_16_min_34070c92c1.png", alt: "Depurador do Facebook" }) }), "\n", _jsxs(_components.h2, { id: "configurando-metadados-de-cartões-do-twitter", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#configurando-metadados-de-cartões-do-twitter", children: _jsx(_components.span, { children: "#" }) }), "Configurando metadados de Cartões do Twitter"] }), "\n", _jsxs(_components.p, { children: ["Os Cartões do Twitter são semelhantes aos metadados Open Graph, mas têm ", _jsx(_components.a, { href: "https://developer.x.com/en/docs/x-for-websites/cards/overview/", children: "suas próprias convenções" }), ". Existem quatro tipos de Cartões do Twitter:"] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Cartão de Resumo: Um cartão com título, descrição e miniatura." }), "\n", _jsx(_components.li, { children: "Cartão de Resumo com Imagem Grande: Um cartão com título, descrição e imagem grande." }), "\n", _jsx(_components.li, { children: "Cartão de App: Um cartão para promover aplicativos móveis." }), "\n", _jsx(_components.li, { children: "Cartão de Player: Um cartão para conteúdo de vídeo e áudio." }), "\n"] }), "\n", _jsx(_components.p, { children: "Para nosso post no blog, usaremos o Cartão de Resumo com Imagem Grande. Os metadados de Cartões do Twitter para o post no blog serão assim:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-html", children: "\n\n\n\n\n\n" }) }), "\n", _jsx(_components.p, { children: "As duas principais diferenças em relação aos metadados Open Graph são:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: ["A tag ", _jsx(_components.code, { children: "twitter:card" }), " é obrigatória e especifica o tipo de cartão."] }), "\n", _jsxs(_components.li, { children: ["A tag ", _jsx(_components.code, { children: "twitter:site" }), " especifica o handle do Twitter do site."] }), "\n"] }), "\n", _jsxs(_components.p, { children: ["Havia um ", _jsx(_components.a, { href: "https://cards-dev.twitter.com/validator", children: "Validador de Cartões do Twitter" }), " disponível, no entanto, o recurso de visualização foi movido para o Tweet Composer (melhor que nada, entretanto)."] }), "\n", _jsxs(_components.h2, { id: "notas-finais", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#notas-finais", children: _jsx(_components.span, { children: "#" }) }), "Notas finais"] }), "\n", _jsx(_components.p, { children: "Configurar metadados Open Graph e Cartões do Twitter para o seu site é fácil, mas útil. As pessoas adoram imagens, e um belo cartão de preview pode atrair mais atenção para o seu site. Boa sorte com o seu site e feliz compartilhamento!" })] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = { ..._provideComponents(), ...props.components }; return MDXLayout ? _jsx(MDXLayout, { ...props, children: _jsx(_createMdxContent, { ...props }) }) : _createMdxContent(props); } return { headings, readingTime, frontmatter, default: MDXContent };