Why does my website look horrible when I share on Facebook or Twitter?

This week, we would like to take this opportunity to answer a very popular question that we get asked at least a few times a week from a number of different people.

When sharing a post on any social network, typically you can paste a URL and a preview of some sort will show up like so:

It doesn’t matter if it is Buzzfeed or the New York Times, all URL’s are treated the exact same way from Facebook.

But sometimes you’ll share a URL and it will just look downright horrific. The image is small, there is a weird preview, and there is no description or other times it will be a large image but cut off at the top or bottom.

How Facebook Preview’s Posts

Before we go into a solution, let’s illustrate exactly what is ideal, and what is not.

This right here is what we call a worst case scenario. There is no image preview, the description is incomplete, and is cutoff.

This is a slightly better scenario. Here we have a great title and description, but the image is a small thumbnail, and it really isn’t the best choice of image.

In this example, we see a full sized image, a great title and a cutoff description. The New York Post almost does it right here, except the image is cut off at the top!

Lastly, a perfect example. An awesome image that is relevant and the perfect size, a great title and a great description. But why are some Facebook posts perfect, and others not?

How Twitter Preview’s Posts

On Twitter, there are actually a few acceptable ways to display a URL preview. Before we get there, lets show an example of a non-ideal scenario. In this case, we have someone who shared a URL, but it did not display a preview.

In this example, we can see that the New York Times shared a little quip, along with a URL. Being that the web developer of New York Times knew what they were doing, it allowed Twitter to properly display a preview. This preview displays a thumbnail image, the name of the website, a title and a description.

In a very similar example, we see another Twitter preview except this time it is a large image along with a title and a preview. The only difference is that this preview does not show the name of the website.

Ok, so how do I fix this?

The first piece of advice I’d like to dole out is this:if you are using a modern web framework such as WordPress, Shopify or Drupal the process of making your website look better when sharing on social networks is going to be much easier. It’s not that Facebook

The simple answer to all of this is adding structured data to your website. For the purposes of this tutorial we will be talking about two specific types of structured data:

Facebook’s OGP or “Open Graph Protocol”

Twitter’s “Twitter Card” markup

This might sound complicated, but it is really quite easy. If you know how to edit a webpage, you can implement this markup within a few quick minutes.

To implement Facebook markup, simply add this code into the <head> of your website:

Twitter has a bunch of different “types” of previews they can display such as app and image previews but for the purpose of this post we’ll just show the most popular type which is the “summary” card.

A few caveats:

The code I furnished above is the bare minimum. For more information read the full documentation for Facebook and Twitter.

Facebook, LinkedIn and other social networks all have different standards for image sizes, titles and descriptions. Facebook for example requires a minimum image size of 600 x 315 while LinkedIn’s minimum image recommendation is 80 x 150 pixels

Facebook OGP: works on Facebook, LinkedIn, Google+ and Pinterest

Twitter Cards: only works on Twitter

If you swap out your code after you’ve already shared it on Facebook, Twitter etc, it may take time for it to update.

Again, different social networks have different standards. LinkedIn for instance is much more focused on plain text, while Pinterest and Facebook are much more “image” focused.

Even though LinkedIn might not have a huge image preview, that is no reason not to add the appropriate meta tags. My final piece of advice on this matter: don’t let social networks choose for you. Although certain social networks might do their best to display the “best” preview, I’ve found that they do a very poor job. Take the extra 2-3 minutes to make your posts look better and your clients will thank you for it.

What happens if I do nothing?

Doing nothing definitely is an option, but not a good one if you care about your website. The amount of time it takes to implement these chances are nominal compared with the potential negative consequences of your customers seeing a poor social network preview.

“But I don’t use Facebook / Twitter.”

Just because you don’t use Facebook or Twitter, doesn’t mean your customers don’t. I personally don’t really use Facebook but month after month I see hundreds of website visitors come in from Facebook. Same with Twitter. Even if you don’t think your customers use it, it won’t hurt you to have this very simple code enabled.

If you do nothing, there is a good chance your website could come off looking like crap. Think about these possible scenarios:

a potential customer wants to share your website on Facebook to see if anyone has experience with your company

a current customer wants to recommend you to a Facebook or Twitter group

a current customer wants to share a product / blog post to Facebook or Twitter

In all of those scenarios, your website will either come out smelling like roses or looking horribly.

In the world of internet marketing there are so many things you can’t control, take control over the things you can.

WordPress: a huge shortcut

Good news, if you are a WordPress user you don’t have to worry about meddling with code or meta tags. WordPress has some sweet plugins that does all the footwork for you. My personal favorite is SEO Ultimate. Yoast is probably one of the most popular options as well. Both options basically do the same thing. With these plugins, all you have to do is scroll down to the bottom of the post that you want to markup (the one you want to look good on Facebook) and fill in the blanks, it is that easy.

This is yet another reason why using WordPress, or most content management systems for that matter is so great.

The same advice is true for a number of other modern web frameworks such as Drupal, Shopify, Joomla, Prestashop, Open Cart, and a bunch more. They all have their own systems, plugins, addons, etc that enable OGP and Twitter Cards and vary very little from one framework to another.

Closing thoughts

As an SEO agency, this is something that we provide to all of our clients from the ground up. This means that we include this functionality in all of our web design and web development projects, optimize in our SEO campaigns, and include within our content marketing services. Making social network previews look nice is just one part of a greater whole in the content marketing realm. Optimize for it and your clients will love you, ignore it and your website will come across looking sloppy. Good luck!

Patrick Coombe is the founder and CEO of Elite Strategies Llc. Patrick takes a hands on approach to managing Elite Strategies and loves to get involved with technical projects relating to clients inbound marketing needs.

Mike – wow! Fantastic tip, will definitely check this out. We have this issue all of the time and even have customers call and complain sometimes when photos show up incorrectly. This will definitely help us serve them better.

Another tool that I have found very useful is Facebook’s OpenGrah Object Debugger. There are times when all of the elements you’ve outlined are in place, but for some reason or another Facebook gets a bad crawl of the page and it can screw up the data and how it displays on Facebook. You have to be logged in to your Facebook account to use the tool, but it allows you to fetch new scrape information from the page in the event there are issues with the initial crawl. Additionally it will show you if there are any errors with your OpenGraph tags. You can check it out and use it here. https://developers.facebook.com/tools/debug/og/object/