Implementing Better Open Graph Article Information

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 …


This content originally appeared on foobartel.com :: Stream and was authored by foobartel.com :: Stream

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.


This content originally appeared on foobartel.com :: Stream and was authored by foobartel.com :: Stream


Print Share Comment Cite Upload Translate Updates
APA

foobartel.com :: Stream | Sciencx (2019-07-28T22:00:00+00:00) Implementing Better Open Graph Article Information. Retrieved from https://www.scien.cx/2019/07/28/implementing-better-open-graph-article-information/

MLA
" » Implementing Better Open Graph Article Information." foobartel.com :: Stream | Sciencx - Sunday July 28, 2019, https://www.scien.cx/2019/07/28/implementing-better-open-graph-article-information/
HARVARD
foobartel.com :: Stream | Sciencx Sunday July 28, 2019 » Implementing Better Open Graph Article Information., viewed ,<https://www.scien.cx/2019/07/28/implementing-better-open-graph-article-information/>
VANCOUVER
foobartel.com :: Stream | Sciencx - » Implementing Better Open Graph Article Information. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2019/07/28/implementing-better-open-graph-article-information/
CHICAGO
" » Implementing Better Open Graph Article Information." foobartel.com :: Stream | Sciencx - Accessed . https://www.scien.cx/2019/07/28/implementing-better-open-graph-article-information/
IEEE
" » Implementing Better Open Graph Article Information." foobartel.com :: Stream | Sciencx [Online]. Available: https://www.scien.cx/2019/07/28/implementing-better-open-graph-article-information/. [Accessed: ]
rf:citation
» Implementing Better Open Graph Article Information | foobartel.com :: Stream | Sciencx | https://www.scien.cx/2019/07/28/implementing-better-open-graph-article-information/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.