Open Graph Preview
Preview how your links may appear on Facebook, LinkedIn, and other social platforms. Customize Open Graph tags, optimize images, and generate copy-ready metadata for free.
Page & website
og:url and the preview domain.Title & description
Image
og:image always uses this URL. Uploads are preview-only and never leave your browser.Preview crop & ratio
These settings only change the simulated preview. The source image and generated image URL are never modified.
Article details
article:tag.Twitter / X settings
Basic SEO tags
Import existing metadata
Live preview
These previews are approximations. Platforms change their layouts, may crop images differently and can keep old metadata cached, so the real appearance may differ. LinkedIn cards typically emphasize the title and domain.
Image analysis
Text & metadata checks
These checks are guidance based on your inputs. A valid URL syntax does not prove the page is public, and passing checks does not guarantee a specific appearance or engagement on any platform.
Generated tags
Keep going with other free EnjoySEOs tools. No signup, no limits.
No tools match your search. Try a different keyword.
What Is an Open Graph Preview?
An Open Graph Preview shows how a webpage may appear when someone shares its link on a social network or messaging platform. Depending on the platform, the preview can display a page title, description, image, website name, and destination URL. These details are often generated from Open Graph metadata placed in the HTML head of a page.
An Open Graph Preview tool helps website owners, marketers, developers, and content publishers inspect or prepare the information used in shared-link previews. It can help identify missing metadata, incorrect titles, unsuitable images, and descriptions that do not represent the page accurately.
A social sharing preview is different from the webpage itself. Your page can look correct in a browser while its shared-link preview displays an old image, an irrelevant title, or incomplete information. Reviewing the metadata before distributing a link helps you catch these problems early.
Why Use an Open Graph Preview Tool?
When people share a URL, the preview often provides their first visual impression of the linked page. Clear metadata can help communicate what the content offers and make the shared link easier to recognize. A preview tool makes it simpler to review those details before a page is published or promoted.
Preview Shared Links
Review how a title, description, image, and website identity may be arranged in a link preview before sharing the URL.
Check Open Graph Metadata
Inspect important fields such as og:title, og:description, og:image, and og:url to find missing or inconsistent values.
Review Social Images
Check whether the selected image represents the page, uses a suitable landscape layout, and remains clear when shown as a smaller preview.
Find Metadata Problems
Identify outdated values, incorrect page URLs, missing images, and other common reasons a shared link may display unexpected information.
How to Use an Open Graph Preview Tool
The exact workflow depends on the features supported by the tool. Some tools preview metadata entered manually, while URL-based preview tools retrieve the metadata published on a live webpage. Use the method supported by the tool above.
- Choose the webpage to review. Identify the article, product page, landing page, or other URL you plan to share with an audience.
- Enter the page URL or metadata. If the tool accepts a URL, provide the complete address. If it uses manual input fields, enter the title, description, image URL, and other available metadata.
- Check the preview title. Verify that the title describes the page accurately, is readable, and does not contain unwanted template text.
- Review the description. Make sure the summary explains what visitors can expect from the linked page and does not contain outdated text.
- Check the preview image. Confirm that the image is relevant, loads correctly, has a suitable aspect ratio, and remains recognizable when displayed at a smaller size.
- Verify the destination URL. Check that the canonical page URL is correct and that the preview does not point to an unintended page.
- Update your website metadata if needed. Correct the relevant Open Graph tags in the page source, CMS, theme, or SEO plugin. Editing a preview mockup alone does not update the website's actual metadata.
- Test the live page again. After publishing changes, check the rendered HTML and use the relevant platform's debugging or inspection tool when available.
Important Open Graph Meta Tags
Open Graph metadata is commonly placed in the HTML
<head> section of a page.
The Open Graph protocol defines four basic properties:
og:title,
og:type,
og:image, and
og:url.
Other metadata, including a description and site name, helps
provide more context for social sharing.
| Meta Property | Purpose | Example |
|---|---|---|
og:title |
The title used to represent the shared page. | Complete Guide to Website SEO |
og:description |
A short description of the page content. | Learn the fundamentals of website optimization. |
og:image |
The image URL associated with the shared page. | https://example.com/images/share-image.jpg |
og:url |
The canonical URL used to identify the page. | https://example.com/website-seo/ |
og:type |
The general type of object represented by the page. | website or article |
og:site_name |
The name of the website that publishes the content. | Example Website |
og:image:alt |
A text description of the Open Graph image. | Website SEO guide cover image |
og:locale |
The locale associated with the page metadata. | en_US |
Open Graph Meta Tags Example
The following example shows how Open Graph metadata can be added to an HTML document. Replace the sample title, description, domain, and image URL with the actual information for your page.
These tags describe the page and its image to systems that understand Open Graph metadata. Use a fully qualified image URL that a sharing platform can access. The markup should be included in the actual page source, not simply displayed as text within the page body.
Important: Editing an example in a preview tool does not automatically change the live webpage. Update the source metadata through your website or content management system, then inspect the published page to confirm the changes are present.
Open Graph Image Size and Best Practices
The image is often the most visually prominent part of a shared-link preview. An image that is too small, inaccessible, irrelevant, or poorly cropped can make the link preview less effective. A frequently used general-purpose landscape size is 1200 × 630 pixels, which has an aspect ratio close to 1.91:1.
Different platforms may apply their own display rules, image constraints, and cropping behavior. There is no guarantee that the same image will be rendered identically everywhere, so review your intended sharing platforms when exact presentation matters.
Choose a Landscape Image
A 1200 × 630 pixel image is a practical starting point for a general-purpose social sharing image. Check platform-specific recommendations where necessary.
Use a Relevant Visual
Select an image that represents the actual article, product, service, or landing page rather than a generic or unrelated graphic.
Keep Important Content in View
Place key text, logos, and subjects away from the extreme edges so minor cropping does not remove important details.
Use an Accessible Image URL
Provide a direct, publicly accessible image URL. Avoid images blocked from sharing crawlers or requiring visitors to sign in to view them.
Image tip: Use a clear, appropriately sized image and check that it loads over HTTPS. Also consider file size, image format, mobile display, and the branding or legibility of any text included in the graphic.
Open Graph Preview Across Social Platforms
Open Graph metadata is used by social networks and other systems that generate previews from shared URLs. However, each platform controls how it retrieves and displays metadata. A preview can vary because of platform-specific rules, supported properties, image constraints, and cached results.
| Platform or Service | What to Check | Useful Action |
|---|---|---|
| Title, description, image, and destination URL. | Inspect Open Graph metadata and refresh the preview cache when supported. | |
| Preview image, title, and description. | Check the live tags and use LinkedIn's Post Inspector when needed. | |
| Messaging apps | Image availability and the page information extracted from the URL. | Test a real shared link; layouts and fetching behavior can differ. |
| X | Card metadata and any platform-supported fallback fields. | Review the relevant card documentation and test the posted link. |
Open Graph tags and X card metadata are related but not identical. X may use card-specific metadata as well as supported Open Graph properties. If you target a particular platform, check its current developer documentation instead of assuming every field will be handled the same way.
Open Graph Tags vs. X Card Tags
Open Graph tags provide shared-page information through
properties such as og:title
and og:image. X also supports
card-specific metadata, commonly including
twitter:card,
twitter:title,
twitter:description, and
twitter:image.
If your website needs to support multiple sharing systems, create Open Graph tags first and add platform-specific fields when appropriate. Metadata should remain consistent across the different sets of tags to avoid presenting contradictory information about the same page.
These are example card tags. Confirm the platform's current support and presentation behavior before relying on a particular card format. Adding tags alone does not guarantee that every post will appear exactly as expected.
Common Open Graph Preview Problems
Wrong Preview Image
Confirm that og:image points to the correct image and that the image URL loads without authentication, access restrictions, or an unexpected redirect.
Outdated Preview Information
Platforms can cache previously fetched metadata. After updating the page, use the platform's supported debugging or cache-refresh tool where available.
Missing Title or Description
Inspect the published HTML head to ensure the tags are present, contain non-empty values, and describe the correct page.
Incorrect Destination URL
Check og:url and confirm that the canonical URL matches the intended page. Avoid using a URL for an unrelated page or an unintended destination.
Image Does Not Load
Verify that the image is publicly reachable, uses a supported format, and is not blocked by server permissions or crawler restrictions.
Different Platform Results
Platforms may interpret metadata differently or apply their own rules. Validate the target platform instead of assuming a single mockup predicts every result.
How to Set Up Open Graph Tags in WordPress
WordPress websites can output Open Graph metadata through SEO plugins, social sharing plugins, theme functionality, or a custom implementation. The correct approach depends on your current site configuration and the controls available in your content management system.
- Check your existing SEO plugin. Many SEO plugins provide controls for social titles, descriptions, and image settings. Review the plugin output before adding another set of tags manually.
- Set page-specific sharing information. Configure the title, description, and image that best represent the page you intend people to share.
- Inspect the rendered HTML. View the page source and look for the expected Open Graph properties in the head section.
- Check for duplicate tags. Multiple plugins or theme features may output competing metadata. Keep a single consistent set of values wherever possible.
- Test the published URL. Use an appropriate preview tool or platform debugger to check the live page after making changes.
WordPress note: Adding preview information to a visible Custom HTML block does not automatically place meta tags in the document head. Set Open Graph metadata through your SEO plugin, theme, or another method that correctly outputs the tags in the published HTML.
Open Graph Metadata Best Practices
- Write an accurate title. Make the title concise, descriptive, and consistent with the page content. Avoid misleading claims or generic default titles.
- Use a useful description. Summarize the page in natural language and explain why the linked content matters to its intended audience.
- Choose a representative image. Use a relevant, high-quality image that remains recognizable when displayed at different sizes.
- Use absolute URLs. Provide complete page and image URLs, including the scheme and domain, rather than relative paths.
- Set the appropriate object type. Use a suitable value such as website or article for the page being shared.
- Keep metadata consistent. Align Open Graph and platform-specific card metadata so they do not contain conflicting titles, descriptions, images, or destinations.
- Check image dimensions and accessibility. Use a suitable image size and ensure the file can be retrieved by relevant sharing crawlers.
- Review the live HTML. Inspect the actual metadata returned by the page, rather than relying exclusively on settings saved in the WordPress dashboard.
- Refresh cached previews when possible. If a platform continues to display outdated information, use its supported preview-inspection or cache-refresh mechanism, when available.
- Make changes before sharing campaigns. Review the title, image, description, and destination before using the URL in social posts, newsletters, advertisements, or messaging campaigns.
Frequently Asked Questions
What is an Open Graph Preview?
An Open Graph Preview shows how a webpage may appear when its URL is shared. Depending on the platform, it can display the page title, description, preview image, and destination information derived from Open Graph metadata.
What is an Open Graph Preview tool used for?
An Open Graph Preview tool helps inspect or prepare the metadata used for shared-link cards. It can help identify missing tags, incorrect images, outdated descriptions, and other preview issues before a link is shared.
What are Open Graph meta tags?
Open Graph meta tags are HTML metadata properties that describe a webpage for social sharing and compatible preview systems. Common properties include og:title, og:type, og:image, og:url, and og:description.
Which Open Graph tags are essential?
The four basic Open Graph properties are og:title, og:type, og:image, and og:url. A useful og:description and og:site_name can add more context to the shared page.
What size should an Open Graph image be?
A common general-purpose recommendation is 1200 × 630 pixels, close to a 1.91:1 aspect ratio. Check the current requirements of your target platforms because image dimensions, cropping, and file constraints can differ.
Does Open Graph metadata improve SEO rankings?
Open Graph metadata primarily describes content for social sharing and compatible preview systems. It should not be treated as a direct Google ranking guarantee. Its practical value is helping shared links present accurate information.
Why is my Open Graph image not showing?
The image may be missing from og:image, inaccessible to the platform crawler, incorrectly addressed, blocked by server settings, or unsuitable for that platform. Check the live source and the image URL, then retest the preview.
Why does my shared link show an old preview?
Social platforms can cache page metadata and images after fetching a URL. Updates to your website may not appear immediately. Use the relevant platform's available preview inspector or cache-refresh process when supported.
Where should Open Graph tags be placed?
Open Graph meta tags should be included in the HTML head of the webpage. On WordPress, an SEO plugin, theme feature, or suitable custom implementation can add these properties to the published page.
Can I use Open Graph tags with WordPress?
Yes. WordPress websites can publish Open Graph metadata through compatible SEO plugins, social sharing plugins, theme functionality, or custom code. Inspect the final page source to confirm that the intended tags are present.
What is the difference between Open Graph and X Card tags?
Open Graph uses properties such as og:title and og:image. X also supports card-specific metadata such as twitter:card and twitter:image. The two sets can complement one another, but platform behavior and metadata support may differ.
Will a preview tool guarantee the exact social media appearance?
No. A preview tool can help inspect metadata or approximate a layout, but each platform controls how it retrieves, caches, crops, and displays shared content. Always test the live URL on your target platform when exact presentation matters.
Preview and Optimize Your Open Graph Metadata
Accurate Open Graph metadata helps social platforms and compatible services understand how your page should be represented when a link is shared. Use the Open Graph Preview tool above to review the page title, description, image, and destination before publishing or distributing your URL.
Before sharing, confirm that the metadata is present in the live HTML, the image is publicly accessible, and the title and description match the actual content. If a platform displays outdated information, check its supported cache-refresh tools and test again.