Twitter card (summary_large_image) image not displaying

pjdvmalan · 2016-03-04T10:28:11.760Z

Hi,

Using the following link in the Twitter Card Validator:

https://dev.piccing.com/media/Bee/f98b817d4c0146438a924cd857fe0f6c

I get the following log:

INFO: Page fetched successfully
INFO: 8 metatags were found
INFO: twitter:card = summary_large_image tag found
INFO: Card loaded successfully

BUT, no image is rendered.

Here is the HTML generated:

<!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Bee on Piccing in Men's Fashion</title> <meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:description" content="The description." /> <meta name="twitter:title" content="Bee on Piccing in Men's Fashion" /> <meta name="twitter:site" content="@SocnetDev"> <meta name="twitter:image" content="6fffd19b-dc80-4c5d-ae74-5b2a18a029d3" /> <meta name="twitter:creator" content="@SocnetDev" /> </head> <body> </body> </html>

Any help with this would really be appreciated.

andypiper · 2016-03-04T10:36:44.981Z

You need to provide a full http URL to your image in the twitter:image tag.

pjdvmalan · 2016-03-04T11:29:04.861Z

Apologies - the HTML snipped should look like this:

<!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Bee on Piccing in Men's Fashion</title> <meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:description" content="The great thing about made-to-measure is that you’ll get a say in every element of your prospective business battle armour, from materials (whether you want superbly soft vicuna or a breathable silk-wool blend) to tailoring the block to your specifications (need tapered trousers for larger thighs? No problem). The entire suit will then be constructed in Italy by the luxury label’s artisans and shipped back to Britain post-haste." /> <meta name="twitter:title" content="Bee on Piccing in Men's Fashion" /> <meta name="twitter:site" content="@SocnetDev"> <meta name="twitter:image" content="https://dev.piccing.com:8080/img/b9b16a5e30e6ea2c1bd8d50081299669.jpg?token=bc92eefe-5209-498a-b6ad-06c12dfa5f4d" /> <meta name="twitter:creator" content="@SocnetDev" /> </head> <body> </body> </html>

Please see: https://twitter.com/pjdvmalan/status/705716491904225280

pjdvmalan · 2016-03-07T09:36:41.739Z

Just to follow up on the above - am I missing anything obvious here?

andypiper · 2016-03-07T10:20:45.285Z

I suspect the issue is that you’re serving the image on a separate port. Can you do so from the main URL instead of using :8080?

pjdvmalan · 2016-03-08T18:31:36.353Z

Hi @andypiper,

Spot on! We temporarily changed the port and it worked.

Unfortunately we can only change this temporarily and will not be able to do so in production. The documentation states a valid URL - where a port is valid (scheme:[//[user:password@]host[:port]][/]path[?query][#fragment]).

Is there any way to log this as a bug with the developers?

Your feedback is much appreciated.

andypiper · 2016-03-08T18:34:44.366Z

I’ll certainly raise that, but I’m not sure whether we can easily change that on our end.