You've done it.
You're finally done building the website or application you've been working on for quite a while.
Proud and elated, you go to share this on your socials or to your buddies — uh oh, what's this now?
The preview in WhatsApp shows no headline, your avatar is cropped and dimensions seem wrong.
I've been there too.
The site looked fine in the browser.
The problem was everything outside the browser: link previews, search snippets, and tab icons all use a separate metadata layer most of us skip until something breaks.
So, how do you fix this?
Use this as a pre-launch checklist — or run it on a site that's already live but sharing badly.
What I ran into on my own portfolio When I ran this audit on shwethaadiraj.com, the site rendered fine — but sharing it told a different story.
I had pointed both the favicon and Open Graph image at my profile avatar.
At tab size the illustration was unreadable; in link previews it got cropped awkwardly.
An OG validator then flagged two things I hadn't considered: the image was 512×512 (most platforms expect 1200×630), and there was no headline or CTA on the image itself — so Slack and LinkedIn showed a plain square with none of the context from my meta title.
I replaced the favicon with a simplified monogram, regenerated the OG image at the correct aspect ratio with my name, tagline, and site URL on it, and re-ran the debuggers.
Even then, previews didn't update until I hit Scrape Again — platforms cache OG data aggressively, so fixes on your end won't show up until you bust that cache.
None of this required rethinking the app.
It was a metadata pass — the kind of work that's easy to defer and annoying to discover at the share button.
Before we get into the specifics, here's a primer on what metadata can actually impact: What is metadata for?
Metadata, simply put, is data about data.
Search engines, crawlers and social sites all parse different metadata from your app.
Search & Discovery: The title and description in your app's tags tell search engines, crawlers, and AI chatbots how relevant your content is to a user's query.
Social Platforms: Open Graph (OG) and Twitter/X cards give you more control over how your app is presented when shared on social platforms.
Browser: Adding favicons and apple touch icons helps consolidate your brand identity across browser tabs, notifications and bookmarks.
The metadata audit checklist A page can render properly and function well but it can still fail when it comes to browser, socials or search engine checks.
Run this audit on every public-facing page on your app.
1.
Favicon and touch icons Does the browser tab show a clear icon at 16×16 and 32×32?
Is there a dedicated Apple touch icon (typically 180×180) for “Add to Home Screen”?
Is the favicon a simplified mark, not a full photo or illustration?
Are favicon URLs absolute (or resolvable via a consistent base URL)?
Why it matters: Large images or detailed illustrations lose detail at tab size.
Users with many tabs rely on favicons to find your site.
A blurry or generic icon makes the site look unfinished even when the page itself is polished.
How to verify Open the site in a browser and inspect the tab icon.
Visit the favicon URL directly (e.g. or ).
On mobile, add the site to the home screen and check the icon.
Use a favicon checker or DevTools → Application → Manifest / Icons if you ship a PWA manifest.
2.
Page title and description Does every route have a unique ?
What is the length of the titles?
Are they concise and readable?
Does every page have a description summarizing content of that specific page?
Why it matters: Title and description are what show up in Google results and often in link previews when OG tags are missing.
Duplicate or empty metadata makes pages compete with each other and look spammy in search.
How to verify View page source and search for and .
Paste the URL into a search preview tool and confirm the title/description match what you expect.
3.
Canonical URL Does every pa