HTML Social Media Tags

Even if there is no social media share widget on the page (and especially if there is) people may attempt to share the URL anyway, directly in Facebook, Twitter, Pinterest, Google+, etc. If we want direct shares to appear nicely on social sites, we need Social metadata tags.

Page Type

This determines the type of page to be shared. Regular pages should use “website” while news and blog posts should use “article”.

<meta property="og:type" content="website" />

Account IDs

<meta name="twitter:site" content="@websightdesign" /><!-- Twitter @username -->
<meta property="fb:admins" content="Facebook numeric ID" /><!-- Facebook numeric account ID -->

Site Name

Determines the name of the site to be used when sharing the page.
This tag isn’t always needed as the name of a site will not appear when sharing but it is still useful to include.

<meta property="og:site_name" content="Sounds True" /><!-- FB/Open Graph -->

Page Title

<meta property="og:title" content="Awake at Work" /><!--FB/Open Graph -->
<meta itemprop="name" content="The Name or Title Here"><!-- -->
<meta name="twitter:title" content="This is the title that will display in a tweet" /><!-- Twitter -->

Page URL

This tag is here to specify which URL this content comes from.
There could be instances where the same content will be on several pages.

<meta property="og:url" content="h" /><!-- FB/Open Graph -->
<meta name="twitter:url" content="URL to be used in the card" /><!-- URL at the top of the Twitter card. -->

Page Images

This tag helps site owners choose exactly which image to use. It is useful for pages lacking images.

<meta property="og:image" content="" /><!-- FB/Open Graph -->
<meta itemprop="image" content=""><!-- image. -->
<meta name="twitter:image" content=""><-- Twitter Summary card images must be at least 120x120px -->

Page Description

Use this tag to customize the summary (description) that will appear on a Twitter Card. It should be shorter than 140 characters.

<meta property="og:description" content="How Can I Realize My Full Potential?"/><!-- FB/Open Graph -->
<meta itemprop="description" content="This is the page description"> <!-- -->
<meta name="twitter:description" content="Insert the exact page summary of the page and it will be shown as is on Twitter" /> <!-- Twitter -->


h3>More Resources