Google crawler can't render the page properly - javascript

For the past months I have been developing my own "javascript client side framework for SPA(single page application)" and I just want to know if I'm on the right track or not.
My framework works similar to meteor or ember and others but I've noticed that google bot has difficulties rendering my page. so I want to review some of the rendering techniques that I have used in my framework.
When the user navigates to a url ex. http://mywebsite.com/profile/tomhanks the router parses the url and finds that there is a controller listening to string profile/[username] so it triggers that controller and passes username as a variable to the controller, then the controller requests a new page (or overlay) with a template id and then the template is placed in the page.
But the problem is that Google bot won't bother doing all of this and only sees the empty html page. And I know this from fetch as Google in the Google Webmaster Tools.
How do other framworks do it? How come Google can fetch those contents correctly?

Google crawler can't guess what to type in the URL. To help the bot you should create a sitemap with all possible URLs so that the crawler can visit them: Learn about sitemaps
This can also be of your interest: Making AJAX applications crawlable.

Related

Protecting iframe src using server side rendering

I have to display a third party site, say site X, upon successful authentication from my existing APIs, as it is, on my web site. But due to certain reasons, I cannot afford to use an iframe, which is the most obvious solution in this case, as that will expose the site X's URL when inspected in browser. So, I landed up on another idea to create a web app whose front end is written in AngularJS and use existing back end APIs written in C#. The application will basically have two pages, login and main page. Upon successful authentication from API on login page, user is navigated to main page. Now main page, I have to show another site. So, instead of using iframe on main page having source as site X, I will display an iframe with source Url as one of my API endpoint, say baseURL/data. So, this API will basically fetch the site X data and do something like server side rendering and return me an exact replica of site X which I will load in my webapp. When user will navigate on site X and route to any path, that route will be sent to same API and now the response will be replica of baseURL/data/route. Even though my API endpoint is now exposed instead of site X url in browser console, I am okay with this because that API is protected somehow and cannot be accessed as it is without proper authentication which I am doing in my case on login page.
I want to get more thoughts on this entire scenario and possible alternatives. Also, if anyone can suggest if/how it is possible to write such an API. I can think about changing AngularJS or C# as technologies in my project but definitely that's not the most go-to-solution for me. Any suggestions and thoughts are welcome!
Edit: I have created a site using a static site generator. I want my users to be able to access that site only if they are 'my users' i.e. authenticated by my APIs. But, that generator is not allowing me to integrate my API and neither I can get the static assets like .html, .css and .js files that I can host on my own server and integrate my authentication API. Hence, I had to think about a workaround like this.

Building a desktop facebook application

I am trying to build a Desktop Facebook application which will display the list of friends of a logged-in user. I am trying to do this using the Facebook javascript SDK. However when I open the HTML page, i get the following error:
Given URL is not allowed by the Application configuration.: One or
more of the given URLs is not allowed by the Application
configuration. It must match one of the Connect or Canvas URLs or
domain must be the same as or a subdomain of one of the Application
I do understand that Facebook is asking for a URL from where this application will be called. However I would like to just run it by opening a HTML file from my local drive, rather than through a website. Is this possible to do?
There is a post on facebook (https://developers.facebook.com/bugs/165982843535513/) which indicates that this might not be possible. However the post was made about 3 years ago. Is there a possible work around for this currently?
You have to build a manual login flow:
To use Facebook Login in a desktop app, you'll need to be able to
embed a web browser (sometimes called a webview) within the app to
perform the login process.
Source: https://developers.facebook.com/docs/facebook-login/manually-build-a-login-flow/v2.3
Just in case you don´t know, you can only get friends who authorized your App too.

AddThis FaceBook sharing without webpage scraping

I have a web application that is built on Backbone JS framework, that is most URLs have a hashtag section in them. For example: www.abcd.com/xyz.shtml#/route1
the 'route1' is the name of a defined execution route which causes contents including the meta-tags of the page to be populated dynamically on-load by making a number of AJAX calls to the server. I'm not able to integrate AddThis Facebook-share because when FB scrapes the URL it doesn't execute the JS section defined by the 'route1' and thus none of the meta-tags are populated!
Can anyone suggest me a way to bypass this scraping process of FB and/or lets me supply the relevant parameters to FB and FB posts it directly without messing with the URL?
Many Thanks.

Show GA stats of the website on the website itself

We need to show the number of visits for pages of our website. We already use GA for general reports and we assumed that it might make sense to use GA API to get number of visits data from GA instead of building our own counters and increase load to our database and web server.
I read documentation and already know how to build queries that I need. The main problem I'm trying to work around right now is an authorization process. Sounds like if we use OAuth 2.0 each user has to authenticate before he/she can see the statistics on the page and they will have access to statistics of their websites (if they have them registered with GA). In our case this is incorrect, everything we need is just to show our own GA stats at our own website. Easy task as we thought initially but it doesn't sound like that anymore.
Is there a way to authorize our website to Google (like we send come credentials when we use Maps API) and show stats automatically to any user? We wanted to implement it on client side via JS but if this is possible to implement it on server-side only - that's OK. The target platform for server-side implementation is ASP.NET (just in case). Can someone point us in the right direction?
Quite a few options:
You can use OOCharts and a script like this
Use a service like embedded analytics (paid)
Use SeeTheStats and it's widgets
Use google charts and JavaScript
Use explanium to embed a ga chart
Piwik can embed charts too.

Same url for app, pagetab and freestanding site in authorized facebook-app?

I have a facebook app that requiers authorization, therefore I have to pass a redirect url along with the authentification-request.
My app is entierly front-end code.
If I wan't the standalone-version, I can just pass the window.location.href
Something like this won't work for the app-page, because it's iframes from different servers. Therefore I have to hardcode the app-url in this case.
The app is intended to be embedded on different app-pages, so I can't hardcode that. Apperntly I can get the facebook page-tab-link etc using the facebook api. Haven't looked in to the details yet though. Redirect back to page tab after user authenticates?
As facebook doesn't allow parameters, my plan is to add /pagetab/ or /app/ to the end of my url, and add that to the various urls in the settings of facebook. After that I will create different cases for the different url-endings.
Although this soultion sounds like a lot of work. Is there a better way to do this?
If your app wasn’t totally client-side, then you could find the info which page your app is embedded on in the signed_request parameter. But since Facebook POSTs that to the iframe on calling your app, there is no way of accessing it client-side.
As facebook doesn't allow parameters
Facebook allows for a parameter called app_data in the URL, which is passed on to your app. But again, this happens via POST on first page load.
If you were willing (and able to, regarding your platform) to make the little adjustment of having your apps HTML code generated by a server-side language (instead of it being purely static HTML pages), then you could easily evaluate the signed_request parameter, and have the page id written into a JavaScript variable, so that you can use it client-side from there.

Categories