How to fix your website's share previews and favicon
When someone shares your site in a message or a post, a few tags in the page decide whether it shows a picture, a title and your icon or just a bare link. Here's how to add them.
Short answer: when a link to your site turns up as a bare address, add Open Graph tags to the page's <head>: og:title, og:description, og:image (a 1200×630 picture) and og:url, plus twitter:card for X. Add a favicon with a <link rel="icon"> tag so your site has its own icon in browser tabs and Google results.
On WordPress an SEO plugin writes these tags for you; on Wix, Squarespace and Shopify they come from the social sharing image and SEO settings. It is a one-time job.
Facebook, LinkedIn, iMessage, WhatsApp, Slack and most other apps build their link previews from the same small set of tags. The checker reads your homepage's <head> for them and reports these four findings in its Search (SEO) tab. All four are minor on their own, but a preview is often the first thing someone sees of your business when a customer recommends you.
No social preview tags
Minor Shown in the checker's Search (SEO) tab as “No social preview”.
The checker flags the page when its head has no Open Graph tags at all, meaning no <meta property="og:…"> of any kind.
Why it matters
Open Graph is the standard, first published by Facebook, that apps use to turn a link into a card with a title, description and picture (The Open Graph protocol). Without it, apps guess, and often show just the address or whatever text they find first.
How to fix it
The protocol's four required properties are og:title, og:type, og:image and og:url; add og:description too. Image and page addresses must be complete, starting with https://.
<meta property="og:type" content="website">
<meta property="og:url" content="https://yourbusiness.com/">
<meta property="og:title" content="Smith Plumbing, 24-hour plumber in Albany, NY">
<meta property="og:description" content="Emergency repairs, water heaters and drain cleaning. Licensed and insured.">
<meta property="og:image" content="https://yourbusiness.com/img/share.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="A Smith Plumbing van outside a customer's house">
<meta name="twitter:card" content="summary_large_image">WordPress
Most SEO plugins add Open Graph and X tags automatically and have a social or sharing section where you set a default image and per-page titles. Use one plugin for this; two will write duplicate tags.
Wix, Squarespace and Shopify
The platform writes the tags from your page title, SEO description and a social sharing image. Look for the social image or social sharing settings in the site's SEO or preferences settings, and fill them in for the homepage at least.
Hand-built sites
Paste the block above into each page's head, with each page's own title, description and address. Your page title and description work well as a starting point; see title tags and meta descriptions.
How to check it's fixed
Paste your address into Facebook's Sharing Debugger or LinkedIn's Post Inspector (both need you to log in). They show the preview, the tags they found and any errors.
No share image
Minor Shown in the checker's Search (SEO) tab as “No share image”.
The page has Open Graph tags, but no og:image.
Why it matters
The picture is what makes a shared link stand out in a feed or a group chat. Without one, the card is text only, or an empty grey box beside posts that have photos.
How to fix it
- Make an image 1200×630 pixels. That is Facebook's recommended size for the best display; images under 600×315 show as a small thumbnail, the minimum is 200×200 and the file must be under 8 MB (Meta: images in link shares).
- Use a real photo of your work, team or premises with your logo, and keep key text away from the edges, since some apps crop the image.
- Save it as JPEG or PNG at a stable address and add it with
og:image, plusog:image:width,og:image:heightandog:image:alt.
How to check it's fixed
Facebook caches images by address and won't pick up a new picture at the same address; give the new image a new file name, then press Scrape Again in the Sharing Debugger. Other apps refresh on their own schedules, so an old preview can linger for a while.
No X (Twitter) card tag
Minor Shown in the checker's Search (SEO) tab as “No Twitter/X card tag”.
The page has Open Graph tags but no <meta name="twitter:card">. The checker only looks for this once Open Graph is present.
Why it matters
X decides the card's layout from twitter:card; without it, links can appear without a large image. X reads the title, description and image from your Open Graph tags when its own twitter: tags are missing, so you don't need to repeat them.
How to fix it
Add one line next to the Open Graph tags. summary_large_image gives the wide picture card; summary gives a small square thumbnail.
<meta name="twitter:card" content="summary_large_image">WordPress SEO plugins usually add it alongside Open Graph; check their social settings if it's missing. Note the attribute is name, not property.
How to check it's fixed
View the page source and search for twitter:card, or run the checker again.
No favicon
Minor Shown in the checker's Search (SEO) tab as “No favicon”.
The checker flags the page when its head has no <link> tag whose rel includes icon (icon, shortcut icon and apple-touch-icon all count). A favicon.ico file sitting on the server without a link tag is still flagged, because Google looks for the tag.
Why it matters
The favicon is the small icon in browser tabs, bookmarks and phone home screens, and Google shows it beside your site's name in search results. Without one, yours is the tab with a blank page icon, and Google shows a generic one.
How to fix it
Google's requirements (Google: favicons in Search):
- The tag must be on your homepage, and Google uses one favicon per domain or subdomain.
- The icon must be square, at least 8×8 pixels; Google recommends larger than 48×48.
- Google Search lists BMP, GIF, ICO, PNG, JPEG, PPM and TIFF as supported. SVG isn't on that list, so give Google a PNG even if you also use an SVG for browsers.
- Googlebot must be able to crawl the homepage and Googlebot-Image the icon file, and the icon's address should stay the same.
<link rel="icon" href="/favicon-96.png" sizes="96x96" type="image/png">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">WordPress
Use the built-in Site Icon setting (look for Site Icon or Site Identity in your dashboard; where it sits depends on your WordPress version and theme). Upload a square image of at least 512×512 and WordPress creates the sizes and tags.
Wix, Squarespace and Shopify
Each has a favicon or browser icon setting in the site or theme settings. Upload a simple, square version of your logo; detailed logos turn to mush at 16 pixels.
How to check it's fixed
Reload the site and look at the tab. Google takes time to show it: it has to recrawl your homepage, which can take days to weeks, and you can request it sooner with the URL Inspection tool in Search Console.
Sources
- The Open Graph protocol
- Meta for Developers: A guide to sharing for webmasters
- Meta for Developers: Images in link shares
- Google Search Central: Define a favicon to show in search results
- MDN: the rel attribute (icon)
Common questions
What size should an Open Graph image be?
1200×630 pixels, which Meta recommends for the best display on high-resolution screens. The minimum is 200×200, images under 600×315 show as a small thumbnail, and the file must be under 8 MB.
Why does Facebook still show my old preview image?
Facebook caches images by their address. Upload the new image under a new file name, update og:image, and press Scrape Again in the Sharing Debugger.
Do I need Twitter card tags if I have Open Graph?
You need only twitter:card, which sets the card layout. X takes the title, description and image from your Open Graph tags when its own tags are missing.
Why isn't my favicon showing in Google?
Google needs a link rel="icon" tag on your homepage, a square icon larger than 48×48 in a supported format such as PNG or ICO, and crawl access to both. It then has to recrawl the homepage, which can take days to weeks.
Do Open Graph tags help SEO?
Their job is how your link looks when people share it in apps and on social networks, which affects whether anyone clicks. For how you appear in Google results, the title tag and meta description matter more.
See what your links look like. The website checker reads your homepage's share tags and favicon along with its titles, structured data and sitemap. If you'd like the tags and a share image set up for you, get in touch.