Meta Tag and Open Graph Preview Builder

Write the tags once, check them everywhere

A page is shared and found in several places, and each one reads a slightly different set of tags. Fill in the form once and the previews show how the page will look in Google, Facebook, X and LinkedIn before you publish.

Start with the three that matter most

1. Title. Put the main topic first and the brand last. Keep it under about 60 characters, because Google cuts titles by pixel width and wide letters such as W and M use up room faster than narrow ones.
2. Description. Write one or two plain sentences that say what the visitor gets. Google may rewrite it, but a clear description gives it a good starting point. Stay near 120 to 160 characters.
3. Image. A 1200 by 630 pixel image served over https works on every network. Use large, simple shapes and little text.

What the other fields do

• Canonical URL tells search engines which address is the main version when the same page is reachable in several ways, such as with tracking parameters.
• robots controls indexing and link following. The default, index and follow, is right for almost every public page.
• og:type is website for most pages and article for blog posts.
• Locale helps networks pick the right language, for example en_US or fr_FR.
• Theme colour tints the browser toolbar on supported mobile browsers.
• X handle credits your account in cards.

Using the output

Choose HTML tags and paste the block inside the <head> of your page. If you use the Next.js App Router, choose Next.js metadata and paste it into a layout.tsx or page.tsx file. Theme colour is exported separately as viewport, as current Next.js versions expect.

After you publish

Social networks cache previews, so a changed image may not show at once. Use each network's own debugger to refresh the cache, and re-check any page whose title or image you change.