Many developers may add Social Media sharing buttons on pages across their projects, such as blog posts or special content pages that people may find useful when posted on the likes of Facebook, Twitter or LinkedIn. While these buttons are fun and often times important to add, it is important to make sure you include the required meta tags the social sites use to load site data that makes a "card" for each page.
Social Media Card Example
Social Media Meta Tags
The goal of this blog post is to give you the 5 Minimum Meta Tags that must be used to allow your page to be shared across all social media platforms, while keeping your code as DRY as possible.
Each social media site looks for a different (and proprietary) set of <meta> tags within your specific pages HTML source code. They use their own particular required tags to fill in the appropriate card data such as: an image, a title, a description, and a link. Each social media platform can have a range of individualized tags depending on how you would like the page to look when shared, but the goal of this blog post is to give you the 5 Minimum Meta Tags that must be used to allow your page to be shared across all social media platforms, while keeping your code as DRY as possible.
Which Tags Are Required
Each page that you wish to control the appearance of when shared on a social media platform requires at a bare minimum these meta tags for this information:
- Image ( Image tag must include the full url to the image. )
- Title
- Description
- Link ( Link tag must include the full url to the page. )
Facebook, LinkedIn, Twitter
These three social media platforms all allow for the use of Open Graph og: meta tags, which means us developers only need to include each tag one time to fill in the data across all platforms.
<meta property="og:title" content="Kyles Cool Blog Post Title">
<meta property="og:description" content="A blog post description that blows people away.">
<meta property="og:image" content="https://kyles-example-site.com/thumbnail.jpg">
<meta property="og:url" content="https://kyles-example-site.com/blog/example.html">
Twitter Specific
Twitter requires the use of one additional tag so it knows to adhere to the image ratio used by both Facebook and Linkedin (Twitter requires this image to be less than 1mb in size).
<meta name="twitter:card" content="summary_large_image">
Additional Considerations (For Accessibility)
The following two tags can be useful to include in your meta data if you are wanting to keep your shared social card ready for an accessible users needs.
<meta property="og:site_name" content="Kyles Cool Blog">
<meta name="twitter:image:alt" content="image alt text">
Putting it All Together
The following meta tags should be used on each page on your site that you as a developer would like to control the look and feel when it is shared on social media. These are the consolidated tags that will allow your page to be shared with proper images, titles, and descriptions across all social platforms, while allowing your code to remain as DRY as possible.
// Bare Minimum
<meta property="og:title" content="Kyles Cool Blog Post Title">
<meta property="og:description" content="A blog post description that blows people away.">
<meta property="og:image" content="https://kyles-example-site.com/thumbnail.jpg">
<meta property="og:url" content="https://kyles-example-site.com/blog/example.html">
<meta name="twitter:card" content="summary_large_image">
// Optional Additions for Consideration
<meta property="og:site_name" content="Kyles Cool Blog">
<meta name="twitter:image:alt" content="image alt text">
Additional Resources
Facebook Card Debugger
Twitter Card Debugger
LinkedIn Card Debugger
Dev.to: Make Your Website Social Media Card-able on Twitter, Facebook and More
CSS-Tricks: The Essential Meta Tags for Social Media
Top comments (0)