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

**URL:** <https://talk.jekyllrb.com/t/is-there-a-way-to-select-the-image-that-shows-up-in-facebook/8049>\
**Category:** Help\
**Created:** [February 25, 2023, 1:33am UTC](https://talk.jekyllrb.com/t/is-there-a-way-to-select-the-image-that-shows-up-in-facebook/8049 "2023-02-25T01:33:08Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![raffertyuy](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/raffertyuy/32/5119_2.png) [@raffertyuy](https://talk.jekyllrb.com/u/raffertyuy)\
**Post date:** [February 25, 2023, 1:33am UTC](https://talk.jekyllrb.com/t/is-there-a-way-to-select-the-image-that-shows-up-in-facebook/8049/1 "2023-02-25T01:33:08Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![jhvanderschee](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/jhvanderschee/32/583_2.png) [@jhvanderschee](https://talk.jekyllrb.com/u/jhvanderschee)\
**Post date:** [February 25, 2023, 11:46am UTC](https://talk.jekyllrb.com/t/is-there-a-way-to-select-the-image-that-shows-up-in-facebook/8049/2 "2023-02-25T11:46:42Z")

</div>

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](https://stackoverflow.com/a/10672026/2397550)

---

<div class="post-metadata">

**Author:** ![raffertyuy](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/raffertyuy/32/5119_2.png) [@raffertyuy](https://talk.jekyllrb.com/u/raffertyuy)\
**Post date:** [February 25, 2023, 2:46pm UTC](https://talk.jekyllrb.com/t/is-there-a-way-to-select-the-image-that-shows-up-in-facebook/8049/3 "2023-02-25T14:46:30Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![jhvanderschee](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/jhvanderschee/32/583_2.png) [@jhvanderschee](https://talk.jekyllrb.com/u/jhvanderschee)\
**Post date:** [February 25, 2023, 3:59pm UTC](https://talk.jekyllrb.com/t/is-there-a-way-to-select-the-image-that-shows-up-in-facebook/8049/4 "2023-02-25T15:59:06Z")

</div>

Like this:

```auto
 <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 %}"/>
  

```

---

<div class="post-metadata">

**Author:** ![raffertyuy](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/raffertyuy/32/5119_2.png) [@raffertyuy](https://talk.jekyllrb.com/u/raffertyuy)\
**Post date:** [February 26, 2023, 2:11am UTC](https://talk.jekyllrb.com/t/is-there-a-way-to-select-the-image-that-shows-up-in-facebook/8049/5 "2023-02-26T02:11:42Z")

</div>

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?

```markdown
---
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)

```markdown
---
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 %}"/>

```

---

<div class="post-metadata">

**Author:** ![jhvanderschee](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/jhvanderschee/32/583_2.png) [@jhvanderschee](https://talk.jekyllrb.com/u/jhvanderschee)\
**Post date:** [February 26, 2023, 4:25pm UTC](https://talk.jekyllrb.com/t/is-there-a-way-to-select-the-image-that-shows-up-in-facebook/8049/6 "2023-02-26T16:25:47Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![jhvanderschee](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/jhvanderschee/32/583_2.png) [@jhvanderschee](https://talk.jekyllrb.com/u/jhvanderschee)\
**Post date:** [February 27, 2023, 12:07am UTC](https://talk.jekyllrb.com/t/is-there-a-way-to-select-the-image-that-shows-up-in-facebook/8049/7 "2023-02-27T00:07:00Z")

</div>

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

> <https://github.com/cotes2020/jekyll-theme-chirpy/blob/master/_includes/head.html>

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

---

<div class="post-metadata">

**Author:** ![raffertyuy](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/raffertyuy/32/5119_2.png) [@raffertyuy](https://talk.jekyllrb.com/u/raffertyuy)\
**Post date:** [February 27, 2023, 2:00pm UTC](https://talk.jekyllrb.com/t/is-there-a-way-to-select-the-image-that-shows-up-in-facebook/8049/8 "2023-02-27T14:00:18Z")

</div>

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!)