I'm trying to see why when I share a post on Facebook I don't get see all the images on the specific page. So I'm using the Facebook Debugger page to see where the problem might be and it says that "Object at URL 'http://www.myurl' of type 'article' is invalid because a required property 'og:image:url' of type 'url' was not provided."

But in Metatag under Image URL I've added "[node:field_image]" because my photos are using this field.

Why am I getting this error? I can see only the first image when I do a facebook share but not the other images.

Thank you for your help.

CommentFileSizeAuthor
#5 metatag-n2473107-5.patch944 bytesDamienMcKenna
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

DamienMcKenna’s picture

Did you check the page's HTML to see if anything was being output?

upunkt’s picture

I receive the same error at https://developers.facebook.com/tools/debug/og/object/
I also provide an image via field plus alternatives via config page. The output is something like

<meta property="og:image" content="http://www.MYDOMAIN.com/sites/default/files/images/FIELDOUTPUT/XYZ.jpg">
<meta property="og:image" content="http://www.MYDOMAIN.com/sites/default/files/images/CONFIGPAGE/ABC.jpg">
<meta property="og:image:type" content="image/jpeg">
<meta property="og:image:type" content="image/png">
<meta property="og:image:type" content="image/gif">

Everything is in the right place and Facebook scrapes all just fine. BUT when the field does not contain any value and the hardcoded fallback should be used I receive this error. Generally I wonder if it would be a better solution to generate a token named "og:image:url" instead of just "og:image". The question is - is this just a Facebook issue? I don't like providing another metatag just for them.
One more thing: IF I receive this error Facebook does not recognize the page type either and sets it to a generic "website".

Now I did the following. Looked into metatag_opengraph.metatag.inc and changed line 183 from

$info['tags']['og:image'] = array(

to

$info['tags']['og:image:url'] = array(

Make sure to save your config page input to some notepad before making that change since it will be gone due to changing the variable's name. Flush the cache. Fill in the Image URL field in the form again. In my case something like

[node:field_image],http://www.MYDOMAIN.COM/sites/default/files/images/CONFIGPAGE/ABC.jpg

As a result, the error is gone.

I do not know which social networks or services are in need of Open Graph tags for sharing. But I did also tests with Google+, LinkedIn and Pinterest, all of them worked as expected.

@DamienMcKenna Maybe there is a way to change the output without loosing what users had input before. This would obviously be a better solution.

DamienMcKenna’s picture

@upunkt: Might the issue be that you have more og:image:type values than you do og:image values? You should have the same number of both?

upunkt’s picture

@DamienMcKenna Err, mmh. Yes. Turned back to [og:image] and skipped providing an image type. Works without any error.
I understood the description on the metatag config page that it would make sense to provide all possible types. Reading Facebook's guide lines it says explicitely

og:image:type       MIME type of the image. One of image/jpeg, image/gif or image/png

So it might be a good suggestion to stress that multiple values are possible, but not recommended at least in case of Facebook and to rather skip providing a value at all.

DamienMcKenna’s picture

FileSize
944 bytes

Do you think this change to the og:image:type description might help?

DamienMcKenna’s picture

Status: Active » Needs review
upunkt’s picture

Yes, this change might be helping. But I would prefer encouraging to use only one type at all, as long as the type cannot be included by token. But it might also be a good idea to not provide a single value. See below.

tl;dr
This is going to cover several issues. Each could be posted in a dedicated thread, but I feel it might help others having this summed up.

I was having issues again and tried several options, including changing back to og:image:url once more. But Facebook writes it clearly, it's either og:image or og:image:url. I was removing all tags except for the image tag also since in some cases errors kept occuring. To make it short: just og:image works.

Found out that an improper node:changed format was part of my issue, so I explicitely added an iso_8601 format to the date and time list, to be called via [node:changed:iso_8601].

Found out that adding values for width and height will be confusing, if your images are of different sizes. Including several values here was no solution. Removed the value completely to force Facebook to guess the dimensions. This means that the first sharer of an image will not see the image in a preview, which can be worked around by manually scraping the related node. Not a convenient practice in case you have many.
But when Facebook started randomly guessing the size too small, I felt providing width and height is a must.
I made a new image style with size 1200x630 and put it in a token (clear cache first): [node:field_image:1200x0630]. Important: Set the appropriate width and height in numbers, since the corresponding tokens [node:field_image:1200x0630:width] and [node:field_image:1200x0630:height] apply the original size of the image. This appears to be a bug.

Unfortunately, Facebook later began refusing to recognize the image for sharing, though it is there in preview, with the correct path. I suspected

- either the itok appended to the image name, though I provided the image type image/jpeg
- one or both of the following warnings, that started showing up once all errors were gone

Objects of this type do not allow properties named 'article:published_time'.
Objects of this type do not allow properties named 'article:modified_time'.

These appear to be hardcoded. A good question what other network makes use of these and whether these should be separated and put into some sub module. I did not further investigate. I do not even know if these are added by metatag, but I suppose so. Where could I find the corresponding code?

- or another warning about Parser Mismatched Metadata, suggesting the order of the tags should be different. See below.

Well, to come back to your patch, I could get the image to get shared only by removing og:image:type completely.

Finally I found out that the old Facebook feature to select the image to be shared out of all included pictures obviously has been disabled. So including several images does only make sense if you have content with or without image. Then you place a token in the Image URL field plus one generic fallback-image for the case of non-image content.

This is my output that actually works, though it produces the described warnings:

<meta property="og:site_name" content="SITE NAME">
<meta property="og:type" content="musician">
<meta property="og:url" content="http://www.MYDOMAIN.com">
<meta property="og:title" content="TITLE">
<meta property="og:description" content="᠎CONTENT">
<meta property="og:updated_time" content="2015-04-29">
<meta property="og:image" content="http://www.MYDOMAIN.com/sites/default/files/styles/1200x0630/public/images/FIELDOUTPUT/XYZ.jpg?itok=scraMbLed">
<meta property="og:image" content="http://www.MYDOMAIN.com/sites/default/files/images/CONFIGPAGE/ABC.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:locale" content="de_DE">
<meta property="article:published_time" content="2015-03-09T19:44:09+01:00">
<meta property="article:modified_time" content="2015-04-29T16:16:03+02:00">

This smells work. I feel sorry.

Edit: Removed original Domain Name in example code, corrected translation

DamienMcKenna’s picture

@upunkt: That's some great sleuthing, thank you for digging into it!

BTW what module is providing the iso_8601 date option?

upunkt’s picture

@DamienMcKenna I use the Date module. The ISO 8601 option is handmade.
- Get the desired format from the wikipedia page you link to in the Content modification date & time field description.
- At admin/config/regional/date-time/formats add an appropriate format using http://php.net/manual/function.date.php . I chose a short form and used Y-m-d
- Add a new Date type at admin/config/regional/date-time with the new format. This type can be appended to the token.

DamienMcKenna’s picture

@upunkt: Ah, ok. I added an issue to the Date module in the hope of adding tokens for some standardized date formats: #2480855: Add tokens for standardized date formats.

DamienMcKenna’s picture

I've also opened a new feature request for Metatag that would be useful: #2480867: Auto-generate og:image sub-tags (og:image:width, etc)

  • DamienMcKenna committed 707ba5e on 7.x-1.x
    Issue #2473107 by DamienMcKenna: Added a warning about having more og:...
DamienMcKenna’s picture

Status: Needs review » Fixed

I committed the small UI improvement.

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.

Arun Murugadoss - Drupal Geeks’s picture

Yes. Either removing the og:image:type value from the Metadata configuration or make it match with the number of og:image and og:image:url counts solves the issue.

It is basically that, If multiple values (i.e: image/jpeg,image/png,image/gif) are allowed in "og:image:type" and it doesn't match with the number of "og:image" and "og:image:url" counts of a page's Metadata, it produces the error in Facebook scraper.

wouser’s picture

Glad I found this issue here! Same trouble here but I don't understand what you mean by "removing the og:image:type value".
Removing it from the Metatag Module code?

I am using token: " [node:field-image-positive-news:file] "
I accept multiple values of image types: (i.e: image/jpeg,image/png,image/gif). The correct image shows up at first, once posted on facebook it changes to another image from a different article in that field.

Here's the error just in case I'm missing something here.
Object at URL 'http://www.url.com/articleexample' of type 'article' is invalid because the given value 'handsi.png' for property 'og:image:url' could not be parsed as type 'url'.

Thanks in advance for your help.

DamienMcKenna’s picture

@wouser: The image fields should be a complete URL, not just a filename, so you probably want something like "[node:field-image-positive-news:url]".

TynanFox’s picture

I didn't even think to simply add to this thread - I started a new issue regarding this here.

The solution described above works, but not really. It will cause Facebook's error checker to pass, but none of your image properties for any of the images except the last one in the list will have any properties attached to them. Order matters.

DamienMcKenna’s picture

hamadknows’s picture

Thanks the thread was useful!