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.

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

silkogelman’s picture

Have 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.

Canadaka’s picture

I have 7.x-1.0-alpha2 and using an image field didn't work for me.

silkogelman’s picture

What version of Token and Chaos Tools (and Drupal) are you using?

Canadaka’s picture

Token 7.x-1.0-beta5
Chaos Tools 7.x-1.0-rc1
Drupal 7.8

silkogelman’s picture

Those 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:

$config = new stdClass;
$config->disabled = FALSE; /* Edit this to true to make a default config disabled initially */
$config->api_version = 1;
$config->cid = '1';
$config->instance = 'node:food_recipe';
$config->config = array(
  'og:type' => array(
    'value' => 'food',
  ),
  'og:image' => array(
    'value' => '[node:field_recipe_image]',
  ),
);
Canadaka’s picture

hmm 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.

silkogelman’s picture

Interesting!
An image field with multiple images (2) outputs this meta for me:

<meta property="og:image" content="http://example.com/sites/default/files/image.jpg, http://example.com/sites/default/files/image2.jpg" />

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.

Fleshgrinder’s picture

You could write your own Token.

silkogelman’s picture

Adding 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.

Fleshgrinder’s picture

Have a look at the following: http://drupal.org/node/1308488

silkogelman’s picture

Thanks 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.

Canadaka’s picture

thanks 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.

silkogelman’s picture

FileSize
45.65 KB

@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

Dave Reid’s picture

Component: Miscellaneous » Open Graph
idflood’s picture

Version: » 7.x-1.x-dev

I 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:

// the function can be located in either in a module or the theme template.php file
function MYTHEME_html_head_alter(&$head_elements) {
  // Set the first media field as an og:image for article nodes
  if (arg(0) == 'node' && is_numeric(arg(1))) {
    $node = node_load(arg(1));
    if ($node && $node->type == "article") {
      $values = $node->field_medias['und'];
      if ($values != FALSE) {
        $val = $values[0]['uri'];
        $val = image_style_url("thumbnail", $val);
        $head_elements['metatag_og:image']['#value'] = $val;
      }
    }
  }
}

Caspar Behrendt’s picture

Thanks 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:

function MYTHEME_html_head_alter(&$head_elements){
	$img = &$head_elements['metatag_og:image']['#value'];
	$imgArray = explode(',',$img);
	$img = $imgArray[0];
}
silkogelman’s picture

Those 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

JonMcL’s picture

This 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.

function my_seo_module_metatag_metatags_view_alter(&$output, $instance) {
  if (isset($output['og:image']['#attached']['drupal_add_html_head'][0][0]['#value']) && $node = menu_get_object()) {
    $field_primary_photo = field_get_items('node', $node, 'field_primary_photo');
    if ($field_primary_photo) {
      $src = file_create_url($field_primary_photo[0]['uri']);
      if ($src) {
        $output['og:image']['#attached']['drupal_add_html_head'][0][0]['#value'] = $src;
      }
    }
  }

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.

mellamoanton’s picture

Hi!

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!

if (arg(0) == 'node' && is_numeric(arg(1))) {
    $node = node_load(arg(1));
    if ($node && $node->type == 'project') {
      $values = $node->field_media['und'];
      if ($values != FALSE) {
        $val = $values[0]['uri'];
        $head_elements['metatag_og:image']['#value'] = $val;
      }
    }
  }
mellamoanton’s picture

Solved. 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.

aaronmarsh632’s picture

Hi,

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

operations’s picture

Issue summary: View changes

How about this:

/**
 * Theme callback for an OpenGraph meta tag.
 */
function MYTHEME_metatag_opengraph($variables) {
  $element = &$variables['element'];
  element_set_attributes($element, array('#name' => 'property', '#value' => 'content'));
  unset($element['#value']);
  // Check if the tag element is og:image and has multiple images..
  if($element['#name'] == 'og:image') {
    $img_array = explode(',', $element['#attributes']['content']);
  }
  if(isset($img_array) && count($img_array) > 1) {
    foreach ($img_array as $i => $img) {
      $variables['element']['#attributes']['content'] = $img_array[$i];
    	$img_tag .= theme('html_tag', $variables);
    }
    return $img_tag;
  }
  return theme('html_tag', $variables);
}

It works well for me for single / multiple images.

aaronmarsh632’s picture

Hi, 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

operations’s picture

Hi, you're welcome and hope it works for you! Just add it to template.php and change MYTHEME to your theme name.

aaronmarsh632’s picture

Kwl, 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

operations’s picture

Hi 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.

aaronmarsh632’s picture

Hi,

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

aaronmarsh632’s picture

Hi,

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

aaronmarsh632’s picture

I 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

DamienMcKenna’s picture

I'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.

DamienMcKenna’s picture

Title: Open Graph image » Fix handling of image meta tags

This 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):

      $value = token_replace($value, $options['token data'], $options);
      // Test the output of the og:image meta tag.
      if ($this->info['name'] == 'og:image') {
        dpm($value);
      }

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.

DamienMcKenna’s picture

I'm strongly considering making Imagecache Token a dependency..

DamienMcKenna’s picture

rootwork’s picture

I think making Imagecache Token a dependency makes sense, if you decide to go that route.

DamienMcKenna’s picture

Status: Active » Needs review
FileSize
3.4 KB

This patch adds:

  • An item to hook_requirements that highly recommends installing the Imagecache Token module; I didn't make it a requirement, but you'll want it if you enjoy your sanity.
  • An updated note in the "Troubleshooting / Known Issues" part of the README.txt file explaining how to work with images.
  • A link to the Imagecache Token module in the "Related modules" section of the README.txt.
DamienMcKenna’s picture

Title: Fix handling of image meta tags » Document how to handle images properly
Component: Open Graph » Documentation
Category: Support request » Task
DamienMcKenna’s picture

FileSize
4.81 KB

So, because my glasses don't work :^) it turns out there already was a mention of Imagecache Token in the README.txt. Updated patch.

DamienMcKenna’s picture

Status: Needs review » Fixed

Committed.

  • Commit a9a8897 on 7.x-1.x by DamienMcKenna:
    Issue #1284810 by DamienMcKenna: Really recommend installing Imagecache...

Status: Fixed » Closed (fixed)

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

liberatr’s picture

For 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

seakayjay’s picture

I'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]

philippejadin’s picture

Since 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/