Have you ever shared or received a link to a website, and it has a horrible preview image?
I recently shared a link to my website in a Facebook message. The preview looked AWFUL. It was a zoomed in section of my logo which looked hideous.
I figured, there must be a way to have a cool image in the link preview.
Turns out, there is! With some clever use of metatags, you can have a pretty preview picture whenever you share a website link.
Here's how do it.
What happens when you don't have an image
Firstly, let's talk about the background for how preview images work. If you want to skip straight to the tutorial, scroll down to Step 1.
When you share a link to a website, if you don't have metatags setup in your code, the web will simply share your first image by default. For many websites, a logo is the first image that appears in the *.html file. This is usually because logos are shown in the header.
When you share a link to your website, it'll take this logo and crop it down to the platform specs. To get past this this, we need to add metadata and a link to a better image. Let's check it out how to do that.
Step 1. Create an image
Okay, you can do this step later, but I like to create the image first. You'll want to have an image that is 1200x630px. This optimises for Facebook, Twitter, and LinkedIn.
Create an image that showcases your website. Images will mostly be shared as thumbnails, so ensure they aren't too busy. Here's the one I created for my MishManners.com website:
Now that you have your image, time to upload it.
Step 2. Upload your image
To ensure your image appears when you share a link, you'll need to host your image in a publicly available space.
If you are using GitHub Pages to host your website like I am, you'll still this image in a publicly available link.
For me, my code is hosted on a private repo, but the website is public. If I upload the image to the private repo, the image won't be shared in the public realm.
There are two ways to host a public image. First, you can upload the image and host it on your website in a separate page. ie. my image could be hosted at https://mishmanners.info/webpreview.png.
Another way to host the image is to have it on a public repo. I have a repo just for hosting images that I want made available to everyone. My image is currently stored at https://github.com/mishmanners/PubImages/blob/main/WebsiteImages/MishMannersInfo2.png.
Whichever method you decide to go with, ensure you copy the path to the image. You'll need it for this next part!
Step 3. Add metatags to your website
By default, if you share a link without any metadata, only your title will be shown and the address of your website. Instead, what you want is a cool image, followed by a short description. This is what I have for my MishManners.info website:
To supply this information, add metatags to your *.html file. Add the following snippet of code to your <head> tag:
<!-- Primary Meta Tags --> <!-- this is the default metadata which all websites can draw on -->
<title>YOUR_WEBSITE</title>
<meta name="title" content="YOUR_HEADING">
<meta name="description" content="YOUR_SUMMARY">
<!-- Open Graph / Facebook --> <!-- this is what Facebook and other social websites will draw on -->
<meta property="og:type" content="website">
<meta property="og:url" content="YOUR_URL">
<meta property="og:title" content="YOUR_HEADING">
<meta property="og:description" content="YOUR_SUMMARY">
<meta property="og:image" content="YOUR_IMAGE_URL">
<!-- Twitter --> <!-- You can have different summary for Twitter! -->
<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:url" content="YOUR_URL">
<meta property="twitter:title" content="YOUR_HEADING">
<meta property="twitter:description" content="YOUR_SUMMARY">
<meta property="twitter:image" content="YOUR_IMAGE_URL">
Don't forget to add your own information here. It's also important that you add ?raw=true to the end of your website image path. For example: https://github.com/mishmanners/PubImages/blob/main/WebsiteImages/MishMannersInfo2.png?raw=true. This will ensure your image is correctly displayed.
Step 4. Test your link
Finally, you'll want to test your website to ensure you added the correct information. Metatags is a great way to see a preview of your link. It can also help you tweak and troubleshoot any issues you're having with your metadata.
That's it! Now you should see a pretty preview of your website whenever you share your link. Here's what the DEV one looks like:
If you want to see how to use metatags, or enjoy some fun coding banter, watch my livestream where we add metadata to two of my websites. Feel free to join any of my live streams and suggest topics in the comments below.
Looking forward to bringing you more coding content ❤️
Top comments (1)
This resource is really useful as a reminder of how to add Open Graph and Twitter metatags to a site. Thank you!
Metatags.io is also a great tool to test how the data renders in each platform. If you're using
localhostyou will require some sort of tunnel connection like Ngrok or Exposé for this to work.