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

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:

  1. <meta property="og:image:url" content="[URL of the image itself]" />
    <meta property="og:image:type" content="[image/jpeg, image/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



  1. <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
  1. "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.

 


    • Related Articles

    • How to Add Survey Meta Data

      Survey Meta Data allows you to track additional information that goes beyond the standard Testimonial Tree survey setup. This is most commonly used to personalize survey questions or to provide more detailed reporting. For example, by adding a ...

    • Share Testimonials on Social Media Sites

      Once you have received a testimonial, you will want to share it on your social media sites to gain more exposure. You're able to share testimonials by using the image generation. Here is a link that review that process create an image and once create ...

    • Adding your Facebook link to your Review Generation and Review Monitoring

      You can add your Facebook URL to your Review Generation page to both Generate new reviews as well as Monitor your existing reviews. Generate = Your client will be redirected or prompted to go to Facebook to copy and paste their review there after ...

    • Booj Websites: Add Testimonial Tree Reviews to Your RE/MAX Website

      This article will walk you though how to add your Testimonial Tree reviews to your RE/MAX Booj Website. Step 1: Your Testimonial Tree account must have been created or acquired in RE/MAX Marketplace  Be sure to login to Testimonial Tree via the ...

    • Export Your Testimonials

      You can easily export your testimonials into a spreadsheet for reporting, sharing, or record-keeping purposes. Steps to Export Testimonials Step 1: From the Dashboard, click on Testimonials in the left-hand navigation bar, then select Manage ...