OpenGraph Images

[davidvkimball]

Is there a straightforward way to add a global OpenGraph image that will work for any site page or post, but then update that OpenGraph image on a per-page permalink basis if another image is specified? I'm thinking, for example, using image as defined by the post's schema, or maybe another way for static/special pages.

I noticed OpenGraph titles, descriptions, URLs, and authors are specified in this template already, just not images.

[saicaca]

There's already a PR for OG #80, but I will need some additional time to refine the image design.

[davidvkimball]

That is extremely helpful, thank you. I have gone ahead and implemented my own version for it - I am just having difficulty being able to specify a custom open graph image on a per-post and per-page basis. Is there a quick explanation for that? I tried adding ogImage to the post schema but it seems to ignore it, and I'm not sure what to do for pages in spec.

[saicaca]

You might need to add a parameter to both Layout and MainGridLayout to pass the image path to Layout.

I’m not sure what you mean by adding ogImage to the post schema. Do you mean that you added a parameter to the FrontMatter but are unable to read it?

[davidvkimball]

Yes, that's exactly what I'm saying.

Example post:

title: Download Windows 11 Folder Icons
published: 2024-06-24
description: Folder icons for Windows 11 in .ico format.
image: ./cover.png
altText: Assortment of Windows 11 folder icons in File Explorer.
ogImage: ./cover.png
category: Tech
draft: false

Here I want it to read ogImage and use it as the og:image instead of the automatically generated one, and I also want it to skip the auto generation process for specifically that blog post if it detects an ogImage property set.

I have implemented nearly all of #80 with some slight tweaks.

Attached is my WIP blog structure if it helps:
static-blog.zip

Hopefully what I'm saying makes sense! I'm a little out of my element here, so my apologies if I'm overlooking something silly. 😅

[davidvkimball]

If it's helpful, I also have the live version of my site available for viewing here: https://davidvkimball.com