ToolXkit Icon

Open Graph Preview

See how your link will look when shared, and get the tags to paste.

  • Free
  • No signup
  • Nothing uploaded
  • No watermark

The URL is sent to the ToolXkit server, which fetches the page and returns its markup — the checks themselves run here. Or paste the source below.

How the card will look

og:image — 1200 × 630

example.com

How to compress a PDF without losing quality

Three ways to bring a PDF under the size limit, and which one keeps the text sharp.

Tags for your <head>
<meta property="og:title" content="How to compress a PDF without losing quality">
<meta property="og:description" content="Three ways to bring a PDF under the size limit, and which one keeps the text sharp.">
<meta property="og:url" content="https://example.com/blog/compress-pdf">
<meta property="og:type" content="article">
<meta property="og:site_name" content="Example">
<meta property="og:image" content="https://example.com/og.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="How to compress a PDF without losing quality">

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="How to compress a PDF without losing quality">
<meta name="twitter:description" content="Three ways to bring a PDF under the size limit, and which one keeps the text sharp.">
<meta name="twitter:image" content="https://example.com/og.png">

How to Use the Open Graph Preview Online

Open Graph Preview: before and after TEXT A YOUR INPUT OPEN GRAPHPREVIEW DONE A RESULT

Shows how a link will look when shared and gives you the tags. Check before posting: platforms cache what they fetch, so correcting the tags afterwards does not update the preview for anyone who has already seen it.

No software to install Free Works on any device

Step-by-Step Guide to Using the Open Graph Preview

  1. 1. Fill in the fields with your own values

  2. 2. The result updates as you type, with the reasoning shown alongside it

  3. 3. Copy what you need — everything is worked out in your browser

Try it now

What is the Open Graph Preview?

Shows how a link will look when shared and gives you the tags. Check before posting: platforms cache what they fetch, so correcting the tags afterwards does not update the preview for anyone who has already seen it.

Why Use Colour and CSS Tools?

Choosing colours that work together and writing CSS for shadows, gradients or grids takes a lot of trial and error. These tools show a live preview as you adjust, then hand you the colour codes or CSS to copy.

“See it first, then copy the code.”
  • Live previews while you adjust
  • Codes in HEX, RGB and HSL
  • CSS ready to paste
  • Designs checked for colour blindness
  • Palettes that work together
  • Readable text checked for contrast
  • Print colours in CMYK
  • Colours taken from photos

Popular Uses for Colour Pickers and CSS Generators

Designers and site owners use these for the same handful of jobs.

  • Brand colours Build a palette around a logo colour with matching tints, shades and accents.
  • Readable buttons Check that text on a coloured button passes the WCAG contrast ratio.
  • Card shadows Adjust a box shadow until a card looks right, then copy the CSS.
  • Page layouts Set up a CSS grid or flexbox layout visually instead of guessing values.
  • Print artwork Convert screen colours to CMYK and check bleed before sending a flyer to print.
  • Colours from a photo Pull the main colours out of a product photo to match a web page.
  • Colour blind checks See how a chart or poster looks to people with different kinds of colour blindness.
  • Button styles Design a gradient, glass or soft 3D style button and take the code.

What You Can Do with the Open Graph Preview

Produces markup that validates, with what each field actually controls explained

Works in the unit the job is actually specified in — millimetres, points, pixels or inches

Shows the result at true proportion rather than as an abstract number

Why Use ToolXkit for Open Graph Preview?

Your files stay with you

Everything runs inside your browser. Nothing you open or type is uploaded to a server.

Design Tools for Different Users

Designers

Build palettes, test contrast and convert colours between HEX, RGB, HSL and CMYK.

Front-end developers

Generate CSS for gradients, shadows, animations and layouts and check it in a preview.

Design students

Learn how colour harmony and CSS properties work by changing them live.

Small business owners

Pick consistent brand colours for a shop sign, website and social posts.

Print designers

Convert colours for print and work out bleed, trim and pixel sizes.

Accessibility testers

Check contrast ratios and preview designs through different types of colour blindness.

Best Times to Pick Colours and Write CSS

These tools help when you are:

  • Starting a new brand or logo
  • Fixing text that is hard to read
  • Styling a button or card
  • Preparing a flyer for print
  • Matching a colour from a photo
  • Laying out a page with grid
  • Checking a chart for colour blindness
  • Converting a HEX code to RGB

Frequently Asked Questions

Answers to common questions about this tool.

Do I need to install anything to use the Open Graph Preview?

No. Open Graph Preview runs entirely in your browser — there is nothing to download, no extension and no desktop program. It works the same on Windows, macOS, Linux, Android and iPhone.

Is it safe to use the Open Graph Preview online?

Safer than the usual alternative, yes. Most online tools upload your file to a server you know nothing about, where it sits until someone deletes it. Here the file never leaves your device — the processing happens in the page itself, so there is no server copy to leak, retain or sell.

Can I copy the CSS straight into my project?

Yes. The generators give plain CSS that works in current browsers. Copy it into your stylesheet, then adjust class names or values to fit the rest of your design.

Is Open Graph Preview free for commercial work?

Yes. The colours, palettes and CSS you make are yours to use in client projects, products or anything else, with no credit required and no fee.

Why do my screen colours look different when printed?

Screens mix light in RGB, while printers mix ink in CMYK, and some bright screen colours cannot be printed. Convert to CMYK and ask your printer for a proof before a large print run.

What contrast ratio should my text have?

WCAG asks for at least 4.5 to 1 for normal text and 3 to 1 for large text. The Colour Contrast Checker shows whether your pair passes, so you can adjust before publishing.

Do I need to sign in to use Open Graph Preview?

No. There is no account to create. Open the page, adjust the settings and copy the result. Your choices are worked out on your own device and never leave it.

Further reading

More Colour & CSS Tools

Other free tools for the same kind of job.

Browse all tools