i'm having some trouble with my OG tags. It is displaying properly in <head>, however Facebook Open Graph returned with a Bad Response Code.
Here is the URL: https://www.sentosa.com.sg/en/get-inspired/sentosa-guides/mums-recommend-fun-activities-on-sentosa/
<head>
<title data-react-helmet="true">Mums Recommend: Fun Family Activities On Sentosa</title>
<meta data-react-helmet="true" property="og:title" content="Mums Recommend: Fun Family Activities On Sentosa"/>
<meta data-react-helmet="true" name="keywords" content="things to do, fun activities in sentosa, family"/>
<meta data-react-helmet="true" name="title" content="Mums Recommend: Fun Family Activities On Sentosa"/>
<meta data-react-helmet="true" name="description" content="It’s true – mothers know best!"/>
<meta data-react-helmet="true" property="og:description" content="It’s true – mothers know best!"/>
<meta data-react-helmet="true" property="og:url" content="https://www.sentosa.com.sg/get-inspired/sentosa-guides/mums-recommend-fun-activities-on-sentosa"/>
<meta data-react-helmet="true" property="og:image" content="https://www.sentosa.com.sg/-/media/sentosa/article-listing/articles/2021/mums-recommended-fun-activities-to-do-in-sentosa/mums_hero.jpg?revision=7e8e6d47-8f17-4686-8cf2-b34dc387a461"/>
<link data-react-helmet="true" rel="canonical" href="https://www.sentosa.com.sg/get-inspired/sentosa-guides/mums-recommend-fun-activities-on-sentosa/"/>
<link data-react-helmet="true" rel="shortcut icon" href="https://www.sentosa.com.sg/-/media/sentosa/features/header/favicon-new.png?revision=b492cc89-69c8-448d-a928-15c3e56b2e88"/>
<script data-react-helmet="true" async="true" src="https://assets.wogaa.sg/scripts/wogaa.js"></script>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"/>
<meta name="theme-color" content="#000000"/>
<script async src="https://www.googletagmanager.com/gtag/js?id=DC-8858992"></script><script>function gtag(){dataLayer.push(arguments)}window.dataLayer=window.dataLayer||[],gtag("config","DC-8858992")</script>
<link href="/dist/sentosa/static/css/main.24239852.chunk.css" rel="stylesheet">
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-536FZZK" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<div id="root">
<style data-styled="bhTETV gthcLv jWNKzs ffTmSH gzHAtR gXecBG bzgUGP cOeqpc kdJMol eUYsaW kHNbps ftjTQW stNPD cTYkaX eXgrYR kvnZyw dUFPwu dfcRpc kZrfbx cNdvkR fXtlEt PaNCb" data-styled-version="4.4.1">
I had the same problem with Azure Front Door - the issue appears to be caused by the combination of Accept-Encoding and Range headers - this causes Front Door to return a 503 response even though the backend server is capable of serving the response.
My solution was to create a Rules Engine rule that removed the Accept-Encoding header if there is also a Range header. This ensures that the crawling sites still get the correct 200 or 206 response with a payload that doesn't exceed their stated requirements.
The following rule worked for us for the social sharing tools that we tested (mainly Facebook, WhatsApp, Twitter, LinkedIn):
IF
Condition: "Request header"
Header name: "Range"
Operator: "Any"
AND IF
Condition: "Request header"
Header name: "Accept-Encoding"
Operator: "Contains"
Header value: "gzip"
Transform: "To lowercase"
THEN
Action: "Request header"
Operator: "Delete"
Header name: "Accept-Encoding"
Edit to add
This recently stopped working for us, and it turned out to be because our server was returning inconsistent cache headers.
When the cache-control headers are internally consistent, everything is fine, for example:
Cacheable pages: Cache-Control: public, max-age=1322
or
Non-cacheable pages: Cache-Control: no-store, no-cache
However some pages were returning:
Cache-Control: public, no-store, max-age=1800
Which appeared to be working "as expected" for normal requests (i.e. Front Door wasn't caching the pages) however when requested with a Range header (with or without an Accept-Encoding header), we started seeing the 503 error again. Correcting the cache-control header resolved the 503 with the range header.
Related
I have integration that uses cXML standard, where customer connects from his own system, to our system, to buy goods and then to be redirected back to his own system, with all those goods created in his system.
We already implemented this to work between Odoo and Ariba/SAP, but its not working properly with Dynamics 365. Problem happens on final step, when user needs to be redirected back to his system to end his purchase.
Every time it is redirected, it looks like it converts POST request to get and then gives this as a result:
From requests, it looks like it starts fine with a POST (and 308 redirect to persist that), but then it becomes GET.
So I am not sure if its Dynamics 365 doing that or maybe I am missing something to make it work properly? It also loooks like it triggers login to Dynamics (even though that user is already logged in).
I tried various ways to finish this step, but in all cases it ends up the same:
I tried simple submit with HTML/JS to see if maybe my implementation is doing something wrong:
<form id="cxml_form" method="POST" action="https://some-subdomain.dynamics.com/punchout/cxml/COOKIE" enctype="application/x-www-form-urlencoded">
<input type="hidden" name="cXML-urlencoded" value='payloadPlaceholder'>
</form>
<script type="text/javascript">document.getElementById('cxml_form').submit()</script>
Basically same thing.
Also tried to do it with flask:
#app.route('/cxml', methods=['POST'])
def send_cxml():
return redirect(
"https://some-subdomain.dynamics.com/punchout/cxml/COOKIE",
308,
)
There is also this site to test CXML: https://punchoutcommerce.com/tools/cxml-order-tester
So using that, it receives response something like this:
<!-- Copyright (C) Microsoft Corporation. All rights reserved. -->
<!DOCTYPE html>
<html dir="ltr" class="" lang="en">
<head>
<title>Sign in to your account</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2.0, user-scalable=yes">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="-1">
<link rel="preconnect" href="https://aadcdn.msauth.net" crossorigin>
<meta http-equiv="x-dns-prefetch-control" content="on">
<link rel="dns-prefetch" href="//aadcdn.msauth.net">
<link rel="dns-prefetch" href="//aadcdn.msftauth.net">
...
...
It looks like it just tries to redirect to login page (even though I am logged in to dynamics)?
I'm getting the following error:
Image Unavailable
Provided og:image, https://sustainablewestonma.org/.swag/uploads/logoCapture.png could not be
downloaded. This can happen due to several different reasons such as your server using unsupported
content-encoding. The crawler accepts deflate and gzip content encodings.
the file is 252X226 png bit depth 32. As far as I can tell it is not base64. I tried to refresh on facebook several times but that didn't work either/
here are the meta tags I'm using:
<meta property="og:title" content="SWAG" />
<meta property="og:type" content="website" />
<meta property="og:description" content="logo" />
<meta property="fb:app_id" content="419989405770732" />
<meta property="og:url" content="https://sustainablewestonma.org/.swag/public/php/homeCtrl.php?place=first" />
<meta property="og:image" content="https://sustainablewestonma.org/.swag/uploads/logoCapture.png" />
converted the image to an *.ico file and it worked
we are facing an issue with Facebook shares. Basically whenever we post a new article, Facebook debugger can't see the og tags (though all tags are there) and we have to manually scrape the links again 10x times to get the preview working.
Here are the og tags we include in our posts:
<meta property="og:locale" content="en_US" /><meta property="og:type" content="article" /><meta property="og:title" content="Σαν σήμερα - Famagusta News" /><meta property="og:description" content="Διαβάστε τα σημαντικότερα γεγονότα της ημέρας στο Famagusta.News" /><meta property="og:url" content="https://famagusta.news/san-simera/199499/" /><meta property="og:site_name" content="Famagusta News" /><meta property="article:publisher" content="https://www.facebook.com/famagusta.news" /><meta property="article:section" content="Σαν Σημερα" /><meta property="article:published_time" content="2019-03-12T22:06:39+00:00" /><meta property="fb:app_id" content="447915658939075" /><meta property="og:image" content="https://cdn.famagusta.news/wp-content/uploads/2019/03/12/snsmr5-1200x630.jpg" /><meta property="og:image:secure_url" content="https://cdn.famagusta.news/wp-content/uploads/2019/03/12/snsmr5-1200x630.jpg" /><meta property="og:image:width" content="1200" /><meta property="og:image:height" content="630" /><meta property="og:image:alt" content="Σαν σήμερα" />
And here is the error we receive on 1st attempt:
Inferred Property The 'og:image' property should be explicitly
provided, even if a value can be inferred from other tags. Missing
Properties The following required properties are missing: og:url,
og:type, og:title, og:image, og:description, fb:app_id Curl Timeout
The request to scrape the URL timed out. Curl Error Curl error: 28
(OPERATION_TIMEOUTED)
Preview the results here
Our website is using an SSL certificate, Cloudflare (basic) and KeyCDN for the images.
https://developers.facebook.com/docs/sharing/webmasters/
According to the docs, you have to add og:image:width and og:image:height to make sure it gets loaded immediately.
Edit: I just saw that you did provide the tags. It seems that there is a problem with your server, that error is discussed here: Facebook developer tool throw: Curl Error : OPERATION_TIMEOUTED Operation timed out after 10000 milliseconds with 0 out of -1 bytes received
Use http:// URL into og:image and https:// URL into og:image:secured or into another og:image
On Twitter, I can't show an image card when tweeting my website https://startcrowd.club
But it works perfectly on Facebook.
I want to show this card: http://startcrowd.club/images/startcrowdimage.jpg
I tried https://cards-dev.twitter.com/validator and I got:
INFO: Page fetched successfully
INFO: 9 metatags were found
ERROR: No card found (Card error)
The relevant metatags on my page https://startcrowd.club/index.html are:
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta property="og:image" content="images/startcrowdimage.jpg">
The documentation I followed is:
https://dev.twitter.com/cards/getting-started
Ensure that the og:type tag is set. On Facebook it is not required, Facebook will use website as the og:type if it is not found. That is why it worked fine on Facebook.
By adding <meta property="og:type" content="website"> if the twitter:card property is not set, twitter will use summary.
So just add <meta property="og:type" content="website"> and I think it will work fine.
PS: I also had the same issue but when I added <meta property="og:type" content="website"> it worked for me.
Add:
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="https://startcrowd.club/images/startcrowdimage.jpg">
Doc: https://dev.twitter.com/cards/types/summary-large-image
You should change your
twitter:card tag to 'app', 'player', 'summary' or 'summary_large_image'
<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="#flickr" />
<meta name="twitter:title" content="Small Island Developing States Photo Submission" />
<meta name="twitter:description" content="View the album on Flickr." />
<meta name="twitter:image" content="https://farm6.staticflickr.com/5510/14338202952_93595258ff_z.jpg" />
that is all required meta tags.
You can also check it from twitter validator
Here is a article might be helpful
https://medium.com/#melih193/social-media-cards-for-more-interaction-with-meta-tags-741a6e8d27d1
Just add the following before your closing </head> will do:
<meta content='summary_large_image' name='twitter:card'/>
<meta content='#yourTwitterID' name='twitter:site'/>
<meta content='#yourTwitterID' name='twitter:creator'/>
If your <head></head> tag contains any og:xxx meta tags, the Twitter crawler should be able to grab it. They can't generate a card for you if you don't tell them which Twitter account that this card belongs to. The card needs to generate a link that references back to the account owner.
I have found to reload the .swf file everytime so the user has the latest version, add the following code to eliminate caching by the browser:
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
Anyone have other suggestions?
Thanks!
The meta tag only instruct the browser not to cache the html page, but not its assets. To avoid caching, instead of embedding the SWF like "foo.swf", try it like "foo.swf?c=" + new Date().getTime()
The same trick goes for any other embedding dynamic assets including videos, audios as well as dynamic images.