CODEWITHSUNDEEP
htmljekyllgithub-pages
Nazchanel
Nazchanel

Reputation: 33

How do I enable Link Preview Images for a Jekyll Website?

I am looking for a way to display an image when the link is posted on Twitter, Discord, etc.

There is a spot for the text but I am not aware of a place for an image.

I am expecting an image to display like this:

Twitter Preview #1

This is what I am getting:

Twitter Preview #2

The description text was changed in config.yml so is there a parameter for the image there also?

I am unaware of how to make the link preview image appear. Think it might be in the config.yml file.

Upvotes: 2

Views: 672

Answers (2)

viraj Chaudhary
viraj Chaudhary

Reputation: 126

can you please try to add <meta name="twitter:card" content="summary_large_image" /> and <meta name="twitter:card" content="app">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="twitter:card" content="summary_large_image" />
  <meta name="twitter:image" content="https://avatars.githubusercontent.com/u/86535168?v=4">
  ...
  
</head>

and

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
 <meta name="twitter:card" content="app">
  <meta name="twitter:image" content="https://avatars.githubusercontent.com/u/86535168?v=4">
  ...
  
</head>

this will resolve your problem, Twitter may take some time to redirect before posting on Twitter validate your link here 2-3 times

Upvotes: 0

Christian
Christian

Reputation: 5521

The description is the description from the head of your website.

<meta property="og:description" content="This is the website that hosts Eshan Iyer’s portfolio and resume as well as many projects that he has created.">

The image is not the favicon as I thought but another meta tag:

<meta name="twitter:image" content="http://graphics8.nytimes.com/images/2012/02/19/us/19whitney-span/19whitney-span-articleLarge.jpg">

See https://developer.twitter.com/en/docs/twitter-for-websites/cards/overview/summary-card-with-large-image

To show it, you need to modify/customize the head file for the minimal theme, either in head.html or in custom-head.html.

I'd try head.html first:

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="twitter:image" content="https://avatars.githubusercontent.com/u/86535168?v=4">
  ...
  
</head>

Upvotes: 1

Related Questions