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:

facebook preview

 

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.

facebook OGP lacking everything

 

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.

Facebook thumbnail instead of full size 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!

facebook OGP image not cropped

 

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?

facebook OGP perfect post

 

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.

twitter 3

 

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.

twitter no preview

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.

twitter 2

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:

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:

<meta property="og:title" content="Make your Facebook Posts Look better"/>
<meta property="og:image" content="http://example.com/image.png"/>
<meta property="og:site_name" content="Your Website Name"/>
<meta property="og:description" content="By implementing this tag into your website, your Facebook posts will look so much better!"/>

If you play your cards right, something like this will happen when you share a post on Facebook:

facebook open graph

As you can see in the above illustration, the markup on your website will directly correlate to how your website will look on Facebook.

For Twitter, proceed the same way as you did with Facebook, just add this code to your website:

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@delraybeachseo">
<meta name="twitter:creator" content="@patrickcoombe">
<meta name="twitter:title" content="The Title of My Post">
<meta name="twitter:description" content="A detailed description, keep it short and sweet.">
<meta name="twitter:image" content="http://example.org/image.jpg">

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:

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.

linkedin

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:

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.

OGP wordpress Facebook

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
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.
Patrick Coombe
Patrick Coombe
  2 COMMENTS
Analytics Blog Content Marketing Facebook Google+ SEO Social Media Web Development WordPress
  • Written by: Patrick Coombe

    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.

  • Written by: Mike Wilton

    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/

  • Leave a Reply

    Your email address will not be published. Required fields are marked *

    Contact Info

    900 Linton Blvd, Suite 104
    Delray Beach, FL 33444

    Phone: 561-526-8457
    Toll Free: 855-353-8730
    E-mail: info@elite-strategies.com
    Fax: 561-526-8707