Advanced SEO Optimization of Pages with JavaScript - Lately in JavaScript podcast episode 43

Contents

Introduction (00:20)

Making SEO Friendly AJAX Pages using PhantomJS (1:08)

Google Crawling Pages With JavaScript Better (6:26)

Rethinking DOM Traversal Without jQuery (11:21)

Modify running apps without reloading using Facebook Flo Chrome extension (15:56)

Script Injected scripts versus Asynchronous Scripts (19:13)

Web Animations in Chrome 36 (25:36)

JavaScript Innovation Award Winners of March 2014 (30:14)

JavaScript Innovation Award Rankings of 2014 (38:33)

Conclusion (42:00)

Contents

Listen or download the podcast, RSS feed

Watch the podcast video

Read the podcast transcript

Manuel Lemos: Hello. Welcome to the Lately in JavaScript podcast hangout. This is episode 43, I think. And as always, I have here with me Arturs Sosins.

Hello, Arturs. How are you doing?

Arturs Sosins: Hello. Greetings to all from Latvia. Great to be here.

Manuel Lemos: Yeah, well, I guess now it's already evening over there because this time we're not able to record this sooner as in the other month.

Arturs Sosins: Yeah, it's basically almost night, but it's OK.

Manuel Lemos: Anyway, we are here to talk about what is happening lately in the JavaScript world and we have a bunch of interesting topics to talk about.

Making SEO Friendly AJAX Pages using PhantomJS (1:08)

Manuel Lemos: I'm going to start  with a topic that starts here. It's telling that it's related with the Angular framework. I think this could be use even  for packages that are not about the Angular framework.

And there's an article here that explains how it could be that PhantomJS library could be used to retrieve versions of pages that otherwise would be served by applications via AJAX.

So, the idea is to supply a static version of a page that could be indexed by the search engines. And this is relies on the convention that I'm not sure if it is just Google but search engines in general should support, which is the hash-bang convention.

So if you ever know a URL that has an exclamation mark, I mean the hash character and the exclamation mark followed by a URL, it converts to another URL so called 'ugly URL' which an escaped fragment parameter.

The URL takes as parameters some values that that will be used by the server render the page on the server and serve it as it would appear for users browsing the sites regularly JavaScript-enabled pages, so AJAX content would be eventually served.

The idea here is that this writing could allow the content to be indexed properly by search engines.

This is more for those kinds of sites are not really applications, are more content sites that have different pages but they are loaded dynamically using AJAX because regular applications probably doesn't make much sense, I mean, regular AJAX-based applications because they do not use, as it suggested here, the hash-bang convention.

But I think the idea is interesting and PhantomJS can be used for this purposes of helping index, I mean generating static versions of the pages, which otherwise would be more complicated for your applications server to render them.

So, PhantomJS is an headless browser that will crawl the pages and render them and to serve the final JavaScript for those AJAX-based pages.

So I think this is interesting. I don't know, Arturs, if you have been using any sites with AJAX that otherwise you would like to have content on the pages being indexed  by search engines?

Arturs Sosins: Yeah, actually, I have. I have a client I think a year ago - maybe even more - where something like that was needed. And basically, what I did was creating PHP modules, one that outputs simple JavaScript and fetches content through the API and others that PHP would generate HTML basically based on a template and output it.

So, that's why creating two different versions of website which could be shown based on its need, base on the URL, you show the escaped fragment. Well, it was almost twice the work. So, if you can really put a headless browser to render it through and then output the HTML,  that really saves you a lot of time.

Manuel Lemos: Yes. That's precisely the point. I'm not sure if it is used, there is a special version with AngularJS because the article here tells about AngularJS and working with PhantomJS.

But from what I got, I suppose that it can be adopted to other technology that may be using it on the server, not necessarily NodeJS with PhantomJS, could be something else.

Google Crawling Pages With JavaScript Better (6:26)

Manuel Lemos: Also related with this topic, the next topic is precisely about something also related to search engines, specifically with Google, that is announcing they are working on understanding Web pages better because, nowadays, many sites have content served via AJAX.

For search engines to crawl it properly, they need to somehow interpret the JavaScript that is on the pages, to follow the eventual links that the users will click or forms, and somehow figure what is the content that the users will see because they will not follow regular links that Google bot would  crawl at least in pass. So they say they're now able to crawl webpages better with the JavaScript.

For now, this is an announcement  because they are also saying that in the coming days, webmasters will be able to see in the Webmaster Tools site what Google is crawling, what Google is seeing. So you can see a preview of what Google is crawling even when you have AJAX-based pages.

And this is interesting because it comes exactly at a moment when I am implementing a new webpage designed for package pages that will have tabs and part of the content will not appear initially, and when the user click on the tabs will switch to another content that becomes visible.

And if Google is not able to crawl those pages properly with the JavaScript, it will not see what the user is seeing. And it'll probably miss some important content that could be indexed.

Well, for now this is just being announced. We don't know what part of this is working, but I think it will be interesting to see if Google is able to actually crawl the whole content, not just what is loaded on the first access.

Also, related to this, previously I mentioned the hashbang convention, but later Google also said that if you use HTML5 pushState calls, it will also be able to crawl the URLs of the pages that will be there and pushed to the browser history.

And this is important because if you want to have your Web pages served with JavaScript be indexed properly, you need to at least use HTML5 pushState calls. And this is the important thing to remember if you are working on a site.

Arturs, have you been using HTML5 pushState?

Arturs Sosins: Yeah, I actually haven't heard that news. And it was quite interesting because I thought it was working also in the client-side, so how they actually know, how would their server be notified? They still need to be separated?

Manuel Lemos: The idea is that they interpret the JavaScript on the pages and when they find pushState calls, they interpret it as a new URL to be indexed. So, eventually, that URL would show the content and therefore acts as a different page on the browser.

So for me, it is as if you have a page that has several tabs that would show different content switching parts of the pages. If you use HTML pushState, for instance for each tab, it will be viewed by Google as different pages and they will index it properly.

That's the expectation. We don't know yet if that will work well. But we'll see.

Rethinking DOM Traversal Without jQuery (11:21) 

Manuel Lemos: For now, we'll just move on to another topic, which this time is related with...

OK, this is an article. I think it is interesting because it somehow reminds people that just because we've been using jQuery, you don't have to use jQuery all the time. Nowadays, it's not even needed for some purposes. And it talks about the DOM APIs that are available to traverse the documents.

And in this article, it shows how we would do it using jQuery, with all the conventions that people are used to. And below, this is a long article that tries to show many types of operations through Traverse DOM articles.

And in the end, it talks about... basically, you don't need to do most of that with jQuery because there are calls for QuerySelector lets you select nodes that matches some selector expression.

Arturs, have you been using any of this calls in your applications or do you still rely on jQuery like many other people?

Arturs Sosins: It depends. Actually, when I create something for a client, I usually use jQuery. But if I create my own packages that are published at the JSClasses site, I try to do everything on the basic JavaScript API, so I'm making it more independent and probably even faster.

But, in the beginning, you actually mentioned a great point. I remember that we have an intern that could not really separate jQuery from JavaScript. He was like thinking it is the same thing, 'So what's the difference in JavaScript, jQuery? It's like the same.'

So I think many Web developers are using jQuery and probably are not even aware that it is an abtraction framework and that basically everything that can be done underneath, and this article shows perfectly that almost every jQuery selector can be matched with the same one-liner, with underneath API.

Manuel Lemos: That's the problem in the latest years. jQuery became the default for many people. So, they are so much used to jQuery that they actually don't know that it's matched to somehow calls of the DOM that are already available, and probably, it's just a mapping one-on-one internally.

I did  not peek on the jQuery source but I suppose, nowadays, most browsers are supporting these APIs to query documents using these selectors. Sometimes, it won't even make sense to use jQuery but they are still using it.

Arturs Sosins: This article actually also illustrates the HTML.js. I wasn't aware of it, but looking from it, it actually reminded me how you can traverse XML files using XPath. So it's kind of completely other approach. But in some cases, it could be also more usable than jQuery. So, that is also an interesting part of this article, if someone is interested in it.

Manuel Lemos: Yeah. That's true.

Modify running apps without reloading using Facebook Flo Chrome extension (15:56)

Manuel Lemos: Well, now moving on to another topic this time about a browser extension for Chrome. It's called Facebook Flow. Of  course, it is about Facebook, and it is different than I was used to because it seems very advanced.

I just read about it, I did not try it in practice, so I hope I'm not describing it inaccurately, which is an extension that you can install in Chrome and lets you update, modify code and have it updated all right in the browser. That's what I got.

Did you also get that? What was your interpretation of this?

Arturs Sosins: Yeah, basically, as I understood there is a process like a server running that is constantly checking the files and if you change them, probably in other ETA or maybe specific client, then it automatically makes the change and reloads all the new file basically real time, outputting the changes.

So it's probably even more than real-time development tool. It's also like a deployment tool so it much be more complex than that. It's just the overall vision that I have of what was described.

Manuel Lemos: So the idea here seems to be to avoid that you need to reload your whole application to... I mean, the whole page to load the new versions out of the scripts. But I wonder, is this really necessary or is this just a special need that Facebook figured in their own development?

Arturs Sosins: It's hard to say. If you look at the page, there are lots of real-time events like notifications, chat messages, that happen without even reloading the page, so maybe one user is used to it and not even ever closing the page and always let it runs. So in this kind of situation, that is a great way to update that page.

Manuel Lemos: Well, maybe they are thinking about users that never close the browser to reload the page and figure that there are newer versions of JavaScript, which is probably really something which is very related to the way Facebook updates their own pages, applications, that probably are having frequent updates and they need the users to reload the pages and they are not reloading.

OK, it's interesting but I don't know if it is useful...

Arturs Sosins: It's just speculation.

Manuel Lemos: Right. Well, it's either that or we don't have a clue and did not get anything right.

Script Injected scripts versus Asynchronous Scripts (19:13)

Manuel Lemos: OK, now moving on to another topic. Let me share the screen here.

And this one is an article that is telling about some findings about the way people load scripts in their Web pages.

Originally, you only have this way of using the tag script there to load some JavaScript code. But then, with the concern that the pages should load faster, there were some techniques that were started to being used to actually defer the load of those scripts towards the end of the page load.

So, the actual page content loads first before those scripts. So, it shows here the regular alternative of creating a script element and appending it to the head dynamically and it will load the script with this URL here.

And then, it starts commenting that since the... He has analyzed the loading graphs that browsers, for instance like Chrome, can show to you that it's not really, really asynchronous because there's some blocking period.

Arturs Sosins: Yeah, basically, because anyway in JavaScript, it was detected, as they assumed it may change some CSS properties, the visual stuff. So they need to load all the CSS styles first, interpret them and only then allow to loading the JavaScript.

Manuel Lemos: Right. So, it figures that  to really make the JavaScript, it is better to use the async attribute in the script there because that really tells the browser that it is to be loaded asynchronously. Now, this is the official way to do it, the recommended way to do it.

So if you thought that using that approach of writing, adding script tags dynamically to your document was really asynchronous, so the message from this article is that it is not really asynchronous and the loading process of pages will be delayed a bit.  And so, he recommends to use this async attribute.

I just wonder if this is generally supported by all browsers. I think not that it should but I'm not really looking up all the browsers what they support, what they don't support. What do you think, Arturs? What is your experience? Have you used different browsers?

Arturs Sosins: About the browser support issue, I always think of it that way, that if I can optimize it, provide a better experience, faster better performance to the user with newer browsers and I could actually sacrifice the user's real browser, but clients do not always see that way.

Manuel Lemos: Yeah, well, the question is which are the users with old browsers. Which versions?

Arturs Sosins: It's really, you need to test it always. You can't tell.

Manuel Lemos: I know, right. That's the problem. I don't know even if there is a resource that says, "Oh all of the browser support will async properly, which from this version". It would be interesting to know. That's probably an attribute that's been supported for many versions alone. It is not even a concern.

Arturs Sosins: Yeah, mostly in these cases, you need to probably look not in browser but in the HTML renderer version like they have a tree then. Try thinking Internet Explorer or WebKit and Chrome and see what they can do and then you can know which browsers have those versions and blah, blah, blah. 

But actually, what I wanted to tell that I looked at Google Analytics code. Because if you inject the script and I was wondering why. And basically, because they need to set up some variables before the script is loaded and use them, but when injecting script, they are setting their async attribute on.

So, basically, the injected script loads asynchronously. So, that is a kind of combination of what was told in the article but also great alternative, so that is if you need something to be done before loading the script.

Manuel Lemos: Yeah, you can always have some JavaScript code just to set some variables and then have a separate path to actually load the script that you want to load asynchronously. You don't have to use it on a single tag. Although it could if you use that approach of appending the script type dynamically.

OK, but now moving on to another topic. It's not the one. OK, now, you're looking at my shell. Not very interesting. I think Google Hangout shifted the windows here.

Web Animations in Chrome 36 (25:36)

Manuel Lemos: OK, now moving to another topic which is about a new API. I'm not sure if this is the right name to call it or is it some API that was extended. I'm still in doubt. Probably this is a new idea, but OK.

Basically, it is what they call Web Animations, by which they allow you to animate some page element but while defining CSS properties that will change their values. That is what I got, because I have not tried this to make sure.

Arturs, did you try this to see what it does?

Arturs Sosins: Not really. But I can comment on stuff basically. If you scroll a little more lower, then you see that the first code block shows how it's done.

Again, more up, then it shows how it's done in CSS, because in CSS 3, the animation was... Yeah, you can assign to styles and the animation was already available for some time. But there was no really a way to do that handily in JavaScript, except from setting the style properties.

But now, in the newer Chrome version basically, there is an API for that, that you can animate and provide timeframes more easily and it's a playable object that you can play, replay, stop. So, I think it basically substitute the need for jQuery animating and uses it purely on browser level for CSS. Same thing that does CSS animation. So I think it's great.

Manuel Lemos: Right. You mentioned jQuery but I think there are several libraries that already did this.

Arturs Sosins: Yeah.

Manuel Lemos: If I got this right, this is just to let you define some properties that will be changed. I'm trying to remember but I think there were some packages that...

Arturs Sosins: Most probably you also had one, because you have lots of animations on the JSClasses and PHPClasses site.

Manuel Lemos: Yeah. And the idea here is... If you rely on the browser version, you no longer have to use any libraries, but at the same time, this requires a newer browser version.

Arturs Sosins: Yeah, that's all new features.

Manuel Lemos: The idea here is... I'm not sure if this is a good idea at all because why are you going to rely on a newer browser version but not everybody is using.

Arturs Sosins: Yes, but if it will become the part of the standard.

Manuel Lemos: Yeah, but only, it would take time until all browsers support it, because now it's just Chrome 36 is supporting it now. I'm not even using Chrome 36.

Arturs Sosins: So as I said, it happens to be a new additions that basically they take time to propagate all browsers. No browser support it. It doesn't mean that they are dead.

Manuel Lemos: Well, I don't know. I have my mobile phone for four years now and I don't know, when I upgrade it, the web pages rely on versions of browsers that we are probably nothing will be supporting the browser that I have on my mobile phone.

And the best part is it's easier to update, many users are updating it automatically, but mobile phones is not something that happens frequently.

Arturs Sosins: So the bottom line would be, you can use new features but always for the latest mobile.

Manuel Lemos: Right. That's what we have to do. And we have to implement a lots of plugins to deal with conditional code that could be executed or not.

JavaScript Innovation Award Winners of March 2014 (30:14)

Manuel Lemos: Anyway, now, we are moving on towards the end of this podcast. And we are going to talk now about one regular section on which we comment about the Innovation Award winners.

And this time, we are going to talk about the nominees of March. They were voted on April and then in May, the results come out. So now, we can talk about them.

There were four nominees. Arturs, which ones would you like to comment ?

Arturs Sosins: OK, let me start by sharing the screen.

Manuel Lemos: It helps.

Arturs Sosins: Yup. There it is.

So the first one I would like to comment about is a great idea, a class of Franz Josef Brunner from Austria. And what he provided, he provided a way how to encode a hidden message into images.

I can probably show a code. Yeah, here it is, how it's done. Basically, you create an image and you set the image, you get to encode different messages in it. The thing is called steganography and what it does, basically creates, encodes or creates the messages in everyday objects. As you know, they say, if you want to hide something, put it in the most visible place.

At first I thought that this package just simply encodes the message in the metadata or something like that, but now, it actually encodes it in the pixel values so it also alters image. You need to experiment with different modes of alteration to see what best suits you. And that makes this class even more awesome. That's why I really, really like it.

Manuel Lemos: I think probably it would be hard, if possible at all, to put... hide data in metadata. Well, in this case, this is just changing the pixels in the canvas image to have it but it's probably in PNG format, if I got it right.

Arturs Sosins: Yeah.

Manuel Lemos: I don't know if there is any control over the content that goes in PNG data that is saved by the browsers on canvas.

Arturs Sosins: Most probably, I think they all could be encoded and decoded into RGB alpha values. So basically, channels.

Manuel Lemos: But off the channels is still part of the picture, not the metadata.

OK, and what would be the other one that you would comment on?

Arturs Sosins: And the other one is created by Michele Prigigallo. I hope I read this correctly from Italy. And he created a slider . Well, sliders mostly nothing new, simple slider, but it's innovative component is that the whole slider is defined through XML file definition.

Basically, you can create single XML file that defines the images, positions or transitions, durations and stuff like that and titles. So, the packages still generates everything from the XML file that you can figure and change and that's why it makes it so innovative and great.

Manuel Lemos: Yeah, that's interesting because it allows you to separate your Web pages code, JavaScript code from the definition of those animations. So it eventually could dynamically load different animations from different URLs that define XML of the animation metadata.

And on my part, I also like to comment on a couple of classes. Let me share the screen here. Well, the first one that I would like to comment here is about this one, which is called JavaScript Timed Functions.

It is interesting because this allows you to implement a sort of... could be animations, could be anything, anything that has to execute at specific intervals of time, you can use this object to execute some code after some time. And it allows you to define the code, define the times and the call back functions that will be called here.

And as you may see in this example, it is very simple and you can add functions, I mean call back code that will be used to be called after some time delay and here you define the delays.

So it's very simple. As I said, it could be used for animations but could also be used for any other purpose that is not exactly something about animations.

And this package here was developed by Jimmy Bo. Actually, this is an alias. I know his real name. This is a secret alias. He wants to preserve his privacy and Jimmy Bo is just the way he calls himself on the site. And he's from Canada.

And also, talking about him, there is another package that was also nominated that he apparently has written. It's also interesting. It's somehow similar. It is to calculate coordinates points in lines, curves and shapes of any form. But instead of drawing those shapes, it just returns the coordinates. And this can be interesting to many purposes on which you need to somehow render something but it's not exactly to draw.

For instance, if you have a game on which you like to show some graphics that are being animated according to some logic, some shape, you can use this library to calculate the different positions of the points and have a separate code to render something that positions those points.

And this is quite interesting and somewhat unusual. So kudos to Jimmy Bo again for this contribution, because it is really great to have more innovative packages like this.

JavaScript Innovation Award Rankings of 2014 (38:33)

Manuel Lemos: And talking about innovative packages, I also like to comment again, because starting this year, we have the Innovation Award championship by country. So, let's take a look at the way the rankings are up till now.

So, by individual users, so far, Jimmy Bo is leading. He has submitted already three packages and earned seven points. And he is followed by several others that only submitted one package so far. So this is still very early in the year and nothing is definide but so far, Jimmy Bo is ahead in the ranking.

And thanks to his contribution, so far, Canada is leading the ranking. Again, has won three packages and 7 points so far. This time, it is followed by Italy with two packages and 6 points that thanks to other authors from Italy. Here, we can see who they are, Alessandro Vernassa and Michele Prigigallo. I'm not sure these are right ways to spell their names. I hope I'm not pronouncing them incorrectly.

Well, as I said, we are still very early in the year. So far, we have been commenting up to winners of March so there's still plenty of time until the end of the year for this championship to evolve.

Arturs, have you been following up with these rankings? Anything worth noticing other than there is nobody from Latvia participating so far?

Arturs Sosins: I'm actually quite impressed that Jimmy Bo pulled Canada top first place all by himself. So, yeah, that's a great respect. And if he continues that, he would be unstoppable.

Manuel Lemos: Yeah, let's see if he keeps following this trend. But at least, by country, Italy is also going strong and probably easier for... So far, two nominees have been contributing for bringing up Italy.

There is only one from Canada and against two from Italy. It probably would be easier for them to surpass Canada, but OK, as I said  it's very early in the year. Let's see how this evolves.

Conclusion (42:00)

Manuel Lemos: Well, basically, we have practically reached the end of this podcast. This month, there is not so many topics to talk about, but next month, we will have something to announce.

Actually, probably, if you have noticed there is already a new design being implemented. You can see it already, how it looks here. I'm not going to comment much about it. Let's say that it's still a work in progress, but by the time, we record the next hangout, it will be already released. And it's much more usable than before.

So, I'm very excited to work on it, to release it soon because the user experience would be much better for all users.

Well, as I said, we'd reach the end of the podcast. That's all we have to say for this month.  So, on my behalf, that is all for now. Bye.

Arturs Sosins: Bye.

[Music]