Page metadata is easier to edit when you can see the title, address, and summary together. The Meta Title & Description Preview creates a search-style mockup from the values you enter and generates corresponding HTML tags. It does not fetch the page or check an existing site’s metadata.
Enter a specific title, summary, and address
Fill Page title with the name a visitor should recognize. Use Meta description to summarize what the page actually contains. Enter a complete HTTP or HTTPS address in Canonical page URL, then choose Generate result. URLs containing embedded usernames or passwords are rejected.
For example, use Camera bag checklist, A printable list for packing a small photography kit., and https://example.com/camera-bag. The title contains 20 characters and the description contains 53. The preview displays the host and path, followed by the supplied title and summary. It does not display the complete query string or fragment in that address line.
The generated text includes a title element, a description meta element, and a canonical link pointing to the normalized URL. Copy the result or download metadata.html as a reference for updating your page source or template.
Read the counts as editing information
Both counts use Unicode code points rather than bytes. Spaces and punctuation count, and combined symbols can contain multiple code points. The tool does not enforce a fixed title or description length or calculate a search engine’s available pixel width.
Use the preview to compare wording rather than chase an exact cutoff. Check whether the opening words identify the page, whether the summary adds useful information, and whether similar pages on your site have distinct descriptions. Search engines may rewrite text, so the mockup is not a promise of a particular result appearance.
Review the markup before adding it
The generator escapes characters such as ampersands and quotation marks for HTML. For instance, an entered title containing Camera & lens notes becomes Camera & lens notes inside the title tag. That escaping preserves the text’s intended meaning in markup; do not replace it with a raw ampersand simply to make the source look familiar.
The tool processes these inputs in your browser without requesting the destination page. It cannot verify that the canonical URL is correct, that it returns a successful response, or that your template already emits duplicate tags. Inspect the final page source after integration. Use the Open Graph Preview Tool for separate social-sharing tags, and the JSON-LD Generator when you need factual structured data alongside the page’s visible content.