Using The Meta Data Tab for Images re. Sharing Testimonials to Facebook

Facebook published an informative article here:    https://developers.facebook.com/docs/sharing/webmasters

Though all the pertinent information is in that very informative and detailed article, here are the bare essentials to help you with what we, you and Testimonial Tree, are doing.

Backstory
First, a little backstory, specifically, about why we are doing this at all. Facebook, and, increasingly, other websites, are branding messages, emails and the like with a picture designated by your webmaster, grabbed from your website. If your webmaster does not properly designate a photo using the <meta> tag, then a randomly choosen picture from your website will be used.

The "How-To"
Now, to the practical side: actual meta tag implementation. Here is the breakdown:

<meta property="og:image:url" content="[URL of the image itself]" />
<meta property="og:image:type" content="[image/jpegimage/gif or image/png]" />
<meta property="og:image:secure_url" content="
[secure URL of the image itself. Use this if the image URL starts with 'https']" />
<meta property="og:image:width" content="
[width of image in pixels. It is best to enter both width and height]" />
<meta property="og:image:height" content="
[height of image in pixels. It is best to enter both width and height]" />

Using the above as a guide, the following would be an acceptable use of the meta tag

SAMPLE
<meta property="og:image:secure:url" content="https://testimonialtree.zendesk.com/hc/en-us" />
<meta property="og:image:type" content="image/png" />
<meta property="og:image:width" content="261" />
<meta property="og:image:height" content="60"
/>

When used on the home page of your site, the image that returns from the URL on the line "og:image:secure:url" or "og:image:url" will be used by Facebook, and in our particular case, it will be used by Facebook to help branding when sharing to Facebook.

IMPORTANT NOTE: To update an image after it's been published, use a new URL for the new image. Images are cached based on the URL and won't be updated unless the URL changes.

Now What?
Now that you have the code, what are you supposed to do with it? In a perfect world, you give it to your webmaster. For some of us, we are our own webmaster, so here are the nitty gritty details for where to paste it:

In the backend of your website, in the .html document where all your HTML code is housed (it is commonly named index.html), you will need to find, towards the top, the <head> and </head>  tags: <head> will appear before/above </head>. 

If you paste the code anywhere between <head> and </head>, you are good to go.

Test Your Meta Data
After you get the code in your backend, test it here:

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

You may have to tweak the image width and height.

 

Have more questions? Submit a request

0 Comments

Please sign in to leave a comment.
Powered by Zendesk