You are viewing an old version of this page. View the current version.

Compare with Current View Page History

Version 1 Current »

Facebook caches already shared urls/pages for better performance. This causes issues at time when we update the title, picture being shared or the description of the page because Facebook still shows the older version of the page.

Open Graph Tags

 Open Graph tags are <meta> tags that you add to the <head> of your website to describe the entity your page represents, whether it is a band, restaurant, blog, or something else.

More on Open Graph from Facebook:  https://developers.facebook.com/docs/opengraph

and https://developers.facebook.com/docs/opengraph/using-objects

An Open Graph tag looks like this:

< meta   property = "og:tag name"   content = "tag value" />

Open Graph tags to add to your site

  • og:title – The title of the entity.
  • og:type – The type of entity. You must select a type from the list of Open Graph types.
  • og:image – The URL to an image that represents the entity. Images must be at least 200 pixels by 200 pixels. Square images work best, but you are allowed to use images up to three times as wide as they are tall.
  • og:url – The canonical, permanent URL of the page representing the entity. When you use Open Graph tags, the Like button posts a link to the og:url instead of the URL in the Like button code.
  • og:site_name – A human-readable name for your site, e.g., “Kaizen”.

Facebook Debugger Tool

Facebook has a tool called  Debugger  (formerly known as URL Linter). This tool gives us an idea about how a url will be shared on Facebook, what content, which image will be fetched.

https://developers.facebook.com/tools/debug

We can use this tool for any url and it fetches the latest title, description, excerpt and other stuff that will be shown while sharing the link. If you use an already shared URL with this tool then Facebook fetches the latest content, and also updates it cache with the latest content.


Step-by-step guide for adding Open Graph tags to your RescueGroups.org Website

In the Page Header HTML add in Open Graph tags like in the examples below:

This is for 13th Street Cat Rescue

<meta property="og:site_name" content="13th Street Cat Rescue"/>
<meta property="og:url" content="http://www.13thstcats.org"/>
<meta property="og:title" content="13th Street Cat Rescue"/>
<meta property="og:type" content="website"/>
<meta property="og:description" content="San Jose Kitten and Cat Adoptions.""/>

This example is for 2nd Chance Dog Rescue

<meta property="og:site_name" content="2nd Chance Dog Rescue"/>
<meta property="og:url" content="http://2ndchance.rescuegroups.org/"/>
<meta property="og:title" content="2nd Chance Dog Rescue"/>
<meta property="og:type" content="website"/>
<meta property="og:description" content="2nd Chance Dog Rescue, Queen Creek Arizona Dog Rescue, Animal Rescue"/>






  • No labels