[{"data":1,"prerenderedAt":256},["ShallowReactive",2],{"term-o\u002Fopen-graph":3,"related-o\u002Fopen-graph":249},{"id":4,"title":5,"acronym":6,"body":7,"category":232,"description":233,"difficulty":234,"extension":235,"letter":236,"meta":237,"navigation":238,"path":239,"related":240,"seo":243,"sitemap":244,"stem":247,"subcategory":6,"__hash__":248},"terms\u002Fterms\u002Fo\u002Fopen-graph.md","Open Graph",null,{"type":8,"value":9,"toc":226},"minimark",[10,15,19,23,26,30,215,219,222],[11,12,14],"h2",{"id":13},"eli5-the-vibe-check","ELI5 — The Vibe Check",[16,17,18],"p",{},"Open Graph is the reason your link previews look nice when you paste them in iMessage, Slack, or Twitter. Without it, you just get a bare URL. With it, you get a beautiful card with a title, description, and image. Facebook invented it and now everyone uses it.",[11,20,22],{"id":21},"real-talk","Real Talk",[16,24,25],{},"Open Graph is a protocol developed by Facebook that enables any web page to become a rich object in a social graph. By adding OG meta tags (og:title, og:description, og:image, og:url) to the HTML head, pages generate rich previews when shared on social platforms, messaging apps, and Slack.",[11,27,29],{"id":28},"show-me-the-code","Show Me The Code",[31,32,37],"pre",{"className":33,"code":34,"language":35,"meta":36,"style":36},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003C!-- Open Graph tags -->\n\u003Cmeta property=\"og:type\" content=\"website\" \u002F>\n\u003Cmeta property=\"og:url\" content=\"https:\u002F\u002Fvibecoder-dictionary.com\" \u002F>\n\u003Cmeta property=\"og:title\" content=\"Vibecoder Dictionary\" \u002F>\n\u003Cmeta property=\"og:description\" content=\"Developer terms explained like you're five.\" \u002F>\n\u003Cmeta property=\"og:image\" content=\"https:\u002F\u002Fvibecoder-dictionary.com\u002Fog-image.png\" \u002F>\n","html","",[38,39,40,49,91,122,153,184],"code",{"__ignoreMap":36},[41,42,45],"span",{"class":43,"line":44},"line",1,[41,46,48],{"class":47},"sHwdD","\u003C!-- Open Graph tags -->\n",[41,50,52,56,60,64,67,70,74,76,79,81,83,86,88],{"class":43,"line":51},2,[41,53,55],{"class":54},"sMK4o","\u003C",[41,57,59],{"class":58},"swJcz","meta",[41,61,63],{"class":62},"spNyl"," property",[41,65,66],{"class":54},"=",[41,68,69],{"class":54},"\"",[41,71,73],{"class":72},"sfazB","og:type",[41,75,69],{"class":54},[41,77,78],{"class":62}," content",[41,80,66],{"class":54},[41,82,69],{"class":54},[41,84,85],{"class":72},"website",[41,87,69],{"class":54},[41,89,90],{"class":54}," \u002F>\n",[41,92,94,96,98,100,102,104,107,109,111,113,115,118,120],{"class":43,"line":93},3,[41,95,55],{"class":54},[41,97,59],{"class":58},[41,99,63],{"class":62},[41,101,66],{"class":54},[41,103,69],{"class":54},[41,105,106],{"class":72},"og:url",[41,108,69],{"class":54},[41,110,78],{"class":62},[41,112,66],{"class":54},[41,114,69],{"class":54},[41,116,117],{"class":72},"https:\u002F\u002Fvibecoder-dictionary.com",[41,119,69],{"class":54},[41,121,90],{"class":54},[41,123,125,127,129,131,133,135,138,140,142,144,146,149,151],{"class":43,"line":124},4,[41,126,55],{"class":54},[41,128,59],{"class":58},[41,130,63],{"class":62},[41,132,66],{"class":54},[41,134,69],{"class":54},[41,136,137],{"class":72},"og:title",[41,139,69],{"class":54},[41,141,78],{"class":62},[41,143,66],{"class":54},[41,145,69],{"class":54},[41,147,148],{"class":72},"Vibecoder Dictionary",[41,150,69],{"class":54},[41,152,90],{"class":54},[41,154,156,158,160,162,164,166,169,171,173,175,177,180,182],{"class":43,"line":155},5,[41,157,55],{"class":54},[41,159,59],{"class":58},[41,161,63],{"class":62},[41,163,66],{"class":54},[41,165,69],{"class":54},[41,167,168],{"class":72},"og:description",[41,170,69],{"class":54},[41,172,78],{"class":62},[41,174,66],{"class":54},[41,176,69],{"class":54},[41,178,179],{"class":72},"Developer terms explained like you're five.",[41,181,69],{"class":54},[41,183,90],{"class":54},[41,185,187,189,191,193,195,197,200,202,204,206,208,211,213],{"class":43,"line":186},6,[41,188,55],{"class":54},[41,190,59],{"class":58},[41,192,63],{"class":62},[41,194,66],{"class":54},[41,196,69],{"class":54},[41,198,199],{"class":72},"og:image",[41,201,69],{"class":54},[41,203,78],{"class":62},[41,205,66],{"class":54},[41,207,69],{"class":54},[41,209,210],{"class":72},"https:\u002F\u002Fvibecoder-dictionary.com\u002Fog-image.png",[41,212,69],{"class":54},[41,214,90],{"class":54},[11,216,218],{"id":217},"when-youll-hear-this","When You'll Hear This",[16,220,221],{},"Generate dynamic OG images for each blog post.,The OG image should be 1200x630px for best results.,Use the Facebook Sharing Debugger to preview your OG tags.",[223,224,225],"style",{},"html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}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);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":36,"searchDepth":51,"depth":51,"links":227},[228,229,230,231],{"id":13,"depth":51,"text":14},{"id":21,"depth":51,"text":22},{"id":28,"depth":51,"text":29},{"id":217,"depth":51,"text":218},"frontend","Open Graph is the reason your link previews look nice when you paste them in iMessage, Slack, or Twitter. Without it, you just get a bare URL.","beginner","md","o",{},true,"\u002Fterms\u002Fo\u002Fopen-graph",[241,242],"Meta Tags","SEO",{"title":5,"description":233},{"changefreq":245,"priority":246},"weekly",0.7,"terms\u002Fo\u002Fopen-graph","BwafOi8v3E2sbIqURhyJBFKjIjWI_910eOLGo7SFykE",[250,253],{"title":241,"path":251,"acronym":6,"category":232,"difficulty":234,"description":252},"\u002Fterms\u002Fm\u002Fmeta-tags","Meta tags are invisible HTML tags that sit in your page's head and tell search engines and social media platforms about your page.",{"title":242,"path":254,"acronym":6,"category":232,"difficulty":234,"description":255},"\u002Fterms\u002Fs\u002Fseo","SEO is the art of convincing Google to rank your website higher than your competitors.",1776518299294]