Why meta tag preview matters before publishing
The difference between a meta title that is 58 characters and one that is 63 characters is invisible in your CMS — but in Google search results, the longer title gets truncated with an ellipsis, cutting off the most important keyword. A social sharing image that is 100×100 pixels will be stretched and distorted in an Open Graph card. Seeing exactly how your page will appear before publishing lets you fix these issues before they cost you clicks and shares.
Google search result preview
The previewer renders a pixel-accurate simulation of how your page appears in Google search results — including the title, URL, and meta description. The title limit is approximately 580 pixels wide (roughly 55–60 characters in a typical font), after which Google truncates and shows an ellipsis. The description limit is approximately 920 pixels (roughly 155–160 characters). The previewer measures pixel width, not just character count, because different characters have different widths — an all-capitals title truncates sooner than a mixed-case title with many narrow letters.
Twitter / X card preview
Twitter supports two card types relevant here: summary (small square image with text beside it) and summary_large_image (full-width image above the text). The previewer shows the summary_large_image layout, which is the more visually impactful format for content marketing. The required meta tags are twitter:card, twitter:title, twitter:description, and twitter:image. The image should be at least 600×314 pixels with a 2:1 aspect ratio for best results.
Open Graph (Facebook / LinkedIn) preview
Open Graph is the protocol used by Facebook, LinkedIn, WhatsApp, Slack, and most other platforms when generating link previews. The required tags are og:title, og:description, og:image, and og:url. The recommended image size is 1200×630 pixels (1.91:1 ratio). LinkedIn truncates titles at approximately 70 characters and descriptions at 150 characters.
The meta tags to include on every page
Every page should have: <title> (the HTML title tag, used by Google), <meta name="description"> (used by Google and as fallback for social), og:title, og:description, og:image, og:url (used by Facebook/LinkedIn/WhatsApp), twitter:card, twitter:title, twitter:description, twitter:image (used by Twitter/X). Together these 9 tags ensure your page looks intentional in every context where it appears.