Open Graph tags: Make Your Website a Semi-fanpage & Get Permanent Facebook Links
Add facebooks open graph meta tags to your website, to get permanent links from Facebook and to make your website a semi-fanpage that can be liked from your website.
Most websites use facebook’s like-button, but forget to include open graph meta tags. The implementation without open graph tags is already usefull, as the website gets a link everytime someone clicks on it (the user who clicks on the like-button will automatically post a link to the website on his wall, which his friends might see in their newsfeed). But by adding open graph tags in addition to a like-button, the like-button gets even more valuable: The user who clicks on the like-button will not only post a link on his wall, but additionally a permanent link will be added to the users profile-page (and the user does not even notice). The link on the profile page will be placed in the category, which has been defined via the open graph tags (see below).
Besides, you will get access to your “likers”, as your website will become an “administrative fanpage” (if you follow the steps below). You might have wondered if it is possible to combine a like-button for your website with a like-button for your fanpage. This is not possible, but by adding open graph tags, you will be able to see who has liked your page and you can reach your fans, as you will be able to post-status updates to their walls.
This “semi-fanpage” is especially usefull for those who haven’t got the time to run a regular fanpage (e.g. you don’t want to spent time updating your fan page regularly), but still want to be able to get in touch with their “likers”.
This is how you do it:
- Add the open graph tags from below to your website (you can of course add more if you want)
- Remember to define yourself as the Facebook admin (insert your Facebook ID in the last line of the og-tags from below. You can find your Facebook ID by entering your profile on Facebook and looking at the URL e.g. https://www.facebook.com/profile.php?id=123456789 – just copy the numbers and insert them to the fb:admins open meta tag.)
- Add a like button to your website – you can find the like-button and other Facebook social plugins here: https://developers.facebook.com/docs/reference/plugins/like/
- If everything is on your website, click the like-button. Hereby you confirm that you are the admin of this website.
- Go to Facebook and look under “pages” on the left sidebar. Your website should now appear as a page.
If you want to see who has liked your website, or if you want to send your likers a message (respectively a status update, which will appear in your likers’ stream) just click on your website under “pages”. Now you can update the status of your page or see who has liked your page. In the right sidebar, there should also be a link to Facebooks’ insights, where you can statistics of likes, unlikes and activity of your likers/fans.
Open Graph Tags
These are the basic open graph tags that you should add to your website’s
<head> in order to make your website a Facebook object:
<meta property="og:site_name" content="Soultown" />
<meta property="og:title" content="Soultown | Soultown er et partyband fra København" />
<meta property="og:url" content="http://www.soultown.dk"/>
<meta property="og:description" content="Soultown er et partyband fra København der spiller motown, soul, disco, funk go rhythm & blues til fx. julefrokoster, firmafester, bryllupper og skolefester." />
<meta property="og:type" content="band" />
<meta property="og:image" content="http://www.soultown.dk/img/logo.png"/>
<meta property="fb:admins" content="[your Facebook ID]"/>
You can find all available open graph tags here: http://ogp.me/
The example above shows the open graph meta-tags that I have used for my bands website. If you want your website to show up in a specific category on the users profiles, you just have to define the right open graph type. In my example, I have used the type “band”. As you can see below, this type will place a link to my website in the music category on the Facebook users profiles:
Open Graph Debugging
It is always a good idea to use Facebook’s open graph debugging tool, in order to check if you have inserted the open graph tags in the right way, especially if something does not work as expected:
If you want to see how Google reads your open graph tags you can use Google’s rich snippets testing tool: