How to use it
- Fill in the title and description, the page's address and a preview image.
- Check the search result and link preview on the right, and fix anything the warnings point out.
- Copy the tags into the
<head>of your page, or download them.
Only the fields you fill in become tags, and every value is escaped, so quotes and & in your text can't break the HTML.
The tags that matter
<title>is the headline of your search result and the browser tab. About 60 characters show in results.<meta name="description">is the snippet under it, when the search engine agrees it matches the page. Aim for 70 to 160 characters.<link rel="canonical">names the one address for the page, so copies at other addresses don't compete with it.- Open Graph (
og:) tags are what Slack, LinkedIn, Facebook, iMessage and most chat apps read for link previews. twitter:cardasks X for a large image card. X falls back to the Open Graph tags for the rest.
The preview image
Use 1200 × 630 pixels (1.91:1), PNG or JPEG, under 5 MB, at a full https:// address. Relative paths like /og.png don't work: the services that build previews fetch the image on their own. Keep important text away from the edges, since some apps crop to a square.
Frequently asked questions
Do meta keywords still matter?
No. Google has ignored <meta name="keywords"> for years, so the generator doesn't write it.
Why doesn't my link preview change after I update the tags?
Services cache previews, sometimes for days. Most have a tool to fetch the page again, such as LinkedIn's Post Inspector and Facebook's Sharing Debugger.
Where do the tags go?
Inside <head>, before the closing </head>. If your page already has a <title> or a description, replace them rather than adding a second one.
Can I see the real image in the preview here?
The preview shows the image's file name instead of the image, because this page only loads images from lobsite.com. Publish your page and check it in a chat app to see the real thing.