Social media -- and more specifically Facebook -- is a huge driver of traffic to websites nowadays, so it's increasingly important that sites are optimized for sharing on the social network. To determine what information will be shown when a site is shared, Facebook first checks for the existence of special meta tags that follow the Open Graph protocol.
These tags provide information to Facebook about the page's title, preview image, url, description, in addition to numerous other properties, which will in turn be used when Facebook users do various actions like sharing a website, posting a link on a friend's wall, or clicking the "like" button on a website.
Additionally, these tags tell Facebook who the administrators are for the website, in turn giving them the ability to make changes to the app on Facebook, moderate Facebook plugins like Comments, and access Insights for the site.
One tip before we go through setting up the tags -- a page you will find to be invaluable as you set up Facebook open graph tags is the URL Linter tool. This page gives you the ability to see a preview what a page will look like when shared, circumventing the need to irritate your friends by constantly sharing pages that you are testing.
Additionally, when a website is shared, Facebook caches the properties for the page for 24 hours. This means that any changes we make to the tags won't be reflected for a day unless we have a way to force Facebook to re-cache the page. Fortunately, every time we add a url into the linter the page properties are re-scraped and updated.
Lastly, the linter will tell you any errors that have been made when setting up the tags and offer suggestions on how to fix them.
Now that you have a brief background on what the open graphs tags are used for, let's do a quick run-though of what each tag is and how they can be set up in Hifi.
og:title
In the photo above, we can see that the part outlined is where the og:title tag will be shown. Unless the home page is being shared, we will want the title to match what we are already using in the meta title tag, On the home page we will only want to include the site title, since we do need the title of "Home" or "Home Page" to be included.
og:type
Next up is og:type, which won't show up in the preview, but tells Facebook what type of website we are sharing. For example, a website for a political candidate may be designated as "politician" and a non-profit could be designated as "non_profit". The full list of options can be found here.
In Hifi, the code will first check to see if the Hifi page type is a post and if it is, will set the og:type as "article". If it isn't, we will want to use the type of website that we found by looking at the list linked above. In this example, I have the og:type set to "website".
og:url
Now we have og:url, which tells Facebook what the url is of the page we are sharing. Even if you redirect one to the other, Facebook differentiates between www and non-www, so make sure that this is accurate so that the wrong url isn't shared and Insights are accurate. Additionally, the url will show in the preview box.
og:image
The og:image tag is used to tell Facebook what image to use in the preview. Facebook requires this to be larger than 50px by 50px and encourages it to be larger than 200px by 200px and have a square shape. Since this is what will be important in catching people's eyes as they browse a feed, be sure to spend some extra time customizing this.
In the Hifi theme, we will first check to see if we are on the homepage. If so, I have it set to check for an image called "logo.png", but this can (and should) be customized to a specific preview image that would catch someone's eye. For example, this is an image we used on a microsite that was launched a few months ago.
If we aren't on the home, the code will check to see if an image was uploaded to the media section of the page. If so, it will crop and resize the first image to a 300px by 300px square. If there isn't any media, Facebook will give the option to select a preview image from the images on the page.
Lastly, remember that the image must use an absolute path in order to work correctly.
og:site_name
The og:site_name tag is used to tell Facebook what the name of the site is that the url is shared from.
og:description
For the code, we will first check to see if a meta description has been set for the page. If there isn't, we will move on a check to see if there is an excerpt set. Lastly, since something is better than nothing, the code will truncate the content to 160 characters and add an ellipsis at the end. The amount of characters displayed varies depending on where the page preview is on Facebook, so it's best to keep it shorter and have more important information near the beginning. Facebook suggests keeping the description to one or two sentences.
fb:admin and fb:app_id
Finally, we have fb:admin and fb:app_id. While these tags technically aren't part of the Open Graph Protocol, they are important and necessary to tell Facebook who the admins are for the site. Admin privileges allow access to the Insights for the site in addition to other on-site actions, like moderating a Facebook Comment Box plugin.
Assigning admin privileges can be done two ways:
Assigned directly by adding the user's Facebook id number in the fb:admin tag (multiple ids should be comma-separated)
Creating a new Facebook app and adding the user as an admin to the app.
Which approach you will want to take is up to you, but on a smaller site you will find that setting up a separate app for the site is overkill and simply adding fb:admin is adequate. Alternatively, one thing to keep in mind is that the user ids will be visible in the page source, so instead assign admin access through an app if privacy of admins is important.
Optional tags
In addition to the tags above, there are a wide range of additional optional open graph tags that can be used if they fit the content of your site. To learn more about these, visit Facebook's page on Open Graph.
Full Code