Search
Control how your links look when shared
Your page does not provide sharing information, so links pasted into chat apps and social media look bare or wrong.
Why it matters
When someone shares your link, the app asks your page for a title, a description, and an image. With no Open Graph tags, it picks whatever it can find, which is frequently a logo cropped badly or the first sentence of your footer. A proper preview is the difference between a link someone clicks and a link they scroll past.
How you would notice it
- Links shared in WhatsApp or Messenger show no image.
- The preview text is a random sentence from the page.
- The preview image is a logo stretched or cropped awkwardly.
What to do
We chose the sharing image and the way its address is built by measuring, then measuring again. Two notes from getting that wrong first.
Stage 1
- Choose an image to represent the page. Use 1200 by 630 pixels, which is the size most platforms expect.
Avoid putting small text in it: previews are often shown small, and text becomes unreadable.
- Upload that image somewhere on your site and note its full address.
- Add the Open Graph tags to the head section.
og:image must be a full address starting with https, not a relative path like /share/card.jpg.
The address your pipeline publishes
The address we first put on our sharing tag came from the raw image import, and it named a file the build never publishes: our pipeline appends its own suffix, so the file on disk has a different name. Every page would have pointed at a missing image, which on our site meant all 32 pages at once, and nothing on the page itself looked wrong. The fix was to resolve the address through the same image helper the pages use, so the tag always names the file the build actually emits. A check comparing the tag against the built output caught this on its first run, which is the only reason we found it before visitors did.
Source: Open Graph image emission audit on noblemarketglobal.com
Pick by measured size, not by habit
A preview image needs real dimensions behind it and a full address, and measurements settled our choice: the hero we wanted is 1920 by 1072 and our logos are 1024 by 1024, all comfortably above the minimum platforms use, and we picked the wide hero because it suits the card shape. Squares get cropped or letterboxed in many previews, so a wide image at a sensible size travels best. If the only image you have is a small logo, get a proper preview image made rather than shipping one that will be stretched.
Source: Social preview image dimension review on noblemarketglobal.com
<meta property="og:title" content="Emergency Plumbing in Fresno">
<meta property="og:description" content="Licensed, insured, and on site within the hour.">
<meta property="og:image" content="https://www.example.com/share/plumbing-card.jpg">
<meta property="og:url" content="https://www.example.com/services/">
<meta property="og:type" content="website">Stage 2
- Check the preview before you rely on it.
Paste your page address there and force a refresh. Platforms cache previews aggressively, sometimes for weeks.
https://developers.facebook.com/tools/debug/How to check it worked
Confirm it worked
Paste your page address into a chat app you use and send it to yourself. You should see your chosen image and text rather than a bare link. Re-run the Siege Test and confirm the Open Graph tags check turns green.