Skip to content

Latest commit

 

History

History
37 lines (33 loc) · 2.17 KB

head-social-tags.md

File metadata and controls

37 lines (33 loc) · 2.17 KB
Raw
title shortTitle type language tags cover excerpt dateModified
Recommended social tags for HTML head
HTML social tags template
story
html
metadata
head
boutique-home-office-2
Ensure your HTML documents can be shared on social media by including these lines in your `<head>` element.
2023-01-22

Social media play an important role to any content's success. To ensure your content is properly shared on social media, you should include some essential tags in your <head> element:

<head>
  <meta property="og:title" content="Page Title">
  <meta property="og:description" content="Page description. No longer than 155 characters.">
  <meta property="og:image" content="https://samplesite.com/image.jpg">
  <meta property="og:site_name" content="Sample Site">
  <meta property="og:url" content="https://samplesite.com/page.html">
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:title" content="Page Title">
  <meta name="twitter:description" content="Page description. No longer than 155 characters.">
  <meta name="twitter:image" content="https://samplesite.com/image.jpg">
  <meta name="twitter:site" content="@samplesite">
</head>

The above snippet contains OpenGraph and Twitter tags. OpenGraph tags are used by Facebook and other social media platforms to display a preview of the page when it's shared. Similarly, Twitter uses Twitter tags for the same information. Here's a breakdown of each one:

  • The og:title and twitter:title meta tags are used to display the page's title in the preview.
  • The og:description and twitter:description meta tags are used to display a short description of the page in the preview.
  • The og:image and twitter:image meta tags are used to display an image in the preview.
  • The og:site_name meta tag is used to display the name of the site in the preview.
  • The og:url meta tag is used to display the URL of the page in the preview.
  • The twitter:card meta tag is used to display a preview of the page when it's shared. Available values are summary, summary_large_image, app and player.
  • The twitter:site meta tag is used to display the Twitter handle of the site in the preview.