Your Website Looks Broken When Shared. Fix Open Graph Tags in 5 Minutes
September 7, 2026
You launch a product, share the link in WhatsApp, Slack, X, or LinkedIn, and the preview appears blank.
Or it shows an old title, the wrong image, or a random page description.
That small preview is often the first impression of your website. If it looks broken, people may assume the product is unfinished.
The fix usually takes five minutes.
Social platforms read Open Graph tags and Twitter Card tags from the <head> of your page. These tags tell them which title, description, image, and URL to display.
AI-powered crawlers and link preview systems can also read this metadata as a quick signal about what your page contains. Clean metadata supports both social sharing and broader AI search optimization, although your visible page content still matters most.
What the broken preview looks like
| ❌ Weak or broken sharing | ✅ Correct sharing |
|---|---|
| Blank preview box | Clean title and description |
| Wrong or unrelated image | Relevant 1200 × 630 image |
| Old product or page title | Current, specific title |
| Incorrect URL | Correct canonical page URL |
| Generic description | Clear reason to click |
If your site was built quickly with an AI website builder, a starter template, or a vibe-coding workflow, these tags may be missing or copied from another page.
Your five-minute Open Graph fix
Minute 1: Check the link preview
Copy the exact page URL you want to share.
Check it with a preview tool such as OpenGraph.xyz. You can also paste the link into a private Slack message or a test chat.
Look for four things:
- Is the title current?
- Is the description useful?
- Is the image relevant?
- Does the URL point to the correct page?
Do not test only your homepage. Check your launch page, pricing page, product page, and important blog posts separately.
Each page needs its own metadata.
Minute 2: Generate the correct tags
Use the free Smart Analytics Meta Tag Generator.
Enter:
- Your page title
- A short page description
- The exact page URL
- A public image URL, ideally 1200 × 630 pixels
Write the title for the person seeing the preview, not for your code editor.
❌ Home | My Startup
✅ Launch faster with simple invoice automation
Keep the description specific. Explain what the page does and why someone should open it.
The generator creates the standard title and description tags, plus Open Graph and Twitter Card tags. There is no login, email form, or paywall.
Minute 3: Add the tags to your page
Paste the generated tags inside the <head> section of the page.
A basic setup looks like this:
<title>Launch faster with simple invoice automation</title>
<meta
name="description"
content="Create, send, and track invoices without spreadsheets or complicated accounting software."
/>
<!-- Open Graph -->
<meta property="og:title" content="Launch faster with simple invoice automation" />
<meta
property="og:description"
content="Create, send, and track invoices without spreadsheets or complicated accounting software."
/>
<meta property="og:url" content="https://example.com/product" />
<meta property="og:type" content="website" />
<meta property="og:image" content="https://example.com/images/product-share.jpg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Launch faster with simple invoice automation" />
<meta
name="twitter:description"
content="Create, send, and track invoices without spreadsheets or complicated accounting software."
/>
<meta name="twitter:image" content="https://example.com/images/product-share.jpg" />
Use absolute HTTPS URLs for both og:url and og:image.
If your website uses a JavaScript framework, make sure these tags are present in the server-rendered HTML. Some social crawlers do not wait for client-side JavaScript to insert metadata.
Also check that your page has only one set of Open Graph tags. Duplicate tags can cause platforms to select the wrong value.
Minute 4: Check the image and URL
Your social image must be:
- Publicly accessible
- Served over HTTPS
- Available without login or cookies
- Relevant to the page
- Large enough to look sharp
- Close to a 1200 × 630 ratio
Do not use a private storage URL, a local development path, or an image that requires authentication.
Match og:url to the page’s preferred canonical URL.
For example, do not mix these versions:
https://example.com/product
https://www.example.com/product/
https://example.com/product?source=launch
Choose the main public URL and use it consistently.
Minute 5: Test again
Run the URL through your preview checker again.
If the old title or image still appears, the platform may have cached the previous version. Try one of these actions:
- Refresh the URL in the preview debugger
- Re-scrape the page
- Test in a private browser window
- Change the image filename when replacing an old image
- Wait for the platform cache to expire
Do not assume the tags failed just because one app still shows an old preview immediately.
Common Open Graph mistakes
1. Using the homepage title everywhere
If every page says My Startup, people cannot tell what they will find after clicking.
Match the social title to the specific page.
A pricing page should mention pricing. A launch page should mention the launch. A blog post should use the article title.
2. Leaving out og:image
Without an image, platforms may show a blank card or choose an unrelated image from the page.
Add a dedicated sharing image. Avoid using a tiny logo or a random product screenshot.
3. Using a relative image path
This may work in your browser:
<meta property="og:image" content="/images/share.jpg" />
But external crawlers work more reliably with:
<meta property="og:image" content="https://example.com/images/share.jpg" />
4. Adding tags only through JavaScript
Some crawlers do not fully render your application before reading the page. Put the important tags directly into the server-rendered <head> whenever possible.
5. Forgetting new pages
You may fix the homepage and still have broken previews for your product, pricing, documentation, or blog pages.
Create a short launch checklist and test every page you plan to share.
Open Graph tags are not a replacement for SEO
Open Graph tags mainly control how a page appears when shared. They do not replace your page title, visible heading, internal links, structured content, or technical SEO.
They are one part of a complete website SEO audit.
They also support a broader answer engine optimization strategy by giving crawlers clear, consistent information about your page. For AI search optimization, make sure the page itself answers the user’s question clearly, uses descriptive headings, and provides information that can be understood without relying only on metadata.
Once your Open Graph tags work, add structured data with the free Schema Markup Generator. Choose the appropriate type, such as Article, FAQ Page, Product, or Organization, then paste the generated JSON-LD into your page.
Final five-minute checklist
Before sharing your next launch link:
- ✅ Add a specific page title
- ✅ Write a useful description
- ✅ Set
og:title - ✅ Set
og:description - ✅ Set
og:image - ✅ Set
og:url - ✅ Add Twitter Card tags
- ✅ Use a public 1200 × 630 image
- ✅ Place tags in the page
<head> - ✅ Test the URL after publishing
If you want a broader check, run your site through the free Smart Analytics SEO/AEO analyzer. It checks Open Graph tags as part of a full website audit and reviews visibility for traditional search and AI-powered search.
It is completely free, with no login, no email requirement, and no paywall. You get the full report every time and keep everything.
Want to see how your site scores?
Run Free Audit →Get our insights in your Google feed
Follow Smart Analytics and see our latest tips highlighted in Google Search and AI Overviews.