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:
titletag - page title, used as a default for any platform/appdescription- as part of default preview textlang- 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 yourtitletagog:description- an override for yourdescriptiontagog:url- the canonical URL for the page, with no extra variables like campaign referrer infoog: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 blogog:type- usewebsitefor info pages, andarticlefor blog posts, with more options availableog:locale- an override forlangtag
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.
Text should not be a part of the image since the thumbnail image could be shown really small that it would be illegible, or cropped in a way you can’t account for.
1200x630pixels is the standard image size- Images can get scaled and cropped depending on the platform/app
JPEG,GIF, orPNGformats, withWEBPstarting 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. Use the apple-touch-icon meta property with an image of at least 180x180 pixels. You can also create a preview thumbnail version of it to use as a backup for all pages on your site.
Here's an example of this page's metadata used for sharing:
<html lang="en">
<head>
<meta charset="utf-8">
<title>Essential metadata for sharing a page - Blocks Edit</title>
<meta name="description" content="The metadata options you need for social media and other apps.">
<meta property="og:title" content="Essential metadata for sharing a page">
<meta property="og:description" content="The metadata options you need for social media and other apps.">
<meta property="og:url" content="https://blocksedit.com/content-code/designing-metadata/">
<meta property="og:image" content="https://blocksedit.com/content-code/img/metadata-sharing-examples.webp">
<meta property="og:site_name" content="Design Workflow Blog">
<meta property="og:type" content="article">
<link rel="apple-touch-icon" href="https://blocksedit.com/img/appicon.png">
Blocks Edit will pick up the metatags you use in your theme and allows changing them for each page.
