We have an AngularJS based web application that currently uses hashbang urls, such as:
www.example.com/#!/item?id=1.
For crawling purposes, we use the prerender.io service to render/cache pages. For our meta tags (og, twitter specifically) we use an angular library called angular-view-head. Until around a month ago, this was all working beautifully, and our pages were both searchable and sharable as expected.
Currently, when scraping pages on our site, crawlers appear to be switching the path for the query strings. For example,
www.somesite.com/#!/item?id=1
becomes
www.somesite.com/?id=1#!/item
Which, as you might suspect, returns a 404 always.
After some checking, this seems to have started sometime around the 7th of February. We haven't changed anything with our prerender setup nor our URL schema. I've checked google webmaster tools, and see many 404s for urls such as these.
I haven't had any luck in my research over the last few days finding any similar issues.
Has anyone faced something similar with this style of setup? Any ideas on how to fix this issue?
For anyone who finds this question, we solved this by moving to HTML5 push-state navigation.
Related
I remade my website, and used angularJS for some part of it. It is online for three weeks now, and seems that Google still not indexed any of the angularjs content.
I would like to know what is the status of Google crawling Angularjs in 2018?
Searching the web returns old articles that claims that Google cannot crawl Angularjs, although google claim they do crawl Angularjs.
Should I wait patiently for Google to crawl my site or generate a server-side-rendering instead?
Also, I would like a link to how to properly do server-side-rendering in 2018?
Is hashbang is still the standard way to do it? There are some similar questions on Stack Overflow that are several years old, but I wonder if the situation has changed.
here is a good article - http://kevinmichaelcoy.com/blog/2018/02/19/2018-search-engine-optimization-with-angularjs-1-x-single-page-application/
Also, for your sanity, you can check what your website looks like when Google crawls it by going to Google Webmaster/Search Console and under “Crawl” choose “Fetch as Google”, then “Fetch and Render” :
https://www.google.com/webmasters/tools/googlebot-fetch
In the case of my site - google doesn't index angular JS so well
For some page it display the content as I would expected, but on other it just display the raw html (i.e. with the {{title}} ng tag instead of the value of the $scope.title)
I'm fetching a category page that uses ajax to display the category content - some category display well, thus it might be a bug in the googlebot-fetch tool
https://buyamerica.co.il/ba_supplier#/showCategory/ba-suplier/840
https://buyamerica.co.il/ba_supplier#/showCategory/ba-suplier/468
But I still don't know how long should it take for google to show it in the index?
NOTE: according to this https://webmasters.googleblog.com/2015/10/deprecating-our-ajax-crawling-scheme.html server side rendering is deprecated
How to do search engine optimization (SEO) for the website built with angular js.
please explain how can we do it.
To my knowledge there is only one way to do this:
By making html snapshots to serve up rendered JavaScript pages
Now there are different ways to achieve this.
The easy way
The most easiest way to do this would be to pay to a third party. I am familiar with Prerender.io. I haven't used it myself, but when I needed SEO for a site built with AngularJS this was one of the options I have considered. Just browse the internet a bit and read up on their service, you will find some pretty good reviews.
The alternative
The alternative is Angular-SEO by steeve. Basically it does the same as prerender.io but it required you to launch the PhantomJS server on your own server (to which you need sudo access/rights). This, together with a bit of server configuration / tweaking in the htaccess file in my case did it for me. You basically detect the useragent / robot / scraper that is accessing your site and you redirect them to the location of your Angular-SEO server (address:port), which then returns a snapshot of the required page.
I decided to take the Angular-SEO= route, since it was an application for a client and I did not want to pay for the prerender service myself nor asking them to pay an extra monthly fee for a problem that I caused (I chose to use AngularJS without having investigated the SEO part (regret that))
The other day I saw that DivShot has partnered with Prerender.io which makes it an interesting choice to consider for hosting
Is it safe to use<link rel="canonical" ref="{{canonical_url}}" /> in an angularjs page, or is there a preferred way to handle this?
Google is now automatically crawling and rendering javascript, which is great for angularjs sites. But, I'm concerned that Googlebot may not wait for the rendering when deciding about canonical pages, and I don't want to mess up our site by having Googlebot think all pages are "url".
Using Google's Webmaster Tools, I can see that Google's crawler can render the pages just fine, but I'm not sure how to tell how it's dealing with a canonical tag. Other reading implies that Googlebot stops reading/rendering a page if it sees a canonical tag for another page it has already processed.
As #JB Nizet mentioned, as I witnessed, Google as of Sep 25 2015 executes JS, render it properly in webmaster but more like "for demo". En mass production links still not executed RELIABLY by Google ( sometime not at all, sometime quite good).
So we still have to use prerender.io (which is quite good). But attention: use the one with phantomjs2, phantomjs1 is not good at parsing/reading angular apps.
IMPORTANT things: they do support httpCode, and all your double curly braces.
Good luck!
Source: my painful days setting up SEO for our angular platform
Google will render and index plain SPA without any static html snapshots.
BUT: i have a project with change over to https. usually i dont redirect with 301 but just add https in the canonical tag. on this site google has not yet recognized the change.
Same time on another project, same changeover to https with same code but with html snapshots included:
google has recognized the change to https and right version is in in the search results.
i wrote my own directive to have a nice seo header with canonical tags. its better to use your pages head tag as directive call.
https://github.com/w11k/w11k-angular-seo-header
If you want to prerender your site do not use a moron service like prerender but simply add a task to your build process. Setup with Grunt/Gulp is about 15 mins.. once!
I'm deciding whether it's safe to develop my client-facing app in AngularJS using pushState.
I've read that when using pushState in an AngularJS app, we don't need to worry about Googlebot because it can now execute enough JS to produce an HTML snippet for itself. But then I wonder about Bing, Facebook and other bots and scrapers. The tutorials I've seen for making AngularJS SEO-friendly all deal with apps that use hashbangs (#!). These don't apply to me since I'm not using hashbangs.
Does anyone have insight into this problem? What are some methods for ensuring an AngularJS app that uses pushState is SEO-friendly and Social-scraper-friendly? If you use a service like Seo4Ajax or prerender.io I'd appreciate your thoughts on it.
Note: As I understand it, when developing single page apps in the last couple of years it has been necessary to send HTML snippets to SEO crawlers. This was accomplished by using hashbangs and a meta tag that let Google, Bing and Facebook know that it needed to replace the bang (!) with an _escaped_string when making a request. On the server you'd listed for requests with _escaped_string and deliver the appropriate HTML snippet using a tool to generate HTML snippets like phantomJS.
Now that we have pushState, I don't see how we indicate to javascript-less bots what part of the URL to rewrite with an _escaped_string or even if it's necessary. I'm having trouble finding any information beyond "you're site will be okay with google ;)".
Here are some other SO questions that are similar but have gone unanswered.
Angularjs vs SEO vs pushState
.htaccess for SEO bots crawling single page applications without hashbangs
Here's a solution I posted in that question and am considering for myself in case I want to send HTML snippets to bots. This would be a solution for a Symfony2 backend:
Use prerender or another service to generate static snippets of all your pages. Store them somewhere accessible by your router.
In your Symfony2 routing file, create a route that matches your SPA. I have a test SPA running at localhost.com/ng-test/, so my route would look like this:
# Adding a trailing / to this route breaks it. Not sure why.
# This is also not formatting correctly in StackOverflow. This is yaml.
NgTestReroute:
----path: /ng-test/{one}/{two}/{three}/{four}
----defaults:
--------_controller: DriverSideSiteBundle:NgTest:ngTestReroute
--------'one': null
--------'two': null
--------'three': null
--------'four': null
----methods: [GET]
In your Symfony2 controller, check user-agent to see if it's googlebot or bingbot. You should be able to do this with the code below, and then use this list to target the bots you're interested in (http://www.searchenginedictionary.com/spider-names.shtml)...
if(strstr(strtolower($_SERVER['HTTP_USER_AGENT']), "googlebot"))
{
// what to do
}
If your controller finds a match to a bot, send it the HTML snippet. Otherwise, as in the case with my AngularJS app, just send the user to the index page and Angular will correctly do the rest.
Supposedly, Bing also supports pushState. For Facebook, make sure your website takes advantage of Open Graph META tags.
Not sure what i am missing, but I have pushState working on my Backbone based app, where I could click around and have my URL look like www.example.com/route_specified, however if i try to go directly to that page it shows up as not found. If I do www.example.com/#route_specified it works, and quickly changes back to www.example.com/route_specified on the address bar
I am guessing i need to do something in Apache to handle this and make sure that all calls resolve to the index or something like that, but can't find explanation.
Correct. Think about it this way without pushstate enabled. Your server is still trying to serve the page at that route. Since it cannot find the specified document at that location, it throws a 404.
Technically speaking, your server should still produce some sort of result at the url location, then have Backbone take over. In it's simplest form, this is called progressive enhancement. The server should still serve some sort of static page with critical info, which will eliminate issues you will have with SEO. Work your site/app with javascript disabled, serving only the relevant data. Then have Backbone takeover. I have just come across Mashable's redesign, and they integrate progressive enhancement extremely well with Backbone.
If SEO is not a concern, you could always redirect the user to the index page. Just remember that search engines will only index your app page then. If your content is being served dynamically, there wont be any data to index.
Hope this helps.
Thanks
Tyrone