[{"data":1,"prerenderedAt":602},["ShallowReactive",2],{"pt-BR-article-\u002Fblog\u002Fog-tags-o-que-sao-e-como-adicionar-no-seu-site":3,"pt-BR-related-posts-\u002Fblog\u002Fog-tags-o-que-sao-e-como-adicionar-no-seu-site":443},{"id":4,"title":5,"articleCover":6,"articleCoverEmbed":7,"articleCoverEmbedUploadDate":8,"articleCoverHeight":9,"articleCoverWidth":10,"authorId":11,"body":12,"categoriesIds":426,"description":428,"enAlternateSlug":429,"extension":430,"meta":431,"navigation":141,"path":432,"ptBrAlternateSlug":429,"publishedAt":433,"seo":434,"sitemap":435,"stem":440,"updatedAt":439,"wordCount":441,"__hash__":442},"blog\u002Fblog\u002Fog-tags-o-que-sao-e-como-adicionar-no-seu-site.md","OG Tags: O que São e Como Adicioná-las ao Seu Site","\u002Fimages\u002Fblog\u002Fseo\u002Fo-que-e-como-utilizar-as-og-tags.webp","https:\u002F\u002Fwww.youtube.com\u002Fembed\u002FdLgvTA-34Zo?si=u0d0IbuqPKCiprS4","2024-10-03T09:01:06-07:00",720,1280,"thiago-nunes-batista",{"type":13,"value":14,"toc":420},"minimark",[15,27,30,37,42,60,322,326,329,358,361,375,379,403,409,413,416],[16,17,18,19,26],"p",{},"O ",[20,21,25],"a",{"href":22,"rel":23},"https:\u002F\u002Fogp.me\u002F",[24],"nofollow","Open Graph Protocol"," é um protocolo criado pelo Facebook em 2010 que define um padrão de metadados que devemos seguir e preencher para integrar um site com as mídias sociais, por exemplo, isso é utilizado para que ao compartilhar o link de um site, seja exibido o título, imagem e descrição do conteúdo.",[16,28,29],{},"Inicialmente o Open Graph Protocol foi pensado e desenvolvido para uso no Facebook, mas atualmente, por exemplo, outras plataformas como LinkedIn e Discord realizam o uso das OG Tags.",[31,32],"img",{"alt":33,"height":34,"src":35,"width":36},"exemplo do resultado do uso das OG Tags no Linkedin",398,"\u002Fimages\u002Fblog\u002Fseo\u002Fexemplo-de-uso-das-og-tags-no-linkedin.webp",531,[38,39,41],"h2",{"id":40},"como-adicionar-og-tags-em-um-site","Como adicionar OG Tags em um site?",[16,43,44,45,49,50,53,54,59],{},"Para adicionar as OG Tags será necessário realizar a inclusão de novas meta tags no cabeçalho da página web, onde o atributo ",[46,47,48],"code",{},"property"," é o nome da OG Tag e o atributo ",[46,51,52],{},"content"," define o valor, como o exemplo abaixo de um ",[20,55,58],{"href":56,"rel":57},"https:\u002F\u002Fcodigoaoponto.com\u002Fblog\u002Fcomo-recuperar-arquivos-perdidos-no-git-pelo-vscode",[24],"artigo no Código ao Ponto",":",[61,62,67],"pre",{"className":63,"code":64,"language":65,"meta":66,"style":66},"language-html shiki shiki-themes dracula","\u003Chead>\n  \u003Cmeta\n    property=\"og:title\"\n    content=\"Como recuperar arquivos perdidos no Git pelo VSCode | Código ao Ponto\"\n  \u002F>\n\n  \u003Cmeta\n    property=\"og:description\"\n    content=\"Aprenda a recuperar alterações de código perdidas utilizando uma funcionalidade do Vscode chamada Local History que salva diferentes versões do seu código.\"\n  \u002F>\n\n  \u003Cmeta\n    property=\"og:image\"\n    content=\"\u002Fimages\u002Fblog\u002Fcomo-recuperar-arquivos-perdido-no-git-pelo-vscode.webp\"\n  \u002F>\n\n  \u003Cmeta property=\"og:type\" content=\"article\" \u002F>\n\n  \u003Cmeta\n    property=\"og:url\"\n    content=\"https:\u002F\u002Fcodigoaoponto.com\u002Fblog\u002Fcomo-recuperar-arquivos-perdidos-no-git-pelo-vscode\"\n  \u002F>\n\u003C\u002Fhead>\n","html","",[46,68,69,85,94,115,130,136,143,150,164,178,183,188,195,209,223,228,233,268,273,280,294,307,312],{"__ignoreMap":66},[70,71,74,78,82],"span",{"class":72,"line":73},"line",1,[70,75,77],{"class":76},"sCdxs","\u003C",[70,79,81],{"class":80},"s0Tla","head",[70,83,84],{"class":76},">\n",[70,86,88,91],{"class":72,"line":87},2,[70,89,90],{"class":76},"  \u003C",[70,92,93],{"class":80},"meta\n",[70,95,97,101,104,108,112],{"class":72,"line":96},3,[70,98,100],{"class":99},"sY_PY","    property",[70,102,103],{"class":80},"=",[70,105,107],{"class":106},"seVfx","\"",[70,109,111],{"class":110},"s-mGx","og:title",[70,113,114],{"class":106},"\"\n",[70,116,118,121,123,125,128],{"class":72,"line":117},4,[70,119,120],{"class":99},"    content",[70,122,103],{"class":80},[70,124,107],{"class":106},[70,126,127],{"class":110},"Como recuperar arquivos perdidos no Git pelo VSCode | Código ao Ponto",[70,129,114],{"class":106},[70,131,133],{"class":72,"line":132},5,[70,134,135],{"class":76},"  \u002F>\n",[70,137,139],{"class":72,"line":138},6,[70,140,142],{"emptyLinePlaceholder":141},true,"\n",[70,144,146,148],{"class":72,"line":145},7,[70,147,90],{"class":76},[70,149,93],{"class":80},[70,151,153,155,157,159,162],{"class":72,"line":152},8,[70,154,100],{"class":99},[70,156,103],{"class":80},[70,158,107],{"class":106},[70,160,161],{"class":110},"og:description",[70,163,114],{"class":106},[70,165,167,169,171,173,176],{"class":72,"line":166},9,[70,168,120],{"class":99},[70,170,103],{"class":80},[70,172,107],{"class":106},[70,174,175],{"class":110},"Aprenda a recuperar alterações de código perdidas utilizando uma funcionalidade do Vscode chamada Local History que salva diferentes versões do seu código.",[70,177,114],{"class":106},[70,179,181],{"class":72,"line":180},10,[70,182,135],{"class":76},[70,184,186],{"class":72,"line":185},11,[70,187,142],{"emptyLinePlaceholder":141},[70,189,191,193],{"class":72,"line":190},12,[70,192,90],{"class":76},[70,194,93],{"class":80},[70,196,198,200,202,204,207],{"class":72,"line":197},13,[70,199,100],{"class":99},[70,201,103],{"class":80},[70,203,107],{"class":106},[70,205,206],{"class":110},"og:image",[70,208,114],{"class":106},[70,210,212,214,216,218,221],{"class":72,"line":211},14,[70,213,120],{"class":99},[70,215,103],{"class":80},[70,217,107],{"class":106},[70,219,220],{"class":110},"\u002Fimages\u002Fblog\u002Fcomo-recuperar-arquivos-perdido-no-git-pelo-vscode.webp",[70,222,114],{"class":106},[70,224,226],{"class":72,"line":225},15,[70,227,135],{"class":76},[70,229,231],{"class":72,"line":230},16,[70,232,142],{"emptyLinePlaceholder":141},[70,234,236,238,241,244,246,248,251,253,256,258,260,263,265],{"class":72,"line":235},17,[70,237,90],{"class":76},[70,239,240],{"class":80},"meta",[70,242,243],{"class":99}," property",[70,245,103],{"class":80},[70,247,107],{"class":106},[70,249,250],{"class":110},"og:type",[70,252,107],{"class":106},[70,254,255],{"class":99}," content",[70,257,103],{"class":80},[70,259,107],{"class":106},[70,261,262],{"class":110},"article",[70,264,107],{"class":106},[70,266,267],{"class":76}," \u002F>\n",[70,269,271],{"class":72,"line":270},18,[70,272,142],{"emptyLinePlaceholder":141},[70,274,276,278],{"class":72,"line":275},19,[70,277,90],{"class":76},[70,279,93],{"class":80},[70,281,283,285,287,289,292],{"class":72,"line":282},20,[70,284,100],{"class":99},[70,286,103],{"class":80},[70,288,107],{"class":106},[70,290,291],{"class":110},"og:url",[70,293,114],{"class":106},[70,295,297,299,301,303,305],{"class":72,"line":296},21,[70,298,120],{"class":99},[70,300,103],{"class":80},[70,302,107],{"class":106},[70,304,56],{"class":110},[70,306,114],{"class":106},[70,308,310],{"class":72,"line":309},22,[70,311,135],{"class":76},[70,313,315,318,320],{"class":72,"line":314},23,[70,316,317],{"class":76},"\u003C\u002F",[70,319,81],{"class":80},[70,321,84],{"class":76},[38,323,325],{"id":324},"os-diferentes-tipos-de-og-tags","Os diferentes tipos de OG Tags",[16,327,328],{},"Existe uma grande variedade de OG Tags, algumas que são fundamentais de se utilizar e outras que são complementares. Abaixo segue as essenciais:",[330,331,332,338,343,348,353],"ol",{},[333,334,335,337],"li",{},[46,336,111],{}," - define o título da página",[333,339,340,342],{},[46,341,250],{}," - define o tipo de conteúdo da página. Exemplos: artigo, site, vídeo, etc.",[333,344,345,347],{},[46,346,206],{}," - define a imagem exibida, talvez a tag mais importante, que captura a atenção do usuário.",[333,349,350,352],{},[46,351,291],{}," - define a URL canônica da página",[333,354,355,357],{},[46,356,161],{}," - define o texto de descrição que normalmente é exibido abaixo da imagem.",[16,359,360],{},"E agora algumas das OG Tags complementares, que são úteis em casos específicos:",[330,362,363,369],{},[333,364,365,368],{},[46,366,367],{},"og:audio"," - define a URL de um arquivo de aúdio presente na página",[333,370,371,374],{},[46,372,373],{},"og:video"," - define a URL de um arquivo de vídeo presente na página.",[38,376,378],{"id":377},"como-testar-as-og-tags-de-um-site","Como testar as OG Tags de um site?",[16,380,381,382,387,388,391,392,391,395,398,399,402],{},"Vou te recomendar o site ",[20,383,386],{"href":384,"rel":385},"https:\u002F\u002Fwww.opengraph.xyz\u002F",[24],"Open Graph",", nele basta você colocar a URL do site que você quer validar o correto funcionamento das OG tags e fazer essa verificação sem precisar compartilhar o link do seu site em cada uma das mídias sociais que você quer testar. O site traz previews das OG Tags para ",[46,389,390],{},"Facebook",", ",[46,393,394],{},"Twitter",[46,396,397],{},"LinkedIn"," e ",[46,400,401],{},"Discord",".",[31,404],{"alt":405,"height":406,"src":407,"width":408},"utilizando o site Open Graph para visualizar o preview do link do seu site nas mídias sociais com as OG Tags",742,"\u002Fimages\u002Fblog\u002Fseo\u002Futilizando-o-site-open-graph-para-ver-preview-das-og-tags.webp",628,[38,410,412],{"id":411},"conclusão","Conclusão",[16,414,415],{},"As OG Tags realizam um papel essencial na integração do seu site com mídias sociais como Twitter, Tiktok e LinkedIn, melhorando a apresentação do conteúdo do site e aumentando a chance de usuários clicarem no link compartilhado e acessarem o seu site.",[417,418,419],"style",{},"html pre.shiki code .sCdxs, html code.shiki .sCdxs{--shiki-default:#F8F8F2}html pre.shiki code .s0Tla, html code.shiki .s0Tla{--shiki-default:#FF79C6}html pre.shiki code .sY_PY, html code.shiki .sY_PY{--shiki-default:#50FA7B;--shiki-default-font-style:italic}html pre.shiki code .seVfx, html code.shiki .seVfx{--shiki-default:#E9F284}html pre.shiki code .s-mGx, html code.shiki .s-mGx{--shiki-default:#F1FA8C}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"title":66,"searchDepth":87,"depth":87,"links":421},[422,423,424,425],{"id":40,"depth":87,"text":41},{"id":324,"depth":87,"text":325},{"id":377,"depth":87,"text":378},{"id":411,"depth":87,"text":412},[427],"seo","Descubra como o Open Graph Protocol melhora a integração do seu site com mídias sociais, exibindo título, imagem e descrição nos links compartilhados.",null,"md",{},"\u002Fblog\u002Fog-tags-o-que-sao-e-como-adicionar-no-seu-site","2024-10-05",{"title":5,"description":428},{"loc":432,"images":436,"lastmod":439},[437,438],{"loc":35},{"loc":407},"2026-10-06","blog\u002Fog-tags-o-que-sao-e-como-adicionar-no-seu-site",446,"BnZneeQw7Qs29d8xIucUeWEp1mLoLAAzJIgx1EvYyBY",[444,452,461,468,476,484,491,498,506,513,520,528,534,543,550,557,559,566,573,581,588,594],{"id":445,"path":446,"title":447,"articleCover":448,"categoriesIds":449,"publishedAt":451},"blog\u002Fblog\u002Fa-maneira-correta-de-utilizar-a-nomenclatura-bem.md","\u002Fblog\u002Fa-maneira-correta-de-utilizar-a-nomenclatura-bem","A maneira correta de utilizar a nomenclatura BEM","\u002Fimages\u002Fblog\u002Fa-maneira-correta-de-utilizar-a-nomenclatura-bem.webp",[450],"css","2024-05-05",{"id":453,"path":454,"title":455,"articleCover":456,"categoriesIds":457,"publishedAt":460},"blog\u002Fblog\u002Fcomo-adicionar-caracteres-especiais-no-i18n.md","\u002Fblog\u002Fcomo-adicionar-caracteres-especiais-no-i18n","Como Adicionar Caracteres Especiais em Traduções do i18N","\u002Fimages\u002Fblog\u002Fi18n\u002Fi18n-caracteres-especiais-no-nuxtjs-thumb.webp",[458,459],"nuxt","vuejs","2025-01-29",{"id":462,"path":463,"title":464,"articleCover":465,"categoriesIds":466,"publishedAt":467},"blog\u002Fblog\u002Fcomo-adicionar-o-google-tag-manager-no-seu-website-com-nuxt-3.md","\u002Fblog\u002Fcomo-adicionar-o-google-tag-manager-no-seu-website-com-nuxt-3","Como adicionar o Google Tag Manager no seu website com Nuxt 3","\u002Fimages\u002Fblog\u002Fcomo-adicionar-google-tag-manager-em-projeto-com-nuxt-3.webp",[458,459],"2024-08-15",{"id":469,"path":470,"title":471,"articleCover":472,"categoriesIds":473,"publishedAt":475},"blog\u002Fblog\u002Fcomo-configurar-chave-ssh-no-git-para-usar-no-github.md","\u002Fblog\u002Fcomo-configurar-chave-ssh-no-git-para-usar-no-github","Chave SSH no Git: Como Configurar chave SSH para usar no GitHub","\u002Fimages\u002Fblog\u002Fgit\u002Fcomo-criar-e-configurar-chave-ssh-no-github-thumb.webp",[474],"git","2025-02-04",{"id":477,"path":478,"title":479,"articleCover":480,"categoriesIds":481,"publishedAt":483},"blog\u002Fblog\u002Fcomo-consumir-uma-api-no-javascript-com-a-fetch-api.md","\u002Fblog\u002Fcomo-consumir-uma-api-no-javascript-com-a-fetch-api","Como consumir uma API no JavaScript com a Fetch API","\u002Fimages\u002Fblog\u002Fcomo-consumir-uma-api-no-javascript-com-a-fetch-api.webp",[482],"javascript","2024-09-05",{"id":485,"path":486,"title":487,"articleCover":488,"categoriesIds":489,"publishedAt":490},"blog\u002Fblog\u002Fcomo-criar-dados-estruturados-com-nuxtjs.md","\u002Fblog\u002Fcomo-criar-dados-estruturados-com-nuxtjs","Como Adicionar Dados Estruturados no Nuxt.JS","\u002Fimages\u002Fblog\u002Fseo\u002Fstructured-data\u002Fstructured-data-thumb-1.webp",[458,459,427],"2025-01-22",{"id":492,"path":493,"title":494,"articleCover":495,"categoriesIds":496,"publishedAt":497},"blog\u002Fblog\u002Fcomo-funciona-o-sistema-de-rotas-no-nuxt.md","\u002Fblog\u002Fcomo-funciona-o-sistema-de-rotas-no-nuxt","Rotas no Nuxt: dinâmicas, aninhadas e catch-all","\u002Fimages\u002Fblog\u002Fnuxt\u002Fsistema-de-rotas-no-nuxtjs-thumb.webp",[458,459],"2025-03-12",{"id":499,"path":500,"title":501,"articleCover":502,"categoriesIds":503,"publishedAt":505},"blog\u002Fblog\u002Fcomo-lidar-com-inveja-de-outros-programadores.md","\u002Fblog\u002Fcomo-lidar-com-inveja-de-outros-programadores","Como Lidar com Inveja de Outros Programadores","\u002Fimages\u002Fblog\u002Fcarreira\u002Finveja-de-programadores-com-quem-se-destaca.webp",[504],"career","2025-08-29",{"id":507,"path":508,"title":509,"articleCover":220,"categoriesIds":510,"publishedAt":512},"blog\u002Fblog\u002Fcomo-recuperar-arquivos-perdidos-no-git-pelo-vscode.md","\u002Fblog\u002Fcomo-recuperar-arquivos-perdidos-no-git-pelo-vscode","Perdeu arquivos no Git sem commit? Veja como recuperar pelo VS Code",[474,511],"vscode","2024-05-15",{"id":514,"path":515,"title":516,"articleCover":517,"categoriesIds":518,"publishedAt":519},"blog\u002Fblog\u002Fcomo-usar-middlewares-no-nuxtjs.md","\u002Fblog\u002Fcomo-usar-middlewares-no-nuxtjs","Middlewares: O que são e como utilizar no Nuxt.JS","\u002Fimages\u002Fblog\u002Fnuxt\u002Fmiddlewares-no-front-end.webp",[458,459],"2025-01-14",{"id":521,"path":522,"title":523,"articleCover":524,"categoriesIds":525,"publishedAt":527},"blog\u002Fblog\u002Fcomo-validar-cartao-de-credito-com-javascript.md","\u002Fblog\u002Fcomo-validar-cartao-de-credito-com-javascript","Como validar um cartão de crédito com JavaScript (algoritmo de Luhn)","\u002Fimages\u002Fblog\u002Fjavascript\u002Fcomo-validar-cartao-de-credito-com-javascript.webp",[482,526],"tools","2026-09-17",{"id":529,"path":530,"title":531,"articleCover":532,"categoriesIds":533,"publishedAt":527},"blog\u002Fblog\u002Fcomo-validar-cpf-com-javascript.md","\u002Fblog\u002Fcomo-validar-cpf-com-javascript","Como validar um CPF com JavaScript","\u002Fimages\u002Fblog\u002Fjavascript\u002Fcomo-validar-cpf-com-javascript.webp",[482,526],{"id":535,"path":536,"title":537,"articleCover":538,"categoriesIds":539,"publishedAt":542},"blog\u002Fblog\u002Fcomponentes-do-figma-um-guia-para-te-ajudar-a-comecar.md","\u002Fblog\u002Fcomponentes-do-figma-um-guia-para-te-ajudar-a-comecar","Guia de Componentes no Figma para Iniciantes","\u002Fimages\u002Fblog\u002Ffigma\u002Fcomponentes-do-figma-um-guia-para-te-ajudar-a-comecar.png",[540,541],"figma","ux","2024-10-15",{"id":544,"path":545,"title":546,"articleCover":547,"categoriesIds":548,"publishedAt":549},"blog\u002Fblog\u002Fhub-de-ferramentas-gratuitas-para-desenvolvedores.md","\u002Fblog\u002Fhub-de-ferramentas-gratuitas-para-desenvolvedores","Criei um Hub de Ferramentas Web Gratuitas para Devs","\u002Fimages\u002Fblog\u002Fferramentas\u002Fhub-ferramentas-gratuitas-para-desenvolvedores.webp",[526],"2026-01-06",{"id":551,"path":552,"title":553,"articleCover":554,"categoriesIds":555,"publishedAt":556},"blog\u002Fblog\u002Fo-que-sao-diretivas-no-vue-e-como-implementa-las.md","\u002Fblog\u002Fo-que-sao-diretivas-no-vue-e-como-implementa-las","Diretivas no Vue 3: nativas e personalizadas","\u002Fimages\u002Fblog\u002Fvue\u002Fo-que-sao-diretivas-no-vue-e-como-implementa-las.webp",[459],"2025-03-21",{"id":4,"path":432,"title":5,"articleCover":6,"categoriesIds":558,"publishedAt":433},[427],{"id":560,"path":561,"title":562,"articleCover":563,"categoriesIds":564,"publishedAt":565},"blog\u002Fblog\u002Fos-principais-erros-de-programadores-em-entrevistas-de-emprego.md","\u002Fblog\u002Fos-principais-erros-de-programadores-em-entrevistas-de-emprego","Os principais erros de programadores em entrevistas de emprego","\u002Fimages\u002Fblog\u002Fnao-cometa-esses-erros-na-sua-entrevista.webp",[504],"2024-09-15",{"id":567,"path":568,"title":569,"articleCover":570,"categoriesIds":571,"publishedAt":572},"blog\u002Fblog\u002Fqual-a-diferenca-entre-a-composition-api-e-options-api-no-vuejs.md","\u002Fblog\u002Fqual-a-diferenca-entre-a-composition-api-e-options-api-no-vuejs","Qual a diferença entre a Composition API e Options API no VueJS","\u002Fimages\u002Fblog\u002Fvue\u002Fqual-a-diferenca-entre-a-composition-api-e-options-api-no-vuejs.webp",[459],"2025-02-20",{"id":574,"path":575,"title":576,"articleCover":577,"categoriesIds":578,"publishedAt":580},"blog\u002Fblog\u002Fscroll-infinito-como-adicionar-ao-seu-site-e-suas-vantagens.md","\u002Fblog\u002Fscroll-infinito-como-adicionar-ao-seu-site-e-suas-vantagens","Scroll Infinito no React-Native: Guia Prático","\u002Fimages\u002Fblog\u002Freact-native\u002Fscroll-infinito-como-adicionar-ao-seu-site-e-suas-vantagens.webp",[579],"react-native","2024-12-15",{"id":582,"path":583,"title":584,"articleCover":585,"categoriesIds":586,"publishedAt":587},"blog\u002Fblog\u002Fvercel-compra-nuxt-labs.md","\u002Fblog\u002Fvercel-compra-nuxt-labs","Vercel comprou a Nuxt Labs! E agora, o que muda para o Nuxt?","\u002Fimages\u002Fblog\u002Fnuxt\u002Fvercel-compra-nuxt-labs.webp",[458],"2025-07-17",{"id":589,"path":590,"title":591,"articleCover":592,"categoriesIds":593,"publishedAt":439},"blog\u002Fblog\u002Fvue-vapor-mode-como-funciona-e-como-usar.md","\u002Fblog\u002Fvue-vapor-mode-como-funciona-e-como-usar","Vue Vapor Mode: o que é e o que muda no Vue 3.6","\u002Fimages\u002Fblog\u002Fvue\u002Fvue-vapor-mode-como-funciona-e-como-usar.webp",[459,458],{"id":595,"path":596,"title":597,"articleCover":598,"categoriesIds":599,"publishedAt":601},"blog\u002Fblog\u002Fweb-vitals-como-a-experiencia-do-usuario-vai-afetar-o-seo-do-seu-site.md","\u002Fblog\u002Fweb-vitals-como-a-experiencia-do-usuario-vai-afetar-o-seo-do-seu-site","Web Vitals e SEO: como a experiência do usuário afeta o seu site","\u002Fimages\u002Fblog\u002Fseo\u002Fweb-vitals\u002Fweb-vitals-como-a-experiencia-do-usuario-vai-afetar-o-seo-do-seu-site.webp",[427,600],"web-vitals","2024-10-25",1791682333540]