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" />
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 theog:url instead of the URL in the Like button code.og:site_name – A human-readable name for your site, e.g., “Kaizen”.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.
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"/> |
This example is for 2nd Chance Dog Rescue
<meta property="og:site_name" content="2nd Chance Dog Rescue"/> |