DEV Community

Cover image for Barebones metadata for page sharing
Ovi Demetrian Jr
Ovi Demetrian Jr

Posted on

Barebones metadata for page sharing

Metadata for when a page is shared has become the most relevant when it comes to setting up meta tags for your page as it allows controlling how social media platforms output a link to your page. Along with texting and chat apps, project management tools, and more. Here are the basics that should apply for all of them.

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

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

Note that you don't need to include og:title, og:description, or og:url tags if you want to just use the content from the classic page tags.

And these are the guidelines for the preview thumbnail:

  • 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

Here's a working example along with additional options of what you can do.

Top comments (0)