Open dabukalam opened 2 years ago
I believe we should have support to override most of this baked in already.
meta
object with a description
key can be added to any page's frontmatter, which will override the default description (source)title
frontmatter value. That feels right to meimage
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?
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 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 %}"/>
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
.
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: