A shared page needs a title, summary, address, and image that describe the same subject. The Open Graph Preview Tool turns those inputs into a small set of Open Graph meta tags. Its on-page mockup shows the entered text, giving you a convenient editorial check before you update your site.
Enter the sharing values
Fill Page title, Meta description, and Canonical page URL. Add the complete public image address in Image URL (used in generated tags), then choose Generate result. Both URL fields accept only HTTP or HTTPS addresses without embedded credentials. A local filename such as cover.jpg does not provide a complete image address for this form.
For example, enter Camera bag checklist, Pack a smaller photography kit., https://example.com/camera-bag, and https://example.com/images/camera-bag.jpg. The result sets og:type to website, copies the title into og:title, the summary into og:description, and includes the supplied page and image URLs in og:url and og:image.
The title in this example contains 20 characters. The metric counts Unicode code points, including spaces and punctuation, rather than measuring the text’s rendered width.
Understand the preview’s scope
This implementation uses a text-focused preview containing host and path, title, and description. It does not fetch the destination page, download the image, or render that image inside a realistic social-network card. Entering an image URL causes it to appear in the generated tags, not in a remotely loaded image preview.
Consequently, a successful result does not prove the image exists, has useful dimensions, or is accessible to a sharing platform. Open the intended public image and review it separately. The Social Media Image Resizer can help prepare an image you own before you host it at a stable address.
Integrate and inspect the final page
Copy the tags into the appropriate head template or use the downloaded metadata.html as a reference. Values are HTML-escaped, so quotation marks and ampersands can appear as entities in the source. Keep that escaping intact when moving the result into raw HTML.
The generator does not remove existing metadata, choose a platform-specific image crop, or clear a platform’s stored preview. Social services may crop images or rewrite displayed text, so the mockup is an approximation. Review the live page’s source and sharing behavior after deploying through your usual process.
All generation occurs in the browser and no remote page is fetched. Do not place private access tokens in public metadata URLs. Use the Meta Preview for the separate title, description, and canonical tags used outside this Open Graph block.