Writing articles on your website is a great way to improve traffic. Quality articles often get passed around on social media (like Twitter and Facebook). Social Media Meta Tags can help you articles look more visually appealing, and thus get more clicks on social media.
By default shared articles may look like this...
With social media meta tags, articles look more like this...
Here's the Code:
Minimum Social Media Tag Template (for Articles)
<!-- Twitter Card data --> <meta name="twitter:card" value="summary">
<!-- Update your html tag to include the itemscope and itemtype attributes. --> <html itemscope itemtype="http://schema.org/Article">
<!-- Place this data between the <head> tags of your website --> <title>Page Title. Maximum length 60-70 characters</title> <meta name="description" content="Page description. No longer than 155 characters." />
<!-- Schema.org markup for Google+ --> <meta itemprop="name" content="The Name or Title Here"> <meta itemprop="description" content="This is the page description"> <meta itemprop="image" content=" http://www.example.com/image.jpg">
<!-- Twitter Card data --> <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:site" content="@publisher_handle"> <meta name="twitter:title" content="Page Title"> <meta name="twitter:description" content="Page description less than 200 characters"> <meta name="twitter:creator" content="@author_handle"> <!-- Twitter summary card with large image must be at least 280x150px --> <meta name="twitter:image:src" content=" http://www.example.com/image.html">
<!-- Update your html tag to include the itemscope and itemtype attributes. --> <html itemscope itemtype="http://schema.org/Product">
<!-- Place this data between the <head> tags of your website --> <title>Page Title. Maximum length 60-70 characters</title> <meta name="description" content="Page description. No longer than 155 characters." />
<!-- Schema.org markup for Google+ --> <meta itemprop="name" content="The Name or Title Here"> <meta itemprop="description" content="This is the page description"> <meta itemprop="image" content=" http://www.example.com/image.jpg">