Support for Drupal 7 is ending on 5 January 2025—it’s time to migrate to Drupal 10! Learn about the many benefits of Drupal 10 and find migration tools in our resource center.
I can't figure out how to get "Open Graph image" to work.
I have a "photo" content type I created a meta tag for. This photo type has a image field called "field_photo". So I used the token [node:field_photo] for the "Open Graph image:". But nothing is output, the other open graph tags are there, but not the image one.
Comment | File | Size | Author |
---|---|---|---|
#37 | metatag-n1284810-37.patch | 4.81 KB | DamienMcKenna |
Comments
Comment #1
silkogelman CreditAttribution: silkogelman commentedHave a look at this tutorial I made:
http://s1l.org/open-graph-tags-food-recipes-drupal
It's working with the Alpha2 release of the Meta tags module.
Also be sure to clear your cache.
Comment #2
Canadaka CreditAttribution: Canadaka commentedI have 7.x-1.0-alpha2 and using an image field didn't work for me.
Comment #3
silkogelman CreditAttribution: silkogelman commentedWhat version of Token and Chaos Tools (and Drupal) are you using?
Comment #4
Canadaka CreditAttribution: Canadaka commentedToken 7.x-1.0-beta5
Chaos Tools 7.x-1.0-rc1
Drupal 7.8
Comment #5
silkogelman CreditAttribution: silkogelman commentedThose are the exact module/core versions I'm using.
Could you attach an export of your node:photo ?
You can export at
admin/config/search/metatags
And it will look something like this:
Comment #6
Canadaka CreditAttribution: Canadaka commentedhmm i think my problem is my "field_photo" allows "unlimited" Number of values. The token probably only works if the field is set to allow only 1 value.
Comment #7
silkogelman CreditAttribution: silkogelman commentedInteresting!
An image field with multiple images (2) outputs this meta for me:
While this is incorrect, it still puts something in the meta output.
So if you're not getting any url at all this may have a different reason.
As for the multiple image urls with multiple images in a image field, maybe there's a solution in the form of a Token.
I'm not sure if there is a token for that yet.
Comment #8
Fleshgrinder CreditAttribution: Fleshgrinder commentedYou could write your own Token.
Comment #9
silkogelman CreditAttribution: silkogelman commentedAdding onto
http://drupal.org/project/imagefield_tokens
is probably best.
I was hoping to be able to create a quick temporary Token by using
http://drupal.org/project/token_custom
but there's no real Drupal 7 version yet.
And there's
http://drupal.org/project/auto_opengraph
as a temporary solution.
Comment #10
Fleshgrinder CreditAttribution: Fleshgrinder commentedHave a look at the following: http://drupal.org/node/1308488
Comment #11
silkogelman CreditAttribution: silkogelman commentedThanks for the encouragement :)
I've created a Sandbox project:
http://drupal.org/sandbox/s1l/1313788
It has a functioning module that generates Tokens for the thumbnail, medium and large imagestyle urls for the field_image field.
Very rigid, but it scratches our itch (we needed it today), and I hope it helps others too.
Suggestions / patches are welcome.
I hope to be able to extend it so it generates Style Tokens for all image fields automatically.
@Canadaka: It takes the first image of image fields with 'unlimited' number of values.
Be very aware that it is needs testing before slapping it on a production site.
Comment #12
Canadaka CreditAttribution: Canadaka commentedthanks your custom token code works for me, I just had to change the field_name to match mine.
So I added the photo OG to my content type "photo" and added some tokens to the "keywords", but the changes are not taking affect when I view the source of a photo page. I restarted my memcached, cleared all drupal caches but it stil won't update. I even tried putting some static text in the og:title and the changes aren't applied.
Comment #13
silkogelman CreditAttribution: silkogelman commented@Canadaka: glad my code could help you, makes me want to build more :)
The fact that changes are not updating: this is about Meta Tags module configuration settings right? (not my custom module)
I've noticed there should be a 'valid' image url (or Token) in the og:image textfield, else it won't show at all.
In your case it sounds it's still cached somewhere.
Maybe try it on a test environment first so you're sure configuration of the Metatag module is not the issue.
You can easily create a local virtual machine + fresh Drupal install with Drupal Quickstart.
If that doesn't work I'm happy to look at your configuration.
If it's more sensitive information you can send me a private message at
http://drupal.org/user/676938/contact
Comment #14
Dave ReidComment #15
idflood CreditAttribution: idflood commentedI had the same issue and went for the hook_html_head_alter to alter the og:image. I'm wondering if the metatags module should handle this or simply provide a good documentation about possible solutions. The thing is that it needs to be really flexible (images for different node types in different fields, possible fallback, ... )
Here is the code I used to display a thumbnail version of the first "medias" image, only for the article node type:
Comment #16
Caspar Behrendt CreditAttribution: Caspar Behrendt commentedThanks for your solution idflood. I had the same issue and am now using this code to solve the problem in a quick and dirty way:
Comment #17
silkogelman CreditAttribution: silkogelman commentedThose interested in using imagecache presets (image styles) as Tokens (for their og:image Meta tags for example), have a look at this module:
http://drupal.org/project/imagecache_token
It works for images on nodes, images on other types of entities is being worked on here:
#1525210: Tokens for images on Entities
Comment #18
JonMcL CreditAttribution: JonMcL commentedThis might be helpful to others...
I wanted to conditionally alter the og:image meta tag depending on whether or not the editors had uploaded an image into a particular field. If the image field is empty, the og:image value configured in the meta tag UI is used (I have it configured to use the site's logo). If the image field is populated, then that image is used for the og:image meta tag on that particular page only. Obviously this solution is very unique to my situation, but can be easily adapted to other situations.
I'm using one of the hook_metatag_metatags_view_alter function documented in metatag.api.php.
It's probably a little messy to go directly into the $output array with that much depth, so be careful to re-check your code after metatag updates. There might be utility metatag functions that are better suited for direct manipulation of the $output array.
..jon
PS -- If possible, I think it would be great to pass the entity to this function in addition to the $instance variable.
Comment #19
mellamoanton CreditAttribution: mellamoanton commentedHi!
The #15 solution works perfect, but I have a problem: I use a Media module field, not an Image field, so doesn't work. Any help?
Thanks!
Comment #20
mellamoanton CreditAttribution: mellamoanton commentedSolved. I only had to add a Metatag default for my content type: That new Metatag configuration has a token for my field.
To fix the problem of having multiple images I've installed the #11 module.
Comment #21
aaronmarsh632 CreditAttribution: aaronmarsh632 commentedHi,
I'm having trouble getting this to work, hopefully one of you guys will be able to help.
I have a content type which uses galleryformatter (so more than 1 image on the content page). Im using social42 for sharing buttons, but when I click one of the buttons I get no image. I just want the first image to be displayed.
I tried post #15 - I copied the post into my themes template.php file and changed "article" to my content type
and changed field_medias to image_field (the name of my image field obv) but I cant get it to work.
Please can anyone help?
Thanks
Comment #22
operations CreditAttribution: operations commentedHow about this:
It works well for me for single / multiple images.
Comment #23
aaronmarsh632 CreditAttribution: aaronmarsh632 commentedHi, thanks for this suggestion, Do I just copy this into my themes template.php file verbatim? or do I need to change any part of it to be relevant to my theme?
Thanks
Comment #24
operations CreditAttribution: operations commentedHi, you're welcome and hope it works for you! Just add it to template.php and change MYTHEME to your theme name.
Comment #25
aaronmarsh632 CreditAttribution: aaronmarsh632 commentedKwl, thanks, I am getting some results from this now but results are not as expected, maybe i'm missing something, whats happening is, when I click my share via facebook button, the image that is displayed on the facebook post is my websites main logo, and I get the site is under maintenance even when I have took it out of maintenance mode, and the share via twitter gives the correct title, ie not in maintenance mode but I get no image - twitter does support images for this right? I also dont get an image with linkedin, and google plus doesnt show any of the info, not just image. I'm using metatags module and all its extras, can you offer any advice please?
Thanks
Comment #26
operations CreditAttribution: operations commentedHi again, actually I only tried the sharing on facebook. But facebook caches the links, so in order to clear its cache try to test the url on the below link:
https://developers.facebook.com/tools/debug/
This tool provides you with real data that is passed to facebook, so you can see the correct images and also it clears the cache as I think.
Comment #27
aaronmarsh632 CreditAttribution: aaronmarsh632 commentedHi,
thanks for the reply, I have checked via the ink you provided and I do get the following information..
Critical Errors That Must Be Fixed
Bad Response Code URL returned a bad HTTP response code.
Open Graph Warnings That Should Be Fixed
Inferred Property The 'og:url' property should be explicitly provided, even if a value can be inferred from other tags.
Inferred Property The 'og:title' property should be explicitly provided, even if a value can be inferred from other tags.
Inferred Property The 'og:image' property should be explicitly provided, even if a value can be inferred from other tags.
What exactly does this mean? is it something that can be easily fixed?
Thanks
Comment #28
aaronmarsh632 CreditAttribution: aaronmarsh632 commentedHi,
I got it working, I didn't realize but the Facebook ID was missing from meta tags, once I added it, the image now displays - Thanks for the help.
On another note, I cant get the image displaying on the twitter card. I have selected product for the twitter card type, and I have entered my twitter account and account ID and the image is set to og:image. Am I missing something with this 1? Do I have to do anything over here https://dev.twitter.com/cards
Thanks
Comment #29
aaronmarsh632 CreditAttribution: aaronmarsh632 commentedI have absolutely no idea but the facebook og isn't working anymore, it was working but now its not but I havnt changed anything.
I still get
Critical Errors That Must Be Fixed
Bad Response Code URL returned a bad HTTP response code.
and i'm getting
Missing Required Property
The og:type property is required, but not present.
when I debug with facebook.
Please can anyone help me resolve this?
Thanks
Comment #30
DamienMcKennaI'm going to work on an API extension to indicate which fields are dependencies: #2271281: Method of indicating meta tag dependencies
@aaronmarsh632: Make sure that there's an og:type meta tag being output.
Comment #31
DamienMcKennaThis is a generic problem with image meta tags. The problem is that most tokens to output an image field will output the value as an image tag, which can be verified by changing the code in DrupalTextMetaTag->getValue() as follows (requires the Devel module):
At this point the value will be an image tag, not a URL, so when the value is then passed to tidyValue() it will have strip_tags() executed against it and then the tag becomes blank.
I'm still working on this, will post a follow-up shortly.
Comment #32
DamienMcKennaI'm strongly considering making Imagecache Token a dependency..
Comment #33
DamienMcKennaClosed a duplicate: #2282347: Image does not work when token is assigned
Comment #34
rootworkI think making Imagecache Token a dependency makes sense, if you decide to go that route.
Comment #35
DamienMcKennaThis patch adds:
Comment #36
DamienMcKennaComment #37
DamienMcKennaSo, because my glasses don't work :^) it turns out there already was a mention of Imagecache Token in the README.txt. Updated patch.
Comment #38
DamienMcKennaCommitted.
Comment #41
liberatrFor the sake of documentation, I'm leaving this comment.
I had no luck with imagecache_token. I used https://www.drupal.org/project/image_url_formatter
Comment #42
seakayjay CreditAttribution: seakayjay commentedI'm leaving this comment in case someone is unable to get the imagecache_token to work
[node:field-event-banner:fbshare_1200x630]
The value from the token selector uses dash (-). Hence, I replaced the dash (-) with underscore (_). Then everything works as expected.
[node:field_event_banner:fbshare_1200x630]
Comment #43
philippejadin CreditAttribution: philippejadin commentedSince it's hard to have it working, here are some clues.
- Install the imagecache token module
- create a custom image cache style (call it facebookcover) the resize and crops the content to 1200x630 pixels
- clear your token cache
Let's say your main image field is called "cover" and youur image cache style is called "facebookcover"
- in the metatag module Image field, enter : [node:field_cover:facebookcover]
- clear your metadata cache
This should make it work
You need to have images bigger than 200x200px else facebook will not use it. Check your urls with this tool : https://developers.facebook.com/tools/debug/og/object/