WordPress.org

Ready to get started?Download WordPress

Forums

NextGEN Facebook: Advanced Sharing Optimization for All Social Websites
[resolved] [Plugin: NextGEN Facebook] Invalid og:image HTML (11 posts)

  1. bennygill
    Member
    Posted 1 year ago #

    Hello,

    I'm pulling my hair out trying to get Facebook to show a preview image for my wordpress posts when the link is shared. Sometimes it shows, sometimes it doesn't. It's very arbitrary. I tried using your pluign to fix the problem... but it's not working.

    On further investigation I found that your og:image meta tag has invalid HTML.

    This is the page I'm trying to get working: http://studyweightloss.com/motivation/test/

    Put that URL in here and you will see the error: http://validator.w3.org/

    Can you please tell me how to fix this... or if it's not the problem please tell me how to ensure my thumbnail preview gets displayed when I share the link on facebook.

    P.s I have also run my page through the FB debugger (https://developers.facebook.com/tools/debug) but no errors are appearing.

    Thanks,
    Ben

    http://wordpress.org/extend/plugins/nextgen-facebook/

  2. bennygill
    Member
    Posted 1 year ago #

    Any ideas?

    Want to get this working asap.

  3. JS Morisset
    Member
    Plugin Author

    Posted 1 year ago #

    Ben,

    Changing your DOCTYPE to the following should do the trick, though you'll have to make sure to use proper XHTML 1.1 syntax in your documents.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.0//EN" "http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd">

    BTW, the W3C validator might be the only one that cares about this.

    As for the Facebook Debugger, it seems to be having some issues this morning, so perhaps it's related. I noticed your OG image is quite large -- you may want to define a smaller size. Also, make sure the size ratio is less than 3:1 -- Facebook prefers square-ish images. ;-) I'll add a note in the FAQ section to cover all this.

    Thanks,

    js.

  4. bennygill
    Member
    Posted 1 year ago #

    Hello,

    Thanks for the help.

    Just read your FAQ on the HTML error. Thanks for the update. I'm not worried about if it's not actually preventing my pic from showing up... thats all I care about.

    So with that out of the way what else do you think it could be?

    I tried making the image smaller (Medium: 199 x300) but it did not help. Also I have the "image size name" option in the plugin set to 200x200 (cropped) since that's what was suggested. Is that the size I should be selecting when I insert the image into my post? I don't see it in the list when I go to chose the image size.

    Any other ideas about whats causing the problem? The strange thins is sometimes for other posts it works fine. It will always work for some posts no matter how many times I paste the link, and for other will never work no matter how many times I paste the link. So I'm sure it has something todo with my site and not FB.

    Thanks,
    Ben

  5. JS Morisset
    Member
    Plugin Author

    Posted 1 year ago #

    Ben,

    The OG meta for http://studyweightloss.com/motivation/test/ shows the following tag:

    <meta property="og:image" content="http://studyweightloss.com/wp-content/uploads/2012/09/test.jpg" />

    How did you define this image? Is it a featured image on this post http://studyweightloss.com/motivation/test/? Or is it the default image?

    On the settings page, what is the value of "Image Size Name" and Default Image ID?

    The Facebook Debugger is still not working -- I'll try and check tomorrow and see if it's picking up your images correctly. Aside from the og:image URL pointing to the full size image, I don't see anything wrong with the headers...

    It sounds like I'll need a to add a 'Debug' option in the next version to include additional info in the headers for situations like this...

    Thanks,

    js.

  6. JS Morisset
    Member
    Plugin Author

    Posted 1 year ago #

    Ben,

    I just checked-in v1.6.2 info the development branch. You can download it here http://downloads.wordpress.org/plugin/nextgen-facebook.zip.

    It has an additional "Debug" option on the settings page. When selected, the plugin will add some hidden text above the Open Graph tags to help us track down your problem. ;-)

    Thanks,

    js.

  7. bennygill
    Member
    Posted 1 year ago #

    Hey,

    I had the same image uploaded into the post, set as featured image, and also set as a custom photo upload section provided by my theme Bueno. I thought that custom photo upload might be messing with something so I removed that photo, and viola fixed! But not for very long...

    I tried to replicate that by uploading a new post (http://studyweightloss.com/motivation/weight-loss-motivation-2/) with the same image settings (not using the custom image upload by the Bueno theme) and it does not work.

    I have noticed that when checking my new page (http://studyweightloss.com/motivation/weight-loss-motivation-2/) with the facebook debugger the og:image now references the correct 200x200 cropped image. Also the debugger seems to work fine for me.

    I just uploaded the new 1.6.2 version of the plugin so hopefully that will return some information... although I have no idea how to view it.

    I'm not using any default image. The value of "Image Size Name" is "facebook-thumbnail 200x200 cropped".

    So now my first test post (http://studyweightloss.com/motivation/test/) that wasn't working is now working fine, but it references the wrong image (not a 200x200 cropped image). The second test post (http://studyweightloss.com/motivation/weight-loss-motivation-2/) is not working but it does reference the correct size image. Very confusing.....

    Thanks for your time helping with this, much appreciated.

    Thanks,
    Ben

  8. bennygill
    Member
    Posted 1 year ago #

    Actually hold the phone!

    Just started working again... haha seems to be very fickle. I might test a few more posts and see what happens...

  9. JS Morisset
    Member
    Plugin Author

    Posted 1 year ago #

    Ben,

    The Facebook debugger seems to be working fine this morning.

    Although the Facebook debugger is useful to see what Facebook picks up (and what it has already cached), it's not the best way to see what NextGEN Facebook is giving you. Instead, do a "View Source" on your webpage and check for a section near the top with "<!-- NextGEN Facebook Meta Tags BEGIN -->".

    The plugin can only get the proper path to your cropped image (facebook-thumbnail 200x200 cropped) from a "featured image". If your theme does not support featured images, then the plugin will have to search the content for an <img src=""> tag.

    When you turn on Debug mode, you'll see much more information when doing a View Source. If you're having problems on a specific page, turn on Debug mode and give me the URL. I'll be able to tell you where the plugin is getting it's image (featured, content, etc.).

    Thanks,

    js.

  10. bennygill
    Member
    Posted 1 year ago #

    So its stopped working again. Was working like a charm for about 10 or so pages but then stopped.

    Now I keep getting "Error Parsing URL: Error parsing input URL, no data was scraped." from the debugger.

    Here is the URL: http://studyweightloss.com/motivation/weight-loss-motivation-10/

    I have turned on debug mode in the plugin, but not sure what I'm looking for. I can see it's pulling the correct image (200x200 cropped version) for the og:image tag. But don't know what else to look for.

    Could this all be a problem on facebooks end? Maybe I'm pulling too many link preview requests for my site at once (I'm trying to scheudle a whole bunch of posts with hootsuite).

  11. JS Morisset
    Member
    Plugin Author

    Posted 1 year ago #

    Ben,

    I think what you've been experiencing is problems with the Facebook debugger -- your OG tags look fine. Here's what the plugin debug info returns:

    function_exists(has_post_thumbnail) = 1
    has_post_thumbnail(1478) = 1
    get_post_thumbnail_id(1478) = 1475
    image_source = has_post_thumbnail / wp_get_attachment_image_src(1475,facebook-thumbnail)
    image_url = http://studyweightloss.com/wp-content/uploads/2012/09/Weight-Loss-Motivation-242-200x200.jpg

    This means that, your theme supports post thumbnails, a post thumbnail was chosen, the post thumbnail ID is 1475, it was retrieved with 'facebook-thumbnail' as the size name, and the image_url looks correct (it's not the full size image).

    I'll close this thread since I can't see any problem with the OG tags.

    Thanks,
    js.

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic

Tags

No tags yet.