# Open Graph Basics: Control the Shared Preview of the Page

> What Open Graph tags do and how to make shared links look complete across chat and social platforms.

Canonical: https://softwareontheweb.com/tools/launch-readiness-checker/open-graph-basics

When someone shares your page, the preview often comes from Open Graph tags.

Missing or weak tags produce low-quality previews that hurt trust and click potential.

## What It Is

Open Graph tags are metadata in the document head that define the title, description, type, and image used for social sharing previews.

```html
<meta property="og:title" content="Website Launch Checker">
<meta property="og:description" content="Audit your site before launch for SEO, trust, and accessibility gaps.">
<meta property="og:type" content="website">
```

## Why It Matters

- It improves how links look in social feeds and chat apps.
- It lets you separate sharing copy from on-page copy when needed.
- It reduces random preview generation by platforms.

## Best Practices

1. Always provide `og:title`, `og:description`, and `og:type`.
2. Keep social copy specific and readable.
3. Make Open Graph content align with the destination page.
4. Use lengths that avoid obvious truncation where possible.

## Common Mistakes

- No Open Graph tags.
- Copying the same weak text from an outdated page.
- Using placeholder or generic descriptions.

## Quick Checklist

- Core tags present.
- Copy is clear.
- Values match page intent.
- Image handled separately with a real `og:image`.

## Final Takeaway

Open Graph tags are your default shared-link packaging. Ship them intentionally.

## Related
- [Home](https://softwareontheweb.com/)
- [Topics](https://softwareontheweb.com/topics)