Your website link shouldn’t look boring when you send it. In this guide, you’ll learn how to update your page title, create the right preview image, and add Open Graph tags so your link looks clean in iMessage, Twitter/X, and more.

On most platforms this can be done in their dashboard but in a basic HTML site, it looks like this:

<head>
<title>Your Website</title>
</head>


This is where all preview customization happens.

Find the <head> of Your Website

 tag which controls, the browser tab text, Google search result title and part of your social preview

<title> How to Fix Your Website Link Preview | OADev </title>

Set Your Page Title

The most important part of all of this is the image and our preview image should:

This image is usually seen when sending a link in text messages, Instagram DMs, Facebook posts and Whatsapp messages

Keep it simple and high contrast and export it as a JPG or PNG.

Then we can upload the image to our website.

Create a Proper Open Graph Image

Now we add Open Graph tags inside of the 

 which will allow use to add the image we just made and all of text that comes with it.

 and change all of the content to match your site. Also make sure to find the link of your image in your website and paste it in for “og:image”.

}" />
<meta property="og:description" content="{

}" />
<meta property="og:image" content="{LINK_

}" />
<meta property="og:type" content="website" />
<meta property="og:url" content="{

If you want to know me, here is what each tag does:

Add Open Graph Meta Tags

After updating your meta tags, you need to test. 

 to see how all of your preview links look on all platforms

How to Fix Your Website Link Preview

Step-by-Step Guide

Pages

How to Fix Your Website Link Preview

Step-by-Step Guide

Step 1: Find the <head> of Your Website

Step 2: Set Your Page Title

Step 3: Create a Proper Open Graph Image

Step 4: Add Open Graph Meta Tags

Step 5: Test Your Link Preview