I've used the debugger - > https://developers.facebook.com/tools/debug/og/object/ which shows the correct image and tag line for my domain when showing the initial existing scrape information. It also shows correctly when I fetch new scrape information.
However, when I attempt to share the url from any timeline, it shows an old image and old tag line. I've tried variants of ?fbrefresh=timestamp, ?fbrefresh=1 etc. I've even appended a timestamp to the og:image url.
Additionally, the dev tool complains about the og:image saying it could not be downloaded referencing the url (which is valid and pulls up the image in any browser) and again is shown correctly at the bottom of the dev tool page, or it is too small referencing 200px x 200px minimum, however the image is 540px x 300px! And goes on to say its going to use the older cahced image instead which IS what shows when I attempt to share the url.
Furthermore it also complains about "Inferred Property" for og:url, og:title, og:description and og:image even though when I view the scrape the tags are clearly there each with their own meta html element and explicitly providing a correct "content" attribute. I have verified the og:url, fetched url, cannonical url and cached url are all the same.
I've also confirmed trying the url w/ and w/out http, https, and www combinations make no difference when sharing the url. The only difference that clearly shows a problem is the amount of likes is different even though I would expect fb to know w/ and w/out www. is the same domain since they share the same og information. As a matter of fact, w/out the www redirects to www anyway.
It seems to me as if the fb og system has some serious bugs but no way to contact the dev team or report the problem that I can easily find.
I'm posting here first to see if I'm overlooking some crucial part that the stack community can help with.
I found that everything started working properly once I forced a new scrape using the dev tool against all possible domain variants. I had thought I had tried this already but I guess I did not. Such as:
"mywebsite.com"
"www.mywebsite.com"
"http://mywebsite.com"
"http://www.mywebsite.com"
"https://mywebsite.com"
"https://www.mywebsite.com"
Implement all open graph tags, using the main URL only and scrape new information using the debuger. The posts sharing that URL or ANY variants will have the image, description, etc from the URL you specificate on Open Graph og.url tag. All the variants points to the same URL. There is the only place the og information is ;)
Related
I have recently worked on a MEAN Stack application, a sort of blog in a way, where authors post articles. To overcome the issue of OpenGraph applications not scraping Javascript, I implemented a static php page and a rule on my Nginx reverse proxy that redirects all calls from certain user-agents (like Facebook, Google+, Twitter, etc) to the static page, in order to properly scrape the data.
Everything is working great, except for one little detail, the OpenGraph based applications can't seem to be able to scrape the images in the articles, so the rich social sharing doesn't work out as expected.
For instance, testing the following link : https://moveramontanha.pt/article/5a21539cfdebb1074ed1436d
which redirects to the static page :
https://www.moveramontanha.pt/static_mam.php?id=5a21539cfdebb1074ed1436d
Facebook Sharing Debugger gives out the following errors - randomly :
Unsupported Image File Extension Provided og:image URL,
https://www.moveramontanha.pt/uploads/authors/1512141975423.jpg does
not have a supported extension.
or
The provided 'og:image' properties are not yet available because new
images are processed asynchronously. To ensure shares of new URLs
include an image, specify the dimensions using 'og:image:width' and
'og:image:height' tags.
Twitter Card Validator Log: (No Image)
INFO: Page fetched successfully INFO: 17 metatags were found INFO:
twitter:card = summary tag found INFO: Card loaded successfully WARN:
this card is redirected to
https://www.moveramontanha.pt/static_mam.php?id=5a21539cfdebb1074ed1436d
I've tried adding extra tags like image width/height, changed image format, secure tags, etc. Nothing worked.
Did anyone else stumble across such an issue?
Thanks in advance!
For Twitter's card crawler, there is an in-depth troubleshooting FAQ here and here.
I just tried the following request to fetch the image referenced in the page:
curl -L -A Twitterbot -v https://www.moveramontanha.pt/uploads/authors/1501255270817.jpg
This returns an HTML page, not a JPEG image. This means that Twitter's card crawler is unable to fetch a valid image.
You should fix your server to return a valid JPEG image to the Twitterbot user-agent.
Let's say, that I want to demonstrate a widget (or some HTML in a frame) that would be "injected" into another page.
For example: I want to show the people in Amazon.com that I can put let's say a ball image underneath every price tag they put on their web page. That is - I want to build a web server (or indeed a server less html web page) that would show their page and put some stuff of mine inside theirs. So it looks as if the client (Amazon.com here) has my software already installed on their server.
I am a web-dev total newbie, so if this is the simplest thing in the world please, ..
Thanks
There's TONS of special cases that can cause this to fail, but I'll present a simple way that will work for you on a decent amount of webpages(but not all).
save the webpages html source into a local html file.
edit the html source, adding a <base href="http://www.amazon.com/"> tag into the <head> element.
make any other modifcations to the page you want, such as adding new <script> tags to support your new functionality. Make sure your modifications use absolute urls.
If they navigate away from the page, your enhancements will obviously not carry onto the next page. ALso, you will have more success if you upload the file onto a web server. While a user can view the page by double clicking on the html file if they were to save it locally, differences in javascript security permissions will likely make some webpages not function correctly.
The reason you need to add the <base> tag is because the browser resolves relative urls by looking at the url in its address bar. So, if the amazon page had an image like this
<img src="logo.png">
and you saved the html and put it on you webserver at www.example.com, the browser would look for the image at www.example.com/logo.png, which clearly doesn't exist. The base tag tells it what base url to use.
If you need more automation, having them install a browser addon would be a good way to do this if your users are somewhat technical. Greasemonkey is a popular addon, and you can tell it to inject stuff into certain webpages. The benefit of an addon is that it can inject the new functionality into any page on the web, without you having to individually save and modify them. Also, it has the potential to work on all web pages, leaving their functionality perfectly in tact, opposed to the other suggestion. This is far more complicated though.
I want to show some dynamic info on my image, but it needs to grab the HTML of the page that loaded my image.
There might me some security risks by that, but there should be another way since I've seen an image that does that on some forum.
The image that I'm rendering will be used on a site that I do not own, but can only add to the page, like make a post which will contain the image. The example I was pointing at was this where it shows 'Welcome to my profile, (user)'
Here's how it looks like on my pc,
Depending on client configuration it should be available in the Referer HTTP header
In PHP you can get at this with $_SERVER['HTTP_REFERER'];
Nvm it was much simpler than I thought. It looks like all he did was just simply connect to the referrer url, read the input stream, then go to that url again, read previous users, grab the latest one and just write that name onto the image.
So, on an android tablet I'm getting a 404() for site/apple-touch-icon.png. Which, the 404 makes sense because no such file exists. But what's more, that file is referenced no where in the markup. I understand that apparently this icon can be automatically sought out depending on the inclusion of certain mobile-related META tags, but no such tags are anywhere in the code either. With the exception of the title, description, and keyword tags the only meta tag in said code is a
<meta name='viewport' content="width=1000">
and from what I've found, this wouldn't cause this 404.
Additionally, the only time said 404 seems to occur is when the user 'logs in.' The user can log in from any page on the site, but navigating such pages normally causes no problems. The login flow takes the user to a designated url, performs validation etc. and then redirects the user back to wherever they came from. No meta tags are output prior to the redirect. But somewhere in this flow, the tablet's browser believes it needs to seek out the 'apple-touch-icon.png' file.
Does anyone have any ideas as to what might be the culprit? Is it the result of a redirect without any output? If so, how might I discourage the client from behaving as such? I'm just at a loss trying to figure out what's causing it.
In case someone thinks it relevant, the site is built with codeigniter, and the redirect is using their core method. Thanks very much for any help.
EDIT
To clarify, because I realize this was written poorly (my bad), the tablet is NOT getting a RESOURCE 404. The tablet's browser is actually navigating to the url of the non-existent file. The result is a dead page.
Apple devices make a request to apple-touch-icon or apple-touch-icon-precomposed.png to use that image as a bookmark for your site, similar to how desktop browsers request favicon.png.
Presumably the android devices are just copying the IOS behaviour as they are hoping an icon will be available in that location.
I'm seeing requests for this image, plus apple-touch-icon-precomposed.png too, in my Apache http log.
Obviously, I don't carry any apple content on my site. It's probably the result of either someone's client or their carrier botching an ad injection when they visit my site. Favicon requests would be .ico files. I'm thinking of having some fun and putting goatse up with those image names, lol.
We're a website completely written in PHP, we use facebook metatags since we provide facebook sharing, liking, etc...
problem is when we share a link from our site to facebook, it shows the picture correctly, however trying to reshare the same link from another user, removes the picture and shows the link only.
Further troubleshooting using the FB debug tool shows below error message:
Unable to download og:image: The image referenced by the url of og:image tag could not be downloaded.
The weird thing is that the image is already see and accessible in the debugger!!
A sample page:
http://fbcomics.com/home/index/92/date/1462
Debugger for it:
https://developers.facebook.com/tools/debug/og/object?q=http%3A%2F%2Ffbcomics.com%2Fhome%2Findex%2F92%2Fdate%2F1462
Your cooperation is highly appreciated.
I think that you probably need to urlencode() the url value going into the content attribute of your og:image meta tag.
This might be related to a recent Facebook bug. https://developers.facebook.com/bugs/239522122851150
Issue was solved by itself. It seems that Facebook needs sometime (weeks I think) to store the page information including the picture using its crawlers.
If you face this, most probably you'll need to wait for sometime before sharing your new pages.
Thanks,