Is there a way to select the image that shows up in facebook?

Help
1

Facebook will usually choose the first image in the page of my jekyll site. Is there a way to choose which image is shown as the thumbnail? Using the md frontmatter perhaps?

2

To do so, you need to set the OG Image: facebook - How do I set og:image so it takes image from page? - Stack Overflow

3

Hey, Thanks for responding to both my queries. I did see this stackoverflow post but the recommendation is in html. How do I set it in a markdown based jekyll page?

4

Like this:

 <meta property="og:title" content="{{ page.title }}"/>
  {% if page.image %}<meta property="og:image" content="{{ page.image }}"/>{% endif %}
  <meta property="og:url" content="{{ site.url }}{{ page.url }}"/>
  <meta property="og:type" content="article">
  <meta property="og:image" content="{{ site.url }}{{ page.image }}"/>
  <meta property="og:site_name" content="{{ site.title }}"/>
  <meta property="og:description" content="{% if pagecontent_description.size > 10 %}{{ pagecontent_description }}{% else %}{{ site.description }}{% endif %}"/>
5

Thank you! Just tried and it was quite easy. Just to understand in more detail:

  1. This works, but the page.image will also show at the very top of my page (so the image is shown 2x, on-top and somewhere in the middle of my content). Is there a way to make it not show on top?
---
title: 'My title'
description: My description
image: /assets/img/posts/pageimage.png
---
<meta property="og:title" content="{{ page.title }}"/>
{% if page.image %}<meta property="og:image" content="{{ page.image }}"/>{% endif %}
<meta property="og:url" content="{{ site.url }}{{ page.url }}"/>
<meta property="og:type" content="article">
<meta property="og:image" content="{{ site.url }}{{ page.image }}"/>
<meta property="og:site_name" content="{{ site.title }}"/>
<meta property="og:description" content="{% if pagecontent_description.size > 10 %}{{ pagecontent_description }}{% else %}{{ site.description }}{% endif %}"/>

# header
some text..

![](/assets/img/posts/diff-image.png)
![](/assets/img/posts/pageimage.png)
![](/assets/img/posts/diff-image-2.png)
  1. I tried doing the following, but for some reason didn’t work - should it? (I’m guessing it’s either that or the social media cached the old top image)
---
title: 'My title'
description: My description
---
<meta property="og:title" content="{{ page.title }}"/>
<meta property="og:url" content="{{ site.url }}{{ page.url }}"/>
<meta property="og:type" content="article">

<!-- DIRECT IMAGE URL HERE -->
<meta property="og:image" content="/assets/img/posts/pageimage.png"/>

<meta property="og:site_name" content="{{ site.title }}"/>
<meta property="og:description" content="{% if pagecontent_description.size > 10 %}{{ pagecontent_description }}{% else %}{{ site.description }}{% endif %}"/>
6

The code should be on the head of the HTML, not in the content/the markdown.

7

To be more precise, you have to add it to this file after line 5:

However, that is only possible if you duplicate and thus override this file in your own _includes folder.

8

Okay! Thanks for this, really made a mistake there! (also didn’t know that this is how you override files, so thanks for the prescriptive help!)