Consider adding opengraph support to markdown frontmatter

[dabukalam]

It would be useful to be able to specify an opengraph title (and maybe even image link) to markdown frontmatter, to provide control over the title. Right now everything seems to pull from https://github.com/ceph/ceph.io/blob/main/src/src.json#L6:

[adamduncan]

I believe we should have support to override most of this baked in already.

• A meta object with a description key can be added to any page's frontmatter, which will override the default description (source)
• Page title will always come from the respective page's title frontmatter value. That feels right to me
• The default social share image can be overriden with an image property in frontmatter (source). Some types of content already do this, e.g. blog posts with images specified (example)

@Pete-Robelou, can you please confirm? Perhaps something to document in the README?

[Pete-Robelou]

I believe we should have support to override most of this baked in already.

* A `meta` object with a `description` key can be added to any page's frontmatter, which will override the default description ([source](https://github.com/ceph/ceph.io/blob/main/src/_includes/layouts/_base.njk#L18))

* Page title will always come from the respective page's `title` frontmatter value. That feels right to me

* The default social share image can be overriden with an `image` property in frontmatter ([source](https://github.com/ceph/ceph.io/blob/main/src/_includes/layouts/_base.njk#L88)). Some types of content already do this, e.g. blog posts with images specified ([example](https://developers.facebook.com/tools/debug/?q=https%3A%2F%2Fceph.io%2Fen%2Fnews%2Fblog%2F2021%2Fvisual-regression-testing-ceph-dashboard%2F))

@Pete-Robelou, can you please confirm? Perhaps something to document in the README?

@adamduncan I can confirm you are correct, all these values can be overriden with frontmatter as you have stated.

We have multiple README files through out the site to specifically address blog posts, case studies etc... as they all have different content requirements; however, as meta description is applicable to all pages it's probably best this lives in the root README. The image frontmatter does work in a specific way for blog posts, case studies etc... as the image is used on the actual page itself as a hero and on the cards on listing pages, this functionality won't be applicable to all pages. It is true that declaring image: "images/image.jpg" in the frontmatter will override the default social share image for any page though.

[Thingee]

Am I missing something to get image preview to work on Twitter? For example this post:

Source
Page

[adamduncan]

@Thingee Looks like you've done the right thing here by ensuring there's a relative image property in the post's frontmatter. This then gets pulled into the _base template's og:image and twitter:image meta tags to enable this image preview.

@Pete-Robelou The issue here might be relative URLs. The image being relative to the blog post for purposes of the hero image is sound, but I believe we want the meta tag image URLs to be absolute. Do we want to be preprending the current page's URL to image if it exists, and site.url to the fallback if not? E.g. In this ballpark?

<meta property="og:image" content="{% if image %}{{ site.url }}{{ page.url }}{{ image }}{% else %}{{ site.url }}/assets/favicons/logo-meta-share.png{% endif %}"/>
...
<meta property="twitter:image" content="{% if image %}{{ site.url }}{{ page.url }}{{ image }}{% else %}{{ site.url }}/assets/favicons/logo-meta-share.png{% endif %}"/>

[Pete-Robelou]

Do we want to be preprending the current page's URL to image if it exists, and site.url to the fallback if not?

@adamduncan Yeah, you're right. If we make the meta tag image URLs absolute that should resolve the issue.

Your code snippet should work and just needs to replace the relevant lines in /src/_includes/layouts/_base.njk.