Making your site “Social Media Friendly”

Google +, Twitter, Facebook and LinkedIn Icons

There’s no hiding from social media these days. Big companies/blogs gotta embrace it with open arms and that involves giving your site the “open arms” it needs to do this too. We can do that with “special” custom <meta> tags! By adding these, we have control over how and what information the social media site uses for summarising the content of our sites. In this post I will show you basic tags you can add to quickly get your site lookin’ swish on social media.

Have you ever shared a/your site and seen a selection of images you’ve used within your post? It basically scrapes all the <img> tags out as a fallback and allows the sharer to have control over which image to choose. But with these custom meta tags your can specify a specific image to use on the social site.

While I’m here sitting in Costa having just one cup of coffee, I share their website on Facebook and I get exactly what you don’t want (sorry guys):

Sharing Costa Website on Facebook

So this isn’t all bad because atleast Facebook is using the <title> and <meta name="description".. as a fallback, but this might not be the case for all social sites, (Twitter for example). However, the image is going to be inconsistent when users share it as they even have control of which image to show.

Now here’s what a social media friendly site can look like when shared on Facebook:

Sharing Starbucks Japan on Facebook

I used the Starbucks Japan site because both the UK and US site have an invalid <meta> tag

I might just head over to Starbucks Japan and have my second cup of coffee in that case.

Let’s get stuck in!

Luckily, Facebook, LinkedIn and Google+ and some others use the Open Graph meaning we can write once and it will work on many:

Facebook, LinkedIn, Google+ and more.

All of these sites use Open Graph


<!-- Open Graph --> <meta property="og:type" content="website"> <meta property="og:title" content="Charlie Walter's Blog"> <meta property="og:description" content="Another Front End Developer's blog site. ???"> <meta property="og:image" content="images/charliejwalter-net.png">

og:type

This tells the site what the URL should be categorized as. For this tag I use website on my homepage and article for blog posts.

Full list of types accepted on Facebook Developer Site.

og:title

This would be the same as the <title> unless you specifically wanted it to be different, so in my case I like to use the URL as my site name but could well be "Charlie Walter's Blog".

og:description

This would be the same as your <meta name="description".. so essentially, a very short description of the website/article etc.

og:image

This would be a URL of an image.

Each site has some recommendations/restrictions, currently Facebook has a minimum size constraint of 200px by 200px and LinkedIn should be at least 80px by 150px.

Give it a whirl!

Once your tags are live, you can use the Facebook Debugger to see what’s wrong/missing etc. Unfortunately, LinkedIn doesn’t provide one but you can test it out easily enough on the site.

Facebook

Sharing charliejwalter.net on Facebook

LinkedIn

Sharing charliejwalter.net on LinkedIn

Google+

Sharing charliejwalter.net on Google+
Now they look swish ??

Twitter

Twitter has specific meta tags with a twitter:{property} convention, they also utilize the name tag rather than the property tag. Here’s what they look like:


<!-- Twitter --> <meta name="twitter:card" content="summary"> <meta name="twitter:site" content="@cjonasw"> <meta name="twitter:title" content="charliejwalter.net"> <meta name="twitter:description" content="Another Front End Developer's blog site. ???"> <meta name="twitter:image" content="images/charliejwalter-net.png">

twitter:card

This tells Twitter which “Card” design we want to use. Twitter has a full list of cards here.

twitter:site

This is the Twitter account we should associate the link with.

twitter:title

This would/should/could be the same og:title and title <meta> tags.

twitter:description

This would/should/could be the same og:description and description <meta> tags.

twitter:image

This would be the URL of an image.

The dimensions and use for this tag depend on the card you are using, so we’ll just stick to the standard for this post.

For a twitter:card of type summary the image should be something generic to the site (e.g. your brand’s logo) and must be a minimum size of 120px by 120px and must be less than 1MB in file size. The image will be cropped to a square on all platforms.

If you want to use a different twitter:card desig,n I suggest looking up type on the Twitter Dev site and looking up which size you should use as I’m sure this might change as the site gets updated.

Give it a Twirl!

Like Facebook, Twitter has a debugger tool.

Unlike Facebook, Twitter doesn’t try to make a card for your “unsocial” website and requires a valid set of twitter:{property} <meta> tags.

Sharing charliejwalter.net on Twitter

Summary

Transforming your site from being socially awkward not only makes your site look really professional but actually make an “impression” on social media.

This is just the very basics though. There is so much more you can do with these social cards, for example YouTube uses the og:type of video which then needs/can have meta tags like og:video:url, og:video:type, og:video:tag etc.

You would definitely get much more engagement if you were promoting an App on the App Store and it was possible to link straight to the store from a Twitter Card… or… play a video straight from the news feed (like how YouTube is great at).

Hopefully this was informative.

??
?