Remember the Meta Tags
The devil is in the details.
Imagine. You work long and hard on your website/web app/blog post. You slave over the details, the pixels, the wordsmithing.
You hit deploy. You publish your content. You share to twitter. You share to Facebook. What shows up in that post on Facebook? What does that tweet card look like when expanded? And most importantly, what shows up when someone searches for it on Google?
An often overlooked detail is how your content will displayed by social networks and search engines that parse your page for information about what it is you put out to the world to see.
Letting these services know what a page is about is actually really simple and can be achieved with a few lines of code.
Meet our friend the <meta> Tag
At Shelby.tv we recently reworked the pages that get shared out of our app. A user wants to share a video with someone, they get a link like this: http://shl.by/q7x
This is a really simple page. It contains a single video with my thoughts on this Arcade Fire video.
In the HTML of this page there are two main parts in our eye.
- The Head
- The Body
The <meta> tags live in the head and are responsible for telling other services something about what lives on this webpage.
I would say there are 3 types of meta tags that we deal with:
- Open Graph Tags
- Twitter Card Tags
- General Tags
Below I will go into a little detail about what is needed for each and what each does for you and your content.
Open Graph (OG) Tags
First, if you have one, you should include your FB App ID:
<meta property=”fb:app_id” content=”115071338568035">Other OG tags you’ll want to include are: site_name, type, url, title, description, and image. These are the basics. Below is what OG tags look like from the video I shared above:
<meta property="og:site_name" content="Shelby.tv">
<meta property="og:type" content="video" />
<meta property="og:url" content="http://shelby.tv/henry/shares/52499702b415cc7591005932" />
<meta property="og:title" content="Arcade Fire - Here Comes the Night Time shared by Henry Sztul (henry) on Shelby.tv">
<meta property="og:description" content="This is 22 min of awesomeness!" />
<meta property="og:image" content="http://i1.ytimg.com/vi/_fFAKrIntzY/0.jpg" />If you post this link into the Facebook compose box you’ll see a nice representation of that video page rendered in Facebook (image below). When someone shares a Shelby video on Facebook, the video’s thumbnail is visible, what that person said about the video is there, and clicking anywhere brings people straight there.
Thanks <meta> tags!
Twitter Card Tags
Twitter implemented a very similar structure to Facebook for their meta tag parsing. In fact, you can almost use the exact same meta tags as listed above for Twitter. Bonus!
You will want (and need) to add a few more tags to make things “just work” for Twitter cards:
<meta name="twitter:card" content="player">
<meta name="twitter:site" content="shelby">You just need to let twitter know “who” you are (via the twitter:site tag) and “how” to represent your data in the Twitter ecosystem (via the twitter:card tag).
My buddy Vincent tweeted this video yesterday, below is how the Twitter card looks from Twitter.com
General Meta Tags
Other sites parse information from your sites meta tags as well (*cough* Google), so its important to have a few other’s specified as well.
<meta name="description" content="This is 22min of awesomeness!" />
<title> Arcade Fire - Here Comes the Night Time shared by Henry Sztul (henry) on Shelby.tv</title>I know the last one isn’t techincally a <meta> tag, but hey, its important, so I’m including it here.
Here’s how Google see’s some of our content with all these meta tags:
In general Open Graph tags have become pretty ubiquitous and are parsed by most services that parse content on the behalf of users so at least make sure you have the basics in place.
You can lean more about the specifics around Open Graph tags and Twitter Card tags here:
People will be a lot more inclined to dig deeper into your content if they know more about what its about.
UPDATE: And how meta, here is the Twitter card for this post:
Let me know if you have any tips of your own or if any of this has been helpful.
You should follow me on twitter here.
