How to make the perfect social media sharing image - part 5 Essential Meta Tags

I have made several passes at improving the logic that Galaxie Blog uses to auto-generate the tags, and will share my experience with you. If you are using Galaxie Blog, the auto-generation of these tags is done for you.

Each social media site has its own rules for generating the meta tags. Facebook prefers open graph tags, Twitter can use the open graph tags, but it has a slew of its own proprietary tags, and Google +, LinkedIn, and Pinterest prefer schema markup tags, which I will not cover here.

Open Graph Tags

The following open graph tags are essential for Facebook

<meta property="og:image" content="URL to the social sharing image.">
<meta property="og:site_name" content="The site name (ie Galaxy Blog). " />
<meta property="og:url" content="The URL to the article" />
<meta property="og:title" content=" Must be 25 characters or less, especially for mobile" />
<meta property="og:description" content="Should be up to two sentences long, but under 30 characters for decent mobile rendering" />

The og:image:height and og:image:width tags are helpful, but not necessary. Facebook will correctly determine the proper image size as long as you stay within the Facebook recommendations.

Essential Twitter Tags

<meta name="twitter:card" content="summary_large_image">Use 'summary_large_image' if you're following along with this article
<meta name="twitter:site" content="@Site or article URL">
<meta name="twitter:title" content="The title of your site or article">
<meta name="twitter:description" content="Description, should be less than 200 characters">
<meta name="twitter:image" content="URL to the social sharing image.">
In the next article, I will go over some useful validation tools and share some tips and tricks with that I found.