HedgieTools

Social share preview

See how your page will look when shared on Google, Facebook, X, LinkedIn, WhatsApp, Slack, Discord or Pinterest, fix what gets cut off, and copy ready-to-paste Open Graph tags.

1. Your page details

Fill in the form, or import it from the code of a page.

0 / 60
0 / 155
Page type
Share image

JPG, PNG, WebP or GIF. The picked image is only used for the preview: give its online address too, for the code.

2. Previews

A simulation of each platform: the real result may vary slightly, but the cuts are close to reality.

Google

Eexample.comhttps://example.com › …
Page titleThe page description will appear here.

Facebook

example.comPage titleThe page description will appear here.

X

Page title
From example.com

LinkedIn

Page titleexample.com

WhatsApp

Page titleThe page description will appear here.example.com
https://example.com10:24

Slack

example.comPage titleThe page description will appear here.

Discord

example.comPage titleThe page description will appear here.

Pinterest

Page titleEexample.com

Pinterest shows the whole image, without cropping it. A vertical image (2:3, for example 1000 × 1500 px) takes more room there, but will be cropped elsewhere.

3. Checks and code

What to fix, then the tags to paste into your page.

  • ProblemTitle missingWithout a title, every network makes one up from the page.
  • ProblemDescription missingNetworks will take a piece of text from the page, often a poor choice.
  • ProblemNo imageLinks without an image get far fewer clicks. Plan for an image of 1200 × 630 px.
  • To improvePage address missingog:url gives the official address of the page, so shares are grouped together.

Paste it in the head section of your page.

Fill in the form to generate the code.

About the social share preview

Every time someone shares your page, a network shows a card with its title, its description and its image. This tool shows those cards before you publish, and writes the tags that feed them.

Make your links look good

When your page is shared, each network shows a card with a title, a description and an image. That information comes from the Open Graph tags placed in the code of the page. Without them, the card is empty or badly chosen.

The right lengths

Google cuts a title around 60 characters and a description around 155. An image of 1200 × 630 pixels (1.91:1) looks good everywhere: keep the essentials in the center, as some platforms crop it. Pinterest prefers a vertical image.

Ready-to-paste code

Copy the HTML tags to place in the head of your page, or the metadata object for a Next.js site. After going live, networks sometimes keep the old preview in their cache for a few days.

Nothing is uploaded

The previews are simulated in your browser. Your image and your texts are sent nowhere. The only request is the one for an image address you type, made by your browser.

Related tools

Development

JWT Decoder

Read a JWT's header, payload and dates, and check its signature.

Development

SVG to HTML

Convert SVG to HTML, JSX and React.