Add Open Graph metadata to blog post to improve social share

[lumie31]

What does this PR do?

• Add Open Graph metadata to blog post to improve social share

  Description of Task to be completed?

• In order to show correct snippet in social shares we want to use Open Graph metatags in Post show:

  <meta property="og:title" content="Post title" />
  <meta property="og:description" content="The first characters of Post" />
  <meta property="og:image" content="URL of first image in Post" />

  Any background context you want to provide?

• Most content is shared to Facebook as a URL, so it's important that you mark up your website with Open Graph tags to take control over how your content appears on Facebook

@sseerrggii This PR aims to fix #15, I have doubts with the values in the content attribute which is partially because I couldn't test this out because of the limitation of my pc and also I felt the content are supposed to be dynamic/changing with different post as opposed to them being static. Please review and give feedback

[sseerrggii]

Hi @lumie31 It works! but we should to define cover-photo and description in metadata at top of the post markdown document.

I would request one improvement. If title, description or cover-foto is empty is better don't show this metatag line. For instance if { page.description }} is empty we don't want to show the line:

<meta property="og:description" content="{{ page.description }}" />

[lumie31]

@sseerrggii Can I get more clarity into what you want to be done? I don't seem to totally understand what you said above

[sauloperez]

What we want is to conditionally populate each of these meta properties depending on the post's metadata listed in the frontmatter. So if a particular blog post doesn't have description specified we shouldn't render that meta tag (see an example in https://github.com/coopdevs/coopdevs.github.io/pull/61). This way we won't show empty fields when the open graph is rendered.

You should be able to do that using Liquid, the templating language Jekyll uses.

Lastly, I recommend you extract this change into its own HTML in _includes/ as we did with other components of the site to keep things isolated.

[lumie31]

Hello, I made some changes based on the above suggestions. Kindly review and let me know if anything else needs to be done. Cheers!!!

[sseerrggii]

Works fine for me! :+1:

Tanks @lumie31