getnikola/nikola

OpenGraph Data in Base Template

Opened this issue · 3 comments

Requested Feature: (short description)

OpenGraph Metadata for the primary/main index page.

Related Area: (eg. tasks, compilers, configuration, templates…)

N/A

Do you want to contribute this yourself as a pull request? (don’t worry about it if you don’t want to/can’t — someone else can take care of it)

  • Yes, I have already written code for it (link if available and feasible)
  • Yes, I don’t have code ready yet (that’s okay!)
  • No (that’s okay too!)

Does this feature affect backwards compatibility? If yes, in what way?

Not as far as I know.

Rationale and full description: (why should it be added to Nikola?)

It's fairly common to link to the index page rather than to individual posts, hence it makes sense to generate OpenGraph meta-data for that page as well. I'm not sure exactly how difficult it is to propagate this to all themes, but at least for the Bootstrap theme that I am using, it was straightforward to extend to base_template.tmpl with:

    <!-- ${pagekind} -->
    %if 'index' in pagekind or 'main_index' in pagekind:
      <meta property="og:site_name" content="${blog_author}">
      <meta property="og:title" content="${blog_title|h}">
      <meta property="og:url" content="${abs_link(permalink)}">
      <meta property="og:description" content="${description|h}">
      <meta property="og:image" content="${abs_link('/assets/images/phoenix_logo.png')}">
      <meta property="og:type" content="article">
    %endif

Naturally, the asset image link would need to be changed somehow, perhaps by using the DEFAULT_PREVIEW_IMAGE, but other than that, the above should be pretty much usable as-is in any HTML template.

If it were added, it should probably be added to index.tmpl.

I’m not sure how useful it is — is the link display significantly improved in that case?

I would say so at least. As I understand it, the default is to use the default favicon as the preview image if no other image is found, which for my blog was a 32x32 PNG that is then upscaled to 512x512, which naturally, doesn't look great.

This was a few months ago though, give me a little bit and I'll see if I can create a screenshot of with/without these lines. Could be a bit difficult due to caching though

Screenshots from https://linkpreview.xyz/ :

With OpenGraph snippet:

opengraph-enabled

Without OpenGraph snippet:

opengraph-disabled