Open Graph Meta Tags
Installing the Open Graph Meta Tag add-on creates the meta tags used by Facebook to summarize a page on a site.
When a site user clicks the Facebook Like or Share button on your page, Facebook creates a short summary of the page within their feed. You may also copy and paste a link from your website to a page on your Facebook account. This information (headline, text, image) come from these meta tags.
Once installed, pages maintain its specific set of META tags automatically from information set on the page record.
To learn more about how Open Graph is integrated into Facebook, click here.
To setup the Open Graph system on your site
- Login and click on ADMIN, MANAGE ADD-ONS, and then OPEN GRAPH META TAGS. Next click on OPEN GRAPH SETTINGS.
- On the FACEBOOK TAB, Set the Facebook Admins field. This can be comma separated list of Facebook Admin Ids. To get your Facebook ID follow the instructions in this video. A Facebook Admin is allowed to do the following:
- Without this property you'll lose admin right on the Open Graph Facebook Page
- When users likes your website's page, it'll generate an Open Graph Facebook Page:
When users will try to go on it (by clicking on publications, or searching), it will redirect to your website's page.
- Publish status updates to users news feed, create events, or add pictures related to this page.
- On the OPEN GRAPH tab, set the Site Name field. This site name is a human-readable name for your site that is sent out in every open graph meta tag.
- On the Open Graph tab, set the Default Page Image. An image is required by Facebook to use Open Graph META data from a page. If a Page Content record has a Page Thumbnail (Features Tab) set in the record, this image will be sent out in the Open Graph META tag. If no Page Thumbnail is set, the META tag will include the Default Page Image uploaded on the Open Graph Settings form. If neither the Page Thumbnail nor the Default Page Image is detected, the standard Contensive logo is sent out in the Open Graph META tag.
NOTE: The image must be at least 200 pixels by 200 pixels.
To setup the Open Graph META tags for a page
- Login, turn on Edit and click the edit icon for the page.
- On the features tab, upload an image for the Page Thumbnail
- On the Meta Content tab, set the page title and meta description.
Clearing the Open Graph cache for a page on Facebook
Once Facebook pulls in Open Graph META data for a page, it is cached. That cache will reflect any META data collected until it is cleared. Anytime META data that contributes to the Open Graph META tags of a page is changed, the cache must be cleared in order for those changes to appear. Facebook has provided the following tool that will both debug your Open Graph META data as well as clear its cache for a single page. Click here to access Facebook's debugging tool.
Integrating the Open Graph Addon in Other Addons
The open graph addon sets the open graph meta tags using two processes. At the beginning of the page it sets several document properties. Then at the end of the page it sets the respective meta tags using those document properties.
If an addon wants to set open graph tags, it just needs to set the document properties when it runs, over-riding the values set. An example might be a blog or article list where the entire addon is on one page, but each article needs it's own URL and Facebook like.
Determine the page's LinkAlias using cp.doc.getPageLink() with the querystring needed.
The page properties are as follows:
- cp.doc.setproperty( "Open Graph URL", (the custom URL for this page))
- cp.doc.setproperty( "Open Graph Title", (Title for this page or article) )
- cp.doc.setproperty( "Open Graph Description", (Description) )
These values will then be used