Open Graph meta tags

Open Graph is a protocol that adds relevant metadata to your website links when sharing on social media. For example, when sharing a link on Facebook, the image that's added to the post is read from that page's OG tags.

All standard templates already have a component that sets up the most common meta tags. 
If you're starting from scratch, however, here's an example of how you might implement them yourself:

{% if site.data.fb_admin %}<meta property="fb:admins" content="{{ site.data.fb_admin }}">{% endif %}
<meta property="og:type" content="{% if article %}article{% else %}website{% endif %}">
<meta property="og:url" content="{{ site.url }}{% if article %}{{ article.url | remove_first:'/' }}{% else %}{{ page.url | remove_first:'/' }}{% endif %}">
<meta property="og:title" content="{{ page_title | escape }}">
<meta property="og:site_name" content="{{ page.site_title | escape }}">

{% comment %}Open Graph image{% endcomment %}
{% if article %}
  {% if article.image? %}
    {% assign og_image = article.image.for-width-1200 %}
  {% endif %}
{% elsif page.image? %}
  {% assign og_image = page.image.for-width-1200 %}
{% endif %}

{% if og_image %}
  {% if og_image.url %}<meta property="og:image" content="{{ og_image.url }}">{% endif %}
  {% if og_image.content_type %}<meta property="og:image:type" content="{{ og_image.content_type }}">{% endif %}
  {% if og_image.width %}<meta property="og:image:width" content="{{ og_image.width }}">{% endif %}
  {% if og_image.height %}<meta property="og:image:height" content="{{ og_image.height }}">{% endif %}
{% endif %}

{% comment %}Open Graph description{% endcomment %}
{% if article %}
  {% assign description = article.description %}
{% else %}
  {% assign description = page.description %}
{% endif %}

{% if description != nil and description != '' %}
  <meta property="og:description" content="{{ description | escape }}">
  <meta name="description" content="{{ description | escape }}">
{% endif %}

The image and description of an article or page is changed from the page settings view. 

• Read more about the page.image attribute.
  
• Read more about the Open Graph protocol here.
  
• Use the Facebook Debugger for testing the tags.