You published your site, pasted the link into LinkedIn or a message, and got a grey rectangle with the URL under it. The site is fine. What is missing is a small set of instructions in your HTML called Open Graph tags, which tell messaging apps and social networks what title, description and image to show. Adding four lines to your page's head section fixes it, and this guide covers what to put in them.
What a link preview is made of
When you paste a link, the app does not open your page the way a person would. It sends a robot to read the top of your HTML and look for specific tags. Whatever it finds there becomes the card. If the tags are missing, it falls back to whatever it can scrape — usually your page title, sometimes nothing at all.
The standard is called Open Graph. It originated at Facebook and is now read by LinkedIn, Slack, Discord, WhatsApp, iMessage and most of the rest.
An og:image is the picture your link shows when someone pastes it somewhere.
The four lines you are missing
Open your index.html, find the <head> section near the top, and paste these inside it — before the closing </head>.
<meta property="og:title" content="Your page title"> <meta property="og:description" content="One sentence about the page."> <meta property="og:image" content="https://yoursite.sofast.host/preview.png"> <meta property="og:url" content="https://yoursite.sofast.host/">
Two things trip people up here.
The image URL has to be absolute. preview.png will not work. /preview.png will not work either. It has to be the full address, starting with https://, because the robot reading your page is not browsing your site — it is fetching one URL in isolation.
The image file has to be uploaded with your site. Put preview.png in the same folder as index.html before you zip and upload.
If an AI tool built your page, ask it to add Open Graph tags and it will put them in the right place. That is faster than editing HTML by hand and less likely to break something.
Making the image itself
Size: 1200 × 630 pixels. This is the ratio nearly every platform crops to. Go smaller and it looks soft; use a different ratio and your edges get cut.
Keep text away from the edges. Different apps crop differently. Anything important should sit within the middle 80 percent.
Make it readable at thumbnail size. In a message thread this image is about 300 pixels wide. Your name at 24 point disappears. Fewer, larger words.
Use PNG or JPG, under about 300 KB. Some scrapers time out on heavy images and show nothing rather than waiting.
Why the old preview is stuck
You added the tags, uploaded, pasted the link — and got the same blank card.
Platforms cache previews aggressively, often for days. The card you are seeing was built before your fix existed. Most platforms offer a debugger that forces a refresh: LinkedIn has a Post Inspector, Facebook has a Sharing Debugger. Paste your URL there and the cache clears for that platform.
Slack and iMessage are harder to force. Adding ?v=2 to the end of the URL makes it look like a new address and pulls a fresh preview.
Common questions
The four answers below cover Twitter, missing images, per-page previews and whether any of this affects SEO.
Not usually. X reads Open Graph tags when its own are absent. Add <meta name="twitter:card" content="summary_large_image"> if you want the large format specifically — that single line is worth adding.
Check the image URL by pasting it directly into a browser. If it does not load on its own, it will not load for a scraper either. Nine times out of ten the file was not included in the upload, or the URL is missing the https:// prefix.
Yes. Open Graph tags are per-page. Each HTML file gets its own set in its own head section, which matters once your site is more than one page.
No. Open Graph tags are read by social platforms, not by Google's ranking systems. They affect how many people click a shared link, which is a real benefit, but it is not a ranking factor.