Metadata for a page can serve different purposes. From setting the content’s language, to providing a short summary of the page’s content for search engines, and info for when the page is shared.

That last one has become the most relevant as it allows controlling how social media platforms output info for your page. Along with texting and chat apps, project management tools, and more. Here are the basics that should apply for all of them.

Metadata tags

Let’s start with the classic page tags that are used:

• title tag - page title, used as a default for any platform/app
• description - as part of default preview text
• canonical - full URL with no extra variables like campaign referrer info
• lang - needed mainly for non-english content

Open graph tags have become the standard for sharing links. These are the tags mainly used:

• og:title - if you want to show as an override for your title tag
• og:description - an override for your description tag
• og:url - override for canonical tag
• og:image - the preview thumbnail image

Some additional open graph tags are used by certain platforms:

• og:site_name - the name for your site, it could also be the name of a section on your site, like the blog
• og:type - use website for info pages, and article for blog posts, with more options available
• og:locale - an override for lang tag

Preview thumbnail

While having a thumbnail preview draws attention when your page is shared on social media, it's not a requirement to have. The recommended usage is that you should only have one if there is relevant imagery on the page, like a feature graphic or photo. You can even point to the same URL as that feature image.

Text in the image should be avoided since the thumbnail image could be shown really small that the text would be illegible, or cropped in a way you can’t account for.

• 1200x630 pixels is the standard image size
• Images can get scaled and cropped depending on the platform/app
• JPEG, GIF, or PNG formats, with WEBP starting to get supported
• Image file size shouldn’t exceed 5MB

In cases where you don’t have an image that can be used, if you have a fave icon set for your site, that may be used instead. You can use the apple-touch-icon meta property with an image of at least 180x180 pixels, or an SVG image. You can also create a preview thumbnail version to use as a backup for all pages on your site.

Bringing together all of the above, here's an example of this page's metadata used for sharing:

We don't include og:title, og:description, or og:url open graph tags since we want to just use the same content as the classic page tags.

Blocks Edit will pick up the metatags you use in your theme and allows changing them for each page.