Marketers create a lot of content. Yes, content is king, but a king is powerless without followers. So, what’s the first thing that comes to mind when you want to reach a broader audience with your awesome new post? Sharing on social media, of course. The huge audiences of Facebook and Twitter make them the best platforms for sharing, but do you know how to optimize that outreach potential?

This article will show you how to optimize your website for social networks without installing third-party plugins.

Getting Started

In the end of each page there is a panel with SEO settings. All the parameters will be explained along the way.

What is an Open Graph?

Facebook's Open Graph protocol allows for web developers to turn their websites into Facebook "graph" objects, allowing a certain level of customization over how information is carried over from a non-Facebook website to Facebook when a page is "recommended", "liked", or just generally shared.

Now, other social media sites also are taking advantage of social meta tags. All of the other major platforms, Twitter, LinkedIn, and Google+, recognize Open Graph tags. Twitter actually has its own meta tags for Twitter Cards, but if Twitter robots cannot find any, Twitter uses Open Graph tags instead.

Why should I care?

Social media sites are the major drivers of most of the web’s traffic. The tags can affect conversions and click-through rates hugely. For example, have you ever shared a link on Facebook only to find that the thumbnail was missing, or there was a totally different picture than you expected?

This is how a link is displayed by default:

And this is optimized version, with custom image, title and description:

Custom title for the post

As you might guess, this is how you define your content’s title. Keep in mind that the text shown on a Facebook feed is in bold and extremely eye-catching. It must be compelling, just like a good post title.

There is no limit on the number of characters, but it’s best to stay between 60 and 90. If your title is longer than 100 characters, Facebook will truncate it to only 88!

Example:

Your eye-catching title here

Custom description for the post

This is where you describe your content, but instead of it showing on a search engine results page, it shows below the link title on Facebook. Unlike a regular meta description tag, it won’t affect your SEO (So, don’t spend too much time figuring out how to sneak in keywords.). However, it’s a good idea to make it compelling because you want people to click on it.

Example:

Your entertaining and descriptive copy here, if your meta description is good, use it.

Custom image for Facebook/Pinterest

This is the most interesting setting for many marketers, because a picture always helps content stand out. This is how you ensure that a particular thumbnail will be shown when your page is shared. It can be very helpful for your conversion rates.

Make sure you set the image you choose, otherwise Facebook will show something stupid like an unwanted ad banner scraped from the page, or nothing at all (as below). We definitely don’t want that!

The most frequently recommended resolution for an image is 1200 pixels x 627 pixels (1.91/1 ratio). At this size, your thumbnail will be big and stand out from the crowd. Just don’t exceed the 5MB size limit.

If you use an image that is smaller than 400 pixels x 209 pixels, it will render as a much smaller thumbnail. It’s nowhere nearly as eye-catching.

Check Open Graph Tags

To make life easier, Facebook has created a tool called Open Graph Object Debugger (URL Linter). It has two very helpful functionalities.

First, when you type in the link you want to check, it returns any errors and suggestions for OG tags, if there are any. You also can check what the image looks like, what your description is, and so on.

Second, it clears the Facebook cache. Imagine this: you post a link to Facebook, but then you see a mistake in the thumbnail, so you go back to your site and adjust the OG tags, and you post it again on Facebook.

Probably, nothing will happen. The thumbnail will stay the same. This is because of the cache. The Facebook OG Debugger will refresh the cache on your links after any adjustments, so remember to use it each time.

Twitter Cards

Like Facebook’s Open Graph tags, Twitter Cards let you stand out from the crowd of tweets.

Request Approval from Twitter

Keep in mind that, before you can fully benefit from Twitter Cards, you need to request an approval for your page from Twitter. Fortunately, this doesn’t take much time and can be done easily using their Card Validator. Once you get approval, Card Validator serves exactly the same purpose as the Facebook OG Debugger, allowing you to check your links before you commit.