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.

Files: 
CommentFileSizeAuthor
#13 metatag-og-settings.JPG45.65 KBs1l

Comments

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.

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

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

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

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]',
  ),
);

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.

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.

You could write your own Token.

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.

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

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.

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.

StatusFileSize
new45.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

Component:Miscellaneous» Open Graph

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:

<?php
// 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;
      }
    }
  }
}
?>

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];
}

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

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.

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

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;
      }
    }
  }

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.

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

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.

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

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

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

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.

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

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

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