When someone shares a link to your website on Facebook, certain information about your site (or more specifically, the actual link that is shared) is automatically gathered and displayed. For example, if you type www.google.com you will see something like:
This article is going to explain how this process works, and how you can change the image and information that gets displayed about your website.
Where does Facebook get the Information about my Website?
By default, when Facebook gathers the information that it uses for your website it gets the information from:- Title – This comes from the
<title>tag in your website’s source code. - Description – This comes from the
meta descriptiontag in your website’s source code. If you don’t have ameta descriptiontag, then it chooses a blurb of text from the beginning of your site. - Image – This is usually the first image that is found on the page (if there are any) but sometimes it appears to randomly choose images.
The information that Facebook uses is just as I’ve described above:
- The Title “Mike Everhart | Web Designer, Programmer, and Technology Consultant” comes from the
<title>tag. - The Description “Mike Everhart is a web designer, programmer, and technology consultant based out of Memphis, TN.” comes from the
meta descriptiontag. - The image is from a recent blog post that is found on the homepage. As you can see, three images were actually found.
How do I Change the Image and Information that is Displayed?
Facebook has recently implemented OGP, or the Open Graph Protocol. For this tutorial, all you really need to know about OGP is that it gives you a way to provide extra information about your website specifically for use with social networking sites like Facebook.Implementing OGP data into your website consists of adding a few
meta tags to your website’s source code, between the <head> and </head>
tags. OGP has several “properties” that allow you to add detailed
information about your website, but four of these properties are
required:- og:title – The title of the page that you want to display
- og:type – The type of content on the page (more about OGP Content Types)
- og:image – The URL to the image that you want to display
- og:url – The URL to the webpage
1
2
3
4
5
6
7
8
9
| <head> ... <!-- Required OGP Tags --> <meta property="og:title" content="Mike Everhart - Web Designer. Programmer. Geek." /> <meta property="og:type" content="website" /> ...</head> |
- og:description – The description that you want to display
- og:site_name – If your site belongs to a larger network of sites, this tag can be used to identify the “main” site
1
2
3
4
| ... <meta property="og:description" content="The personal blog of Mike Everhart - Ramblings of a sleep-deprived geek, web designer, programmer, and technology consultant." /> <meta property="og:site_name" content="MikeEverhart.net" /></head> |
Testing Your Changes
This is an important step of the process that you should not skip! Once you have added the OGP tags to your website, you should use Facebook’s URL Linter to test your changes. Enter the URL to your website, or the specific page you added the OGP tags to and click the button that says Lint.Not only will this reveal whether you did everything correctly or not, it will also cause Facebook to clear any old information that it may have cached for your site.
Don’t worry if you see an error that mentions “failing to provide a valid list of administrators” there is a 99.9% chance that this does not apply to your website. If you see any other errors, you’ve done something wrong.
The Final Product
Here’s how it looks after I implemented the above OGP tags on my site:
Bonus Tip: Creating the image you want to use
According to Facebook, the image should be at least 50px wide by 50px tall, and should have an aspect ratio of no larger than 3:1. In other words, an image that is 50px wide should be no taller than 150px. The accepted image formats arepng, jpg, and gif.The “optimal” image size will depend largely on the length of your site title and description, as well as your personal preference. I usually like to start with an image that is either 50x150px or 100x100px.
