Multiple values in image field for OG, Twitter Cards and GPlus [#2623330]

HI,

I am using an image field that allows multiple values in my content type. When I enable OG, Twitter Cards and GPlus for Metatags the following happens:
og:image receives an individual line for each image like so:

<meta property="og:image" content="https://www.example.com/sites/default/files/images/1.jpg" />
<meta property="og:image" content="https://www.example.com/sites/default/files/images/2.jpg" /><meta property="og:image" content="https://www.example.com/sites/default/files/images/3.jpg" />

Both Twitter Card and GPlus receive only 1 line with comma separated values in it:
<meta name="twitter:image:src" content="https://www.example.com/sites/default/files/images/1.jpg, https://www.example.com/sites/default/files/images/2.jpg, https://www.example.com/sites/default/files/images/3.jpg" />

<meta itemprop="image" content="https://www.example.com/sites/default/files/images/1.jpg, https://www.example.com/sites/default/files/images/2.jpg, https://www.example.com/sites/default/files/images/3.jpg" />

I am not sure if this is intended or not. Anyway, if I use validators like the one from Facebook for OG
https://developers.facebook.com/tools/debug/og/object/
it complains about the OG tags missing a URL object:
Object at URL 'https://www.example.com/profile1' of type 'profile' is invalid because a required property 'og:image:url' of type 'url' was not provided.
This only happens when multiple images have been loaded and the source code actually showing 3 lines of meta property="og:image"! Any other content with only one image validates correctly. Does OG not expect multiple images in the tag?

When I use the Twitter Card validator (https://cards-dev.twitter.com/validator), it shows a successful card being rendered including one of my images. However, my watchdog logs a page not found error for an image with a comma at the end.
https://www.example.com/sites/default/files/images/1.jpg,
In the case of multiple images it seems that the last one is picked for the card instead of the first.
So either the Twitter validator does something unintended or Drupal does when evaluating the tokens.

Should it be possible to add something to the token to limit it to one image field result, e.g. 1 like so [node:field_image:1]

Cheers, J.

Comments

Comment #1

26 November 2015 at 02:36

jelo created an issue. See original summary.

Comment #2

DamienMcKenna

NH, USA

CreditAttribution: DamienMcKenna at Mediacurrent commented 26 November 2015 at 03:02

The validation part is tricky, because it may need other meta tags to have the same number of values as there are images.

As for the other meta tags, those should be working the same, i.e. if you're using the same tokens for both twitter:image:src as you are for og:image then they should have the same number of values.

I think we need to expand tests for images to make sure they're working correctly.

Comment #3

DamienMcKenna

NH, USA

CreditAttribution: DamienMcKenna at Mediacurrent commented 26 November 2015 at 03:03

Title:	Multipel values in image field for OG, Twitter Cards and GPlus	» Multiple values in image field for OG, Twitter Cards and GPlus
Component:	Twitter Cards	» Code

Comment #4

jelo CreditAttribution: jelo commented 26 November 2015 at 18:35

Thanks for the quick response. Additional tests on images definitely seem needed because according to your comment the same token should deliver the same result in the three different contexts (OG, Twitter, GPlus). As these social platforms are all about engagement of users and images drive such engagement, I think proper image support may be one of the most important features of these tags. I can confirm that I used the same token and the results were different as described in my initial post.

Issue 1)
I just looked at the OG specification (http://ogp.me/). It allows multiple values for images and states that

The og:image property has some optional structured properties:
og:image:url - Identical to og:image.
og:image:secure_url - An alternate url to use if the webpage requires HTTPS.

Despite og:image:url being optional, the Facebook validator complains about it missing (although it is weird that it only complains in the case of multiple values). So I did some testing and the order of our option is wrong. We output:

<meta property="og:image" content="https://www.example.com/sites/default/files/images/1.jpg" />
<meta property="og:image" content="https://www.example.com/sites/default/files/images/2.jpg" />
<meta property="og:image:secure_url" content="https://www.example.com/sites/default/files/images/1.jpg" />
<meta property="og:image:secure_url" content="https://www.example.com/sites/default/files/images/2.jpg" />

What we should output is:

<meta property="og:image" content="https://www.example.com/sites/default/files/images/1.jpg" />
<meta property="og:image:secure_url" content="https://www.example.com/sites/default/files/images/1.jpg" />
<meta property="og:image" content="https://www.example.com/sites/default/files/images/2.jpg" />
<meta property="og:image:secure_url" content="https://www.example.com/sites/default/files/images/2.jpg" />

With this order validation works fine. The interim solution for issue 2 works for this as well by just eliminating multiple images for now.

Issue 2)
Image tokens with multiple values display output in comma separated value in one line in Twitter Card context. It looks like Twitter Cards should only have one image, see https://twittercommunity.com/t/for-multiple-images-twitter-is-not-follow.... There is a related d.o issue with a proposed solution: https://www.drupal.org/node/2338211. However, I would argue that Twitter Cards should automatically restrict the output of images to one in the context of Twitter. This is just too easy to miss when configuring the tokens for metatags.

Issue 3)
Image tokens with multiple values display output in comma separated value in one line in GPlus context. It is not clear to me yet if multiple values are allowed here or not, but in case it is supported they should likely be in individual lines instead of comma separated in one line as they are right now. Again, the interim workaround is to limit the images to 1 value with the help of entity_tokens.

Comment #5

DamienMcKenna

NH, USA

CreditAttribution: DamienMcKenna at Mediacurrent commented 1 December 2015 at 17:16

1. So it seems that the og:image meta tags should be grouped together, rather than sequentially. Lets focus this issue on resolving that problem.

2, 3. I posted some code to #2338211: How to only use one item of a multi-item field? that might resolve them.

Comment #6

DamienMcKenna

NH, USA

CreditAttribution: DamienMcKenna at Mediacurrent commented 1 December 2015 at 17:16

Version:

7.x-1.7

» 7.x-1.x-dev

Comment #7

jelo CreditAttribution: jelo commented 1 December 2015 at 19:38

Agreed, for OG we should group the various tags together per image.

For Twitter it looks like all cards that were able to handle multiple images have been deprecated as of July 2015:
https://dev.twitter.com/cards/types
In particular, gallery card was removed which could show a number of images. From the descriptions of the remaining cards it sounds as if all only take in one image. In contrast to Facebook which allows a user to pick from multiple images in a preview, I have not seen this with Twitter, i.e. I would think limiting the options to one may be desired at this stage. We could either focus on providing this option through a token (which would require the person configuring the card to know that multiple images should be limited to 1, but may leave flexibility to decide which one to use) or make this decision for the person configuring the card which is what your related issue proposes (but this always assumes image 1 to be used)? Is there a standard for how Drupal normally approaches something like this?

For GPlus I could not find any information how it expects multiple values for images. All of these sources always refer to "an image":
https://developers.google.com/+/web/snippet/article-rendering
https://developers.google.com/+/web/snippet/
What is your preference? Assuming it is one image representing the content and limiting metatag to the first image in a content type or relying on tokens that allow it to be configured to select how many and which image is included?