Implementing Better Open Graph Article Information Bookmark

published on

Since I will to share more content again, I wanted to improve the Open Graph tags on my site, so when shared, the page would present correct and well-formed information. After testing with LinkedIn's post inspector, I noticed mostly text I didn’t like so much anymore, but also that the author information was missing. I wasn’t sure I really wanted to add it, but after looking into it, I decided to give it a go. Why not?

The improved meta tags should be included with all article pages at /articles, /notes and /tilrs.

Before, the whole site set og:type=website, to which I have now added a conditional statement to set og:type=article for respective pages.

From now on these article pages also provide additional information about the author, as well as the date and time for published and last modified. The properties look like this:

  • article:author
  • article:published_time
  • article:modified_time

⚠️ At first I was unsure if article:author was supposed to be part of og: and hence be written like og:article:author, which would have somehow made sense. It’s not, so the syntax for article: does not include the og: prefix.

The complete (Kirby-specific) code block for the article page open graph implementation looks like the below.

<?php if ( $page->intendedTemplate() == 'article' || $page->intendedTemplate() == 'note' || $page->intendedTemplate() == 'til' ): ?>
    <meta property="og:type" content="article" />
<?php if( $page->author()->isNotEmpty() ): ?>
    <meta property="article:author" content="<?php echo $page->author() ?>" />
<?php endif ?>
    <meta property="article:published_time" content="<?php echo $page->publishTimestamp()->toDate('c') ?>" />
    <meta property="article:modified_time" content="<?php echo $page->lastUpdateTimestamp()->toDate('c') ?>" />
<?php else: ?>
    <meta property="og:type" content="website" />
<?php endif ?>

The complete spec for Open Graph’s is available and besides article, there are a few more items that might be interesting, depending on the type of content that you share.

Now that Open Graph is fully integrated, go ahead and share all the things!
Thanks for reading and please reach out with any feedback or questions you might have.

Back to Notes