All Search and Social Media Meta Tags Starter Template

I often find myself referencing back and forth to different resources, old projects, and searching in Google how to create certain social media meta tags to put in my HTML document’s head. The metadata is constantly changing, and there’s tons of different variations of each kind. So, with that being said, I highly recommend that you double check everything you use from this quick tip to make sure it works for your specific needs. A lot of these will even cross-share the tags. For example, Google+ will actually use Facebook’s Open Graph tags if their available. All in all, the following code is a great start.

The following example is taken from one of our articles. Depending on the the webpage, your meta may be required to change (for example a homepage is different than a single blog post). Checkout our source, it’s a clean and organized reference. I also encourage you to take inspiration from how major sharing dependent sites like Smashing Magazine and New York Times do theirs.

Search Engines / Google

More info

Twitter Cards (Large Image)

Head up! You must visit the Twitter Validator and request approval after setting up your Meta tags.
Official Resource | Debugger

Facebook Open Graph

More info | Debugger

Google+ and / Itemscope

More info | Debugger



Rate this post
Facebook Comments