Page History
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
- Go to your Website > HTML Head
- Click Edit
- Add in the Open Graph tags
- Click Save.
In the Page Header HTML add in Open Graph tags like in the examples below:
This is for 13th Street Cat Rescue
Panel |
---|
<meta property="og:site_name" content="13th Street Cat Rescue"/> |
This example is for 2nd Chance Dog Rescue
Panel |
---|
<meta property="og:site_name" content="2nd Chance Dog Rescue"/> |