"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-de-metadados-de-websites", "hProperties": { "id": "nunca-ouviu-falar-de-metadados-de-websites" } }, "depth": 2, "value": "Nunca ouviu falar de metadados de websites?" }, { "data": { "id": "configurando-os-metadados-de-open-graph", "hProperties": { "id": "configurando-os-metadados-de-open-graph" } }, "depth": 2, "value": "Configurando os metadados de Open Graph" }, { "data": { "id": "configurando-os-metadados-de-twitter-cards", "hProperties": { "id": "configurando-os-metadados-de-twitter-cards" } }, "depth": 2, "value": "Configurando os metadados de Twitter Cards" }, { "data": { "id": "notas-finais", "hProperties": { "id": "notas-finais" } }, "depth": 2, "value": "Notas finais" }]; const readingTime = { "minutes": 3, "words": 903, "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ê partilha um link para o seu website nas redes sociais, quer que ele tenha uma boa aparência. Em vez de mostrar apenas um link simples, você quer mostrar uma pré-visualização bonita com todos os metadados necessários, como título, descrição e imagem. É aqui que entram os metadados de Open Graph e Twitter (agora X) Cards." }), "\n", _jsxs(_components.p, { children: ["Neste artigo, vamos mostrar como configurar os metadados de Open Graph (", _jsx(_components.a, { href: "https://ogp.me/", children: "ogp.me" }), ") e Twitter Cards para o seu website. Também vamos mostrar como testar os seus metadados para garantir que eles tenham uma boa aparência nas redes sociais."] }), "\n", _jsxs(_components.h2, { id: "nunca-ouviu-falar-de-metadados-de-websites", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#nunca-ouviu-falar-de-metadados-de-websites", children: _jsx(_components.span, { children: "#" }) }), "Nunca ouviu falar de metadados de websites?"] }), "\n", _jsx(_components.p, { children: "Quando um humano visita um website, ele vê o conteúdo renderizado pelo navegador. Mas quando um bot (como um rastreador de motores de busca ou um raspador de redes sociais) visita um website, ele vê apenas o HTML bruto. Os metadados do website entram agora em ação para fornecer informações estruturadas sobre o website ao bot, que ele pode usar para renderizar uma saída estruturada, como um cartão de pré-visualização." }), "\n", _jsxs(_components.p, { children: ["Se você clicar com o botão direito do rato em um website e selecionar \"Ver código-fonte da página\", você verá o HTML bruto do website. Os metadados são geralmente 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 website é \"My Website\" e a descrição é \"This is my website.\"." }), "\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" }), ". O Open Graph é um protocolo desenvolvido pelo Facebook para fornecer informações estruturadas sobre um website. O Twitter (agora X) também tem seu próprio protocolo de metadados, chamado Twitter Cards."] }), "\n", _jsxs(_components.h2, { id: "configurando-os-metadados-de-open-graph", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#configurando-os-metadados-de-open-graph", children: _jsx(_components.span, { children: "#" }) }), "Configurando os metadados de Open Graph"] }), "\n", _jsx(_components.p, { children: "Algumas das tags de metadados de 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 website."] }), "\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 website."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "og:image" }), ": O URL da imagem a ser exibida."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "og:url" }), ": O ", _jsx(_components.a, { href: "https://developers.google.com/search/docs/crawling-indexing/canonicalization", children: "URL canónico" }), " do website."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "og:type" }), ": O tipo do website (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 website (por exemplo, o nome do blog). Se você verificar o código-fonte desta página, verá os seguintes metadados de 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 temos ", _jsx(_components.code, { children: "og:type" }), " definido 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 vários valores, deve usar várias tags ", _jsx(_components.code, { children: "" }), " com o mesmo nome de propriedade."] }), "\n", _jsxs(_components.p, { children: ["Depois de adicionar os metadados de Open Graph ao seu website, você pode testá-los usando o ", _jsx(_components.a, { href: "https://developers.facebook.com/tools/debug/", children: "Facebook Sharing Debugger" }), ". Basta inserir o URL do seu website 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 do nosso post do blog ", _jsx(_components.a, { href: "/quando-devo-usar-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: "Facebook Debugger" }) }), "\n", _jsxs(_components.h2, { id: "configurando-os-metadados-de-twitter-cards", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#configurando-os-metadados-de-twitter-cards", children: _jsx(_components.span, { children: "#" }) }), "Configurando os metadados de Twitter Cards"] }), "\n", _jsxs(_components.p, { children: ["Os Twitter Cards são semelhantes aos metadados de 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 Twitter Cards:"] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Summary Card: Um cartão com título, descrição e miniatura." }), "\n", _jsx(_components.li, { children: "Summary Card with Large Image: Um cartão com título, descrição e imagem grande." }), "\n", _jsx(_components.li, { children: "App Card: Um cartão para promover apps móveis." }), "\n", _jsx(_components.li, { children: "Player Card: Um cartão para conteúdo de vídeo e áudio." }), "\n"] }), "\n", _jsx(_components.p, { children: "Para o nosso post do blog, usaremos o Summary Card with Large Image. Os metadados de Twitter Cards para o post do 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 de 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 website."] }), "\n"] }), "\n", _jsxs(_components.p, { children: ["Havia um ", _jsx(_components.a, { href: "https://cards-dev.twitter.com/validator", children: "Validador de Twitter Cards" }), " disponível, no entanto, o recurso de pré-visualização foi movido para o Tweet Composer (melhor que nada, porém)."] }), "\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 os metadados de Open Graph e Twitter Cards para o seu website é fácil e útil. As pessoas adoram imagens, e um cartão de pré-visualização bonito pode atrair mais atenção para o seu website. Boa sorte com o seu website e boas partilhas!" })] }); } 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 };