Skip to content
Tanner
Preserve
All guides
Tracking

Fix the blank gray box when your site gets shared

7 min readUpdated July 1, 2026
01

Why your link shows up blank

When someone texts your website link or posts it on Facebook, the app tries to build a preview card: a picture, a title, and a line of text. It builds that card from a few lines of code in your page called Open Graph tags. If your site does not have them, the app has nothing to work with, so you get the blank gray box, or worse, a random image the app grabbed on its own, like your cookie banner or a stock photo from your theme.

Every app reads the same tags. Facebook invented them, but iMessage, WhatsApp, LinkedIn, Slack, Nextdoor, and X all use them too. Fix it once and the preview looks right everywhere.

This matters because referrals travel by text. A happy customer sends their neighbor "here's the company that did our roof" plus your link. A card with your truck and your name on it looks like a real company. A gray box looks like a dead site.

02

Check what your links look like right now

The fastest check is opengraph.xyz. Paste your homepage address and it shows you the preview card for Facebook, LinkedIn, X, and Discord side by side. Free, no account needed.

Facebook has its own checker at developers.facebook.com/tools/debug, called the Sharing Debugger. It needs a Facebook login, but it shows exactly what Facebook has stored for your link plus warnings about what is missing. LinkedIn has the same thing at linkedin.com/post-inspector.

Check your homepage first, then your two or three biggest service pages. You will see one of three results:

  • Nothing: gray box, no image, maybe just the bare web address
  • The wrong image: a theme stock photo, your logo stretched weird, or a screenshot of a popup
  • Title and text but no image, which is the most common case on older sites
03

The four tags that control the preview

Four Open Graph tags build the card, plus one bonus tag for X. If you use a site builder you will never type these by hand, the builder writes them when you fill in a form (that part is two sections down). If you or your web person edit the site code directly, this is the exact block to paste inside the <head> section of the page:

  • <meta property="og:title" content="Furnace and AC repair in Delafield, WI | Miller Heating" />
  • <meta property="og:description" content="Family-run HVAC serving Waukesha County. Upfront pricing and we answer weekends." />
  • <meta property="og:image" content="https://yoursite.com/images/share-card.jpg" />
  • <meta property="og:url" content="https://yoursite.com/" />
  • <meta name="twitter:card" content="summary_large_image" />
Field note

The image address must be the full https:// version and publicly reachable. A file sitting on your computer or behind a login will not work. Upload it to your site first, then use that address.

04

Make a share image that looks right

The size to use is 1200 by 630 pixels. That is the size Facebook recommends, and every other app displays it fine. Facebook caps the file at 8 MB, but keep yours under 1 MB so previews load fast on a phone.

Canva does this for free. Go to canva.com, click Create a design > Custom size, and enter 1200 by 630. Upload a real photo, your crew, your truck, or a finished job, then put your business name and town on it in big text. A real photo beats a logo on a colored background because it looks like a business that does actual work.

Skip the phone number and tagline in small print. In a text message the preview shrinks to a thumbnail and small text turns to mush. Keep it to your name, your town, and a few words about what you do, all large and away from the edges, since some apps crop toward the center.

Download it as a JPG, then upload it to your website's media or image library so it gets a permanent address on your own domain. That address is what goes in the image field.

05

Set it up in your site builder

Every major builder has fields for this. The image field is the one that kills the gray box. The title and description usually fall back to your SEO title and meta description if you already set those, so the image is often the only thing left to add.

  • WordPress: install the free Yoast SEO plugin if you have not (Plugins > Add New > search "Yoast SEO" > Install > Activate). Edit the page, open the Yoast SEO panel, and click the Social tab (newer versions call it Social media appearance). Upload your 1200 by 630 image there and set the title and description if you want them different from search.
  • Wix: in the editor go to Pages & Menu, click the three dots next to the page, choose SEO basics, then open the Social share tab. Upload the image and edit the title and description.
  • Squarespace: go to Pages, hover over the page, click the gear icon, and open the Social Image tab to upload a per-page image. For a site-wide fallback, add a social sharing image under Settings > Marketing > Social Sharing.
  • GoDaddy Websites + Marketing: there is no per-page social image field on most plans. GoDaddy builds the preview from your site name, your description under Settings > Search Engine Optimization, and your site's main image, so make those three good and test the result.
Field note

Do the homepage first. That is the link people text and post. Then give each big service page its own image if you have the photos, or reuse the homepage image everywhere, which is still a huge step up from gray.

06

Make the apps show the new preview

The apps save a copy of your old preview and keep showing it, sometimes for weeks. Publishing the fix is not enough, you have to tell them to look again.

For Facebook, go back to the Sharing Debugger at developers.facebook.com/tools/debug, paste your link, and click Scrape Again. If the old image still shows, click it a second time, that is a known quirk. For LinkedIn, paste the link into linkedin.com/post-inspector and it fetches a fresh copy on the spot.

iMessage and WhatsApp store the preview on each person's phone and have no refresh button. Links sent in new conversations pull the new card. Old message threads may keep showing the old preview for a while, and there is nothing to do about that except wait.

Final test: text yourself the link, and post it on Facebook with the audience set to Only me. If both show your image, your title, and your description, you are done.

Common questions

Questions that come up

I fixed everything but texting the link still shows the old preview. Why?

Your phone saved the old card. iMessage and WhatsApp keep a copy per conversation, so an existing thread can show the stale preview even after the fix is live. Send the link to a different contact or in a brand new thread and you should see the new card. Verify the fix itself with opengraph.xyz, since that always fetches fresh.

Do I need a different image for every page?

No. One good homepage image used site-wide beats a gray box on every page. If you have decent job photos, give your top two or three service pages their own image so a shared link about roofing shows a roof, but that is polish, not the fix.

Can I just use my logo as the share image?

You can, and it beats nothing, but logos are usually the wrong shape for a 1200 by 630 card and end up small on a big empty background. A photo of your crew or a finished job with your name over it reads as a working company. Drop the logo in a corner of that photo if you want both.

Does any of this help my Google ranking?

No. Open Graph tags are not a ranking factor. What they change is whether people click when your link gets shared, and for a local service business, texted referral links are some of the highest-intent traffic you get. This fix is about not fumbling those.

Or skip the homework

Rather I just did this?

Fair. The audit shows where your site actually stands in about a minute, then you decide. No email required, no pressure, just the truth.