> ## Documentation Index
> Fetch the complete documentation index at: https://docs.hadoseo.com/llms.txt
> Use this file to discover all available pages before exploring further.
# OG Preview Checker
> Preview how your links appear when shared on social media
## Overview
The **OG Preview Checker** shows you exactly how your links will appear when shared on social media platforms like Twitter/X, Facebook, LinkedIn, and Discord.
Test your site at hadoseo.com/free-og-preview-checker
## Why Open Graph Tags Matter
When you share a link on social media, platforms look for Open Graph (OG) tags to create a rich preview. Without them:
* ❌ Links show as plain text URLs
* ❌ No preview image
* ❌ Generic or missing title/description
* ❌ Poor engagement and click-through rates
## How to Use
Paste the URL you want to preview:
```
https://yourdomain.com/page
```
The tool fetches your page and extracts OG tags.
See mockups for:
* Twitter/X
* Facebook
* LinkedIn
* Discord
## Required Open Graph Tags
Add these to every page's ``:
```html theme={null}
```
## OG Image Guidelines
| Platform | Recommended Size | Min Size |
| --------- | ---------------- | ------------ |
| Twitter/X | 1200 x 628 px | 600 x 314 px |
| Facebook | 1200 x 630 px | 600 x 315 px |
| LinkedIn | 1200 x 627 px | 552 x 289 px |
| Discord | 1200 x 630 px | 256 x 256 px |
### Best Practices
* Use **1200 x 630 pixels** to work on all platforms
* Keep file size under **8MB**
* Use **PNG** or **JPG** format
* Include readable text (but not too much)
* Use absolute URLs (not relative)
## Twitter-Specific Tags
For better Twitter cards:
```html theme={null}
```
### Card Types
| Type | Description |
| --------------------- | ----------------------------------------- |
| `summary` | Small square image with title/description |
| `summary_large_image` | Large horizontal image (recommended) |
## Implementing OG Tags
### React (React Helmet)
```jsx theme={null}
import { Helmet } from 'react-helmet-async';
function MyPage() {
return (
);
}
```
### Dynamic OG Images
For unique pages (blog posts, products):
```jsx theme={null}
function BlogPost({ post }) {
return (
);
}
```
## Common Issues
**Causes:**
* Relative URL instead of absolute
* Image too small
* Image URL returns 404
* Image blocked by robots.txt
**Fix:** Use absolute URLs starting with `https://` and verify image accessibility.
**Cause:** Platforms cache OG data
**Fix:** Use platform debuggers to clear cache:
* [Facebook Debugger](https://developers.facebook.com/tools/debug/)
* [Twitter Card Validator](https://cards-dev.twitter.com/validator)
* [LinkedIn Post Inspector](https://www.linkedin.com/post-inspector/)
**Cause:** OG tags not set or overridden
**Fix:** Ensure OG tags are in `` and take priority over ``.
</Accordion>
</AccordionGroup>
## Testing After Changes
1. Update your OG tags
2. Trigger a recrawl in Hado SEO dashboard
3. Clear platform caches using debugger tools
4. Re-test with OG Preview Checker
<CardGroup cols={2}>
<Card title="Bot Crawler Test" icon="spider" href="/tools/seo-bot-crawler-test">
Test search engine visibility
</Card>
<Card title="Meta Tags Checker" icon="tags" href="/tools/meta-tags-checker">
Analyze all meta tags
</Card>
</CardGroup>