Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Using Facebook's Open Graph protocol, are multiple thumbnail images allowed? [duplicate]

Possible Duplicate:
How does Facebook Sharer select Images?

According to Facebook's Open Graph protocol documentation, you may include multiple og:image meta properties to associate multiple images with your page:

og:image - An image URL which should represent your object within the graph. The image must be at least 50px by 50px and have a maximum aspect ratio of 3:1. We support PNG, JPEG and GIF formats. You may include multiple og:image tags to associate multiple images with your page.

However, when I load my page in the URL Linter, I get a warning:

Duplicate tags: You used "image" multiple times, but it should only appear once

So which is it?

Is there a better way to associate multiple thumbnail images with a page?

like image 509
Josh Glover Avatar asked May 16 '11 14:05

Josh Glover


People also ask

How does Facebook Open Graph work?

Open Graph is an internet protocol that was originally created by Facebook to standardize the use of metadata within a webpage to represent the content of a page. Within it, you can provide details as simple as the title of a page or as specific as the duration of a video.

What are Open Graph images?

An open graph image or OG image is the image that appears when you post website or video content to your social accounts. It is part of an important group of meta tags that influence the performance of your content link on social media like Facebook, Linkedin, Pinterest and Twitter.

What size should Open Graph image be?

Optimizing the Image Size for Facebook Open Graph For the best display on high-resolution devices, the company suggests choosing an image that's at least 1200 x 630 pixels. If your image is smaller than 600 x 314 pixels, it'll still display in your post, but appear as a thumbnail-sized picture.


2 Answers

You can add multiple og:image meta tags. facebook has left/right arrow controls that allow the user to choose between the images.

If URL Linter sees more than one og:image tag, it should show under the Debug as a Data Source with multiple values:

Extracted 3 values from <meta property="og:image" />: [image location], [image location], [image location]

like image 199
Casey Yee Avatar answered Sep 28 '22 07:09

Casey Yee


As an alternative to the og:image meta tag, you can add your thumbnail images to the end of the DOM and set their visibility to hidden. The thumbnails will be recognized by Facebook even though they are not visible on the page itself. I usually do this as an added precaution just because I have experienced some flaky behavior with the meta tags in the past.

like image 31
Jarad DeLorenzo Avatar answered Sep 28 '22 07:09

Jarad DeLorenzo