[{"data":1,"prerenderedAt":135},["ShallowReactive",2],{"post-/posts/social-image":3},{"id":4,"title":5,"body":6,"coverImage":119,"description":120,"draft":121,"extension":122,"meta":123,"navigation":124,"ogImage":125,"path":126,"pinned":121,"publishDate":127,"seo":128,"stem":129,"tags":130,"updatedDate":119,"__hash__":134},"post/posts/social-image.md","Example OG Social Image",{"type":7,"value":8,"toc":114},"minimark",[9,14,32,52,77,85,110],[10,11,13],"h2",{"id":12},"adding-your-own-social-image-to-a-post","Adding your own social image to a post",[15,16,17,18,25,26,31],"p",{},"This post is an example of how to add a custom ",[19,20,24],"a",{"href":21,"rel":22},"https://ogp.me/",[23],"nofollow","open graph"," social image, also known as an OG image, to a blog post.\nBy adding the optional ogImage property to the frontmatter of a post, you opt out of ",[19,27,30],{"href":28,"rel":29},"https://github.com/vercel/satori",[23],"satori"," automatically generating an image for this page.",[15,33,34,35,39,40,51],{},"If you open this markdown file ",[36,37,38],"code",{},"src/content/post/social-image.md"," you'll see the ogImage property set to an image which lives in the public folder",[41,42,43],"sup",{},[19,44,50],{"href":45,"ariaDescribedBy":46,"dataFootnoteRef":48,"id":49},"#user-content-fn-1",[47],"footnote-label","","user-content-fnref-1","1",".",[53,54,58],"pre",{"className":55,"code":56,"language":57,"meta":48,"style":48},"language-yaml shiki shiki-themes github-light github-dark","ogImage: \"/social-card.png\"\n","yaml",[36,59,60],{"__ignoreMap":48},[61,62,65,69,73],"span",{"class":63,"line":64},"line",1,[61,66,68],{"class":67},"s9eBZ","ogImage",[61,70,72],{"class":71},"sVt8B",": ",[61,74,76],{"class":75},"sZZnC","\"/social-card.png\"\n",[15,78,79,80,51],{},"You can view the one set for this template page ",[19,81,84],{"href":82,"rel":83},"https://ruiposse.com/social-card.png",[23],"here",[86,87,90,95],"section",{"className":88,"dataFootnotes":48},[89],"footnotes",[10,91,94],{"className":92,"id":47},[93],"sr-only","Footnotes",[96,97,98],"ol",{},[99,100,102,103],"li",{"id":101},"user-content-fn-1","The image itself can be located anywhere you like. ",[19,104,109],{"href":105,"ariaLabel":106,"className":107,"dataFootnoteBackref":48},"#user-content-fnref-1","Back to reference 1",[108],"data-footnote-backref","↩",[111,112,113],"style",{},"html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}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":48,"searchDepth":115,"depth":115,"links":116},2,[117,118],{"id":12,"depth":115,"text":13},{"id":47,"depth":115,"text":94},null,"An example post for Nuxt Cactus, detailing how to add a custom social image card in the frontmatter",false,"md",{},true,"/social-card.png","/posts/social-image","27 January 2023",{"title":5,"description":120},"posts/social-image",[131,132,133],"example","blog","image","7Dq_4GcgEGdx4viHqLBdgIlrq6fa8QoKx_OImWaSDaw",1773521241319]