Add OGP Tags to your website
This script lets you quickly add OGP (Open Graph Protocol) tags to your website.
What is "OGP" you ask? Well, the official OGP website says:
The Open Graph protocol (OGP) enables any web page to become a rich object in a social graph. For instance, this is used on Facebook to allow any web page to have the same functionality as any other object on Facebook.
Ok, that's nice... But for our purposes here, all you need to know is that OGP tags are what Facebook use to display information about your website whenever a link to your site is shared.
Installation & Basic Usage
Download the latest version of this script to your server (or check it out from Github)
ogp-tags/ogp.config.phpand set the default values for your site
<head>tag wherever you want the tags to be shown:
<?php include('ogp-tags/ogp.php'); ?>
Setting Unique Tags for Each Page
If you use this script in a global or shared/included file, such as a "header", then you can set unique values for the OGP tags for each page. All you have to do is set the variable(s) before you include
ogp.php. For example, the following will change the "title" and "description":
<?php $ogp_title = "The title for this page"; $ogp_desc = "The description for this page..."; include('ogp-tags/ogp.php'); ?>
$ogp_titleThe title of the page
$ogp_descThe description of the page
$ogp_imgThe [full URL to the] image you want to use
$ogp_typeThe type of content (usually "website")
$ogp_urlThe URL of the current page
$ogp_fb_appidThe Facebook App ID for your site (if required)
$ogp_fb_adminsThe Facebook Admin(s) for your site/app (if required)
Protip: don't set
$ogp_url and the URL of the current page will automagically be used.
Tips and Other Information
Images - Facebook say that images should be no smaller than 50px by 50px, and have a maximum aspect ratio of 3:1. However, recently the Facebook URL Linter returns a warning if the image is smaller than 300px wide. I tend to have the best results when using square images that are 300x300. Your results may vary.
Debugging - After you've added the OGP tags to your site you can enter your URL into Facebook's URL Linter to make sure the tags are being read, and that you're happy with the results. The URL Linter will also show you any errors or warnings that may have been encountered while processing your OGP tags.
Clearing Facebook's Cache - When you enter a URL into Facebook's URL Linter it appears to clear/update any cached information that Facebook might have for that URL. This is handy if you've made changes to a page, but you aren't seeing those changes when you share the page on Facebook.
Learn More - To learn more about the Open Graph Protocol check out the following links: