Open Graph and social share preview

See roughly how a page will look when someone shares it on Facebook, X or LinkedIn, built from the page's own Open Graph and Twitter Card tags.

What it shows

The Social Preview section at the top of the side panel's Page tab draws a share card for the current page. Pick a platform from the menu in the section header:

• Facebook: a large image, then the domain, the title and the description.
• X: the image with the title laid over it, in the style of a large image card, with no description.
• LinkedIn: the image, then the title and the domain.

Each card shows only the fields that platform displays, so you can see when a description will be dropped or a title will sit on top of your image. The platform you pick is remembered for next time.

How to preview a social share

1. Open the page you plan to share.
2. Start Screen Ruler by clicking its toolbar icon or pressing Alt + Shift + S (Option on a Mac).
3. In the side panel, switch to the Page tab. Social Preview is the first section.
4. Choose Facebook, X or LinkedIn from the menu.

Changed your tags? Click the refresh button next to the page title to rebuild the card without reloading Screen Ruler. There is a full walkthrough in how to preview a social share.

Where the values come from

• Title: og:title, then twitter:title, then the page's <title>. For X, twitter:title is used first when present.
• Description: og:description, then twitter:description.
• Image: og:image, then twitter:image. For X, twitter:image is used first when present.
• Domain: the page's own host name, without www..

The preview only appears when the page has an og:image, because without one most platforms show a plain text link or no card at all. If the section is missing, that is the first thing to fix. To see the raw tag values, open Meta Tags in the same tab.

How it compares to platform debuggers

Facebook's Sharing Debugger and similar tools fetch your page from their own servers. That gives the most accurate answer for a public URL, but it cannot reach localhost, a staging site behind a password or a page that needs a login. Screen Ruler reads the tags from the page open in your browser, so you can check a card while the page is still in development, then confirm with the platform's own tool once it is live.

The cards are close approximations, not pixel copies. Platforms change their layouts, crop images differently on different devices and cache old values, so the final card can differ slightly.

When it is useful

• Before you post. Catch a missing image, a cut-off title or the wrong description before a link goes out.
• While building templates. Check that a blog or product template fills in the right Open Graph values for each page.
• Checking every template. Click through a home page, an article and a product page to make sure each one sends its own title and image instead of a site-wide default.
• Reviewing a client or competitor. See how their links present on each platform without posting anything.
• Checking X cards. See how your title reads on top of the image, where contrast and length matter more.

Pair it with the SEO checker, which flags a missing og:title, og:description or og:image. Social preview is free in Screen Ruler, with no time limit.

Common questions

Why is the Social Preview section not showing?

The preview only appears when the page has an og:image meta tag. Add one, then click the refresh button at the top of the Page tab. The SEO Issues section in the same tab will also list the missing tag.

Can I preview Open Graph tags on localhost?

Yes. Screen Ruler reads the tags from the page open in your browser, so it works on local development servers and staging sites that online debuggers cannot reach.

Is the preview exactly what Facebook, X or LinkedIn will show?

It is a close approximation built from the same tags those platforms read. Platforms adjust their layouts, crop images differently and cache earlier values, so check the live result with the platform's own debugger after publishing.

Does it use Twitter Card tags?

Yes. The X preview prefers twitter:title and twitter:image when they exist, and every platform falls back to the Twitter Card values when the matching Open Graph tag is missing.