As Google announced "Times have changed. Today, as long as you're not blocking Googlebot from crawling your JavaScript or CSS files, we are generally able to render and understand your web pages like modern browsers", does it mean even if we do not generate html snapshot on server and serve to Googlebot, it will crawl our site developed by using angularjs.
That's true Google doesn't need it anymore.
But other services might use it. See: https://webmasters.stackexchange.com/questions/86262/should-we-drop-ajax-crawling-scheme
Related
I am learning MEAN Stack. I started from learning Angular(from angular.io) now I am learning node.js and express.js
My question is, if there is angular for front end in MEAN Stack then why there are views and template engines in express.js at back-end? Are they alternative for each other or complements each other? what is the boundary for the role and responsibility of these two?
I am looking forward for someone's help in clarifying of my concept for role these two technologies(express' views and angular) used in mean stack.
In order to answer your question, let me explain what is angular and what are template engines in express?
What is Angular?
Angular is a platform that makes it easy to build applications with the web. Angular combines declarative templates, dependency injection, end to end tooling, and integrated best practices to solve development challenges. Angular empowers developers to build applications that live on the web, mobile, or the desktop.
what is template engine?
A template engine enables you to use static template files in your application. At runtime, the template engine replaces variables in a template file with actual values and transforms the template into an HTML file sent to the client. This approach makes it easier to design an HTML page.
Some popular template engines that work with Express are Pug, Mustache, and EJS. The Express application generator uses Jade as its default, but it also supports several others.
So,
Angular is a framework with a templating component baked in. You use it to create Single page Web Applications which means that DOM modification is happening on the client side and the app exchange with server only data. If your concern is template it is plain HTML.
Whereas, template engines' rendered views are sent to client each time by server whenever request is made each time a new page is rendered on server and sent to the client which is Great for static sites but not for rich site interactions.
If there is angular for front-end in MEAN Stack then why there are views and template engines in express.js at back-end?
This is because not every time generating views from angular is recommended sometimes it is better to use Template Engines to generate views and send the rendered page to a client, generating views at client side has its own pros and cons and generating views at server side has its own.
Generating views using template engines (i.e. at server-side):
pros:
Search engines can crawl the site for better SEO.
The initial page load is faster.
Great for static sites.
cons:
Frequent server requests.
An overall slow page rendering.
Full page reloads.
Non-rich site interactions.
Generating views using angular engines (i.e. at client-side):
pros:
Rich site interactions
Fast website rendering after the initial load.
Great for web applications.
Robust selection of JavaScript libraries.
cons:
Low SEO if not implemented correctly.
The initial load might require more time.
In most cases, requires an external library.
So, after knowing the pros and cons, you yourself can better decide that in particular case which one is better for you. Mean Stack has provided options for developers.
As far as your question regarding the role of these two technologies is concerned, Angular is a lot more view generator only, It has features like routing, it as services two-way data binding etc while the template engines are meant to render HTML so that it can be sent to the client.
I hope you will find this answer useful.
References:
what is the template engine?
what is angular?
pros/cons
Angular is a full-fledged front-end framework that comes with its own way of doing templating, using angular-specific markup in your HTML. If you use Angular as your framework, you're more or less stuck with their way of templating within the Angular portion of your application.
Angular Features
It is a framework written in Javascript language
Manages state of models
Integrates with other UI tools
Manipulates DOM
Allows writing custom HTML codes
It is meant for javascript developers to create dynamic web pages in a quick time
NodeJS
It serves the web
It is runtime built on javascript engine in google chrome
It can be considered as a lightweight server which can serve client requests in a more
simpler way than java does
It performs communication operation with databases, web-sockets,
middleware etc.
Why we use angular for Tempting not Express/Node tempting Engine
Server-side rendering is the most common method for displaying information onto the screen. It works by converting HTML files in the server into usable information for the browser.
Whenever you visit a website, your browser makes a request to the server that contains the contents of the website. The request usually only takes a few milliseconds, but that ultimately depends on a multitude of factors:
Your internet speed
how many users are trying to access the site and
how optimized the website is, to name a few
Once the request is done processing, your browser gets back the fully rendered HTML and displays it on the screen. If you then decide to visit a different page on the website, your browser will once again make another request for the new information. This will occur each and every time you visit a page that your browser does not have a cached version of.
It doesn’t matter if the new page only has a few items that are different than the current page, the browser will ask for the entire new page and will re-render everything from the ground up.
How client-side rendering works
When developers talk about client-side rendering, they’re talking about rendering content in the browser using JavaScript. So instead of getting all of the content from the HTML document itself, you are getting a bare-bones HTML document with a JavaScript file that will render the rest of the site using the browser.
This is a relatively new approach to rendering websites, and it didn't really become popular until JavaScript libraries started incorporating it into their style of development.
See Examples HerePratical Example
Basically template engines in Express are mostly used for displaying 404 and other server error messages. I find them ideal for such use cases. Using template engines for complex front end rendering is bad and not a good practice.
Express JS is a web framework on top of nodejs http module. Whereas Angular JS is a front end framework which doesnot depend on NodeJs server to run. Conceptually both are similar in few features like routing whereas implementation is different
I am revamping a project in which i am using AngularJS in frontend. But i was stuck in issue to serve pages to crawlers. On local we are not using akamai, but on staging and production we have implemented it (with old stack).
My question is when i replace my frontend from PHP to AngularJS do i need to implement that prerender.io or other tools like same to provide my page to crawlers. As akamai store pages in plan html, so will akamai is capable of same or do i need to implement that prerender.io or is there some other plugin in akamai which will do the job?
Thanks
Akamai doesn't render any javascript pages into HTML by default, so if you are in need of a prerendering solution then you'll want to use https://prerender.io/
Here's an example config on how to set up the middleware with Akamai: https://community.akamai.com/thread/2288
Is it possible for Google to render SPAs (angular in particular) without the use of a headless browser?
I have built a service purely in angular but I would like to make it possible to apply SEO.
Now Google crawlers are able to render AJAX (Angular) sites: http://googlewebmastercentral.blogspot.com/2015/10/deprecating-our-ajax-crawling-scheme.html
But you can implement AJAX crawling scheme (deprecated): https://developers.google.com/webmasters/ajax-crawling/docs/learn-more
First of all, no, you can't render an Angular page without the aid of an actual browser. It's something that is coming in Angular 2 but for now we are stuck using PhantomJS or some headless Chrome or something if we want to create HTML snapshots.
However, as Alex already pointed out that is no longer needed for SEO reasons!
But, wait, there's more
The reason I write my own answer is to point out that it IS still needed for Facebook, Twitter, LinkedIn etc :(
If a user shares a link to your site on Facebook (or Twitter, etc) their crawler will try to read your page and generate a preview. Unlike search engines these crawlers will not run Javascript, so the preview of your Angular page will look all broken.
If you want your previews to be dynamic you will still need the html snapshots for now.
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!
Just really curious about this,is github coded using angularJS in the front-end? I've noticed that the pages almost never reload, just a bunch of behind the scene requests. It acts more of a web app than a web page.
I don't have anything to do with this site, but I believe it serves your purpose:
http://builtwith.com/github.com
It allows you to enter any site, and it attempts to scrape production details for you.
No, you can see by yourself:
Angular.js is just a very good framework around javascript, whatever you can do with angular you can do with vanilla javascript or with other framework (but with more pain).
They use "PJAX" for the seamless transitions:
pjax is a jQuery plugin that uses ajax and pushState to deliver a fast browsing experience with real permalinks, page titles, and a working back button.
https://github.com/defunkt/jquery-pjax
(seems its now pjax2: https://github.com/github/pjax)
Github uses github so you can check out a lot of their libraries at https://github.com/github