SEO Best Practices for JavaScript-Based Websites

What I’ve been doing for a few years right now it’s working with small and large websites on DA, but not telling them not to use JavaScript or not telling them not to use the best web technologies and expense that we can create for your user.

But actually make sure that those websites and this great user experience that you can create is understood by search engine and platforms, social medias that need to access your website and information that is on it.

So that’s what we’re going to talk about today. So I lead the technical SEO team at moco. I thought it was really cool to have like Jason LD like for information unless you speak after Paul Shapiro and it looks like he just copy and pasted from him.

So but we never like talk about that. It happens to both of us doing that.

So anyway, next time I will speak before I’m and there will be origin

Hello. So I’m fully we have like a mix of like marketers here and developers.

And the thing that like we always look into first is really the crawl aspect of things.

It’s it’s great and like content marketing, and all of that, like plays into obviously that but like, it’s this simple like the idea that like your great user experience all the awesome content that your teams will put together.

If search engine cannot access that if they cannot, like crawl that. Don’t have no way to index it, and then it can be right.

So that’s the place where we start is like looking at like crawling. And since a few years for a few years right now, like Google has been like rendering web pages.

So instead of looking at the source code, the look at the Randall page and what’s really on it. What do you Users can actually see. So right now it’s a lot about that yet act, it’s the pages render of an hour to make sure that users can get that but like that.

So so it’s yet to be tested.

You’ve probably heard of him lately. He’s published like a lot of tests. game.

He’s published like a lot of tests around like all search engine, like render web pages. And so we are working with him like, Come on baby, because since they do announce publicly and claim that they run their web pages, well, we’re not going to take their word for it. We’re going to test that and so you really are that works for them and find out how they do that.

So On the Google side, we got more information, they decided to be more transparent about it and like, tell us exactly what they are doing. So they are using Chrome 41 for now. So it’s pretty old version of Chrome.

And But still, that’s that’s good information for testing automation portal talked about that. We know that a lot of tools, and I’m going to mention that later.

But like a lot of tools right now, they all rendering like JavaScript as well.

So when you crawl your website, you can have a better understanding. using Chrome is definitely the way to go here to get closer to what Google is getting when they call your websites.

The good news is that Google is working on updating that they are not going to be using Chrome 41.

In the future, they are going to always be so Google dot and caffeine to be specific was rendering your web pages.

Going to is going to be using like the latest available chrome version.

So when users get whatever chrome 60 something, Google dot and caffeine, they’re going to be using that as well.

So there was no need for your tools, the automation to specifically use Chrome 41, I think to be future proof here, like just use the latest version of Chrome, because Google bought and again, caffeine to be specific, we’ll get there as well.

So the only thing to remember is that some API’s are not being activated, or used, for example, like the just the payment stuff, and like service workers are disabled, they don’t need to use that from a calling and indexing standpoint.

So with that said, the idea of that, unfortunately, we can still read in the industry somewhere on blog post, of being careful with web technologies because Google can get it then it’s kind of like control productive at the end of the day.

When we Google and other search engines say you should create awesome content and focus on the user. And I people like Yeah, but it doesn’t help.

But it’s kind of what it is. And our job as like technical SEOs, or consultant or whatever we do here is not to tell people to be careful with what they are doing.

It’s to tell them Yes, build, like the best user experience that you can use the latest technology make like awesome progressive web apps and things that go really fast, and that are like interactive, and fluid and like, looks like native apps, or whatever.

And our job is to want them that, like make sure that search engine can understand that another platform, not the other way around. We don’t build websites for search engine, we built website for users.

And then we have to make sure that other platforms and search engine can understand that and we want you with ranking for that.

So origin or problem with like those new web technologies and search engine or platforms like follows not getting like the JavaScript things is that is in the source code, you get nothing basically, like if you look at like a modal on website, well with a JavaScript library, you get that.

So literally on like a few line, like 40 lines of code, you get the opening HTML tag and the closing one, and there was nothing. So okay, sorry.

So that’s the original problem here. We have no content, like for any client to pause and understand, because it’s all in the DOM. Everything is there for the user to see for the user to consume.

But like crawlers, and platforms that do not render the web page like a browser do, like the user, see, then they’re not gonna get anything out of it.

So Again, Baidu, Google, like some platform have started to do that for years right now, they’re pretty good at it.

Except that there is like still things to remember. And we’re going to talk about that to make sure that they can see it.

Because it’s not about letting like those platforms and search engine, like, use their new technology and like up for the best, you still need to make sure that they get there. Because it’s, again, not just about Google, like being unfortunately, we’re pretty sure they are working on it, they have to execute like JavaScript and render pages.

We’ve seen examples like Sims, sometimes they follow JavaScript for directs and they render some type of content, but they have not claimed publicly that they are doing that at scale.

So we can unfortunately not rely on that form. And it’s not just about search engine, like think about just optimization for like Twitter cards or Open Graph tags that you put in the section of your pages.

It’s all like dynamically render on JavaScript. And it’s not going to work for Facebook, LinkedIn, and Twitter.

And I’m not going to see that. And so you’re not going to get your optimised like snippet to share. And we all know that social shares are quite important.

So a few things. And we’re going to go into details here, but like a few things that do not work directly or like, is the fact that if you cannot crawl the pages, because like, you don’t have like different URLs, you know, I’ve heard like some people talking about the web without your eye or URLs.

And they thought, like, okay, I can that work like something as an address, you know, it needs to be somewhere to be found.

It’s like, you cannot just tell Amazon to ship you something. And like, if you don’t give your address, it’s the same idea.

Things needs to exist somewhere to be found. So when you have a single page application, that’s great. It should not be a single URL application because content needs to be somewhere else.

So unfortunately, with JavaScript frameworks sometimes, and it’s getting better like by default, but you can get just everything on the same page.

And like nothing, you click, and the user has a great experience, they go from one page to another, which search engine cannot do that. So that’s something that definitely needs to be fixed. Or the thing is sometimes that yes, the content will change, like the main content on the page, but the title will stay the same. And everything in the ad section of the page will stay the same.

So that creates like issues as well. Link structure. And then we’re going to go into detail here about like few things that need to be remember and taken care of. So let’s start with a crawling things.

Again, we’re going to think about crawling, indexing, and rendering right in the middle. So the URL structure as I just mentioned, so originally, like frameworks, like Angular JS, by default You get this type of URL. And it doesn’t work.

Why?

Because everything is still the fragment identifier or the ash. collector is not sent to the server. It’s the request is not made like you all like that actually is just example.com. It’s not example.com slash ash URL.

And so originally, like, engines like that are not acting like a browser, they’ll not they will not request that they will just request example, that gum, which is still what being is doing some bit better for Google right now. But still, it’s something the content being loaded after the ash.

Because of that you all will just happen on the browser and not for crawlers. So the fix was the ash bang.

So there was a scheme introduced by Google years ago, saying, Okay, if you have this type of URLs, like just add like a exclamation point after you will understand that we need to request a different URL for that particular URL.

We’re going to request the escape fragment URL and there, you have to set up your server to give us HTML snapshot, which is a pre rendered version of the page. And then we’re going to index that content that we find there. But we’ll still show the.

Anyway, you see my point, it’s really complicated there got rid of it. So why I strike out Google because it’s coming.

I was supposed to come this week as an official like Google, but Google post announcement, they deprecated the recommendation of that scheme by two years ago, but they’re going to announce that they’re actually like, deprecating the scheme itself.

So it’s going to roll out like through q1 of 2018.

They’re going to stop requesting the escape fragment.

So if you have that in place, if you have this setup in place where you serve snapshots on the escape fragment URL, then Google is going to stop doing that.

So you should probably keep that in place for being it’s still being is still supporting the the scheme here.

But Google is going to stop and just render your page with the main URL in a browser type of setting and index that. So it’s kind of important to know, because if you have some type of rendering, not issues, but like things on your side that like our render, like in a different way, that might not be in the rendered version.

But in the escape fragments snapshot that you serve to Google, then you might run into issues when they stop requesting the escape fragment and only render your page.

So that’s where we’re going here and think about all the things so should have like switch to that slide.

So anyway, exactly what I was saying we were all dedicated the recommendation but also the scheme rolling out like until actually q2. So anyway, so the recommendation is to use clean URLs that any bought any quality access any user can share.

And you can do that usually using the push state function of the story API that came with html5.

So it’s not like something new. And that’s the recommendation to create like, just you asked and look completely clean.

Until linking, this is a really, really important thing. On click events JavaScript event with like window locations do not really like represent like classic href links.

So using this type of implementation, it’s seamless for the user, they get exactly the same thing. They go from one page to another, but search engine, they do not like them, I see the URL because it’s like clearly stated in the window location statement.

You may just have like a URL string here. And we know that Google crawls everything that they can, sometimes too much and define like, just That’s why you get spike in like four fours because they are finding strings that looks somehow like a URL.

And they’re going to try to crawl that. And you get like four fours, because they don’t really exist. So anyway, they may find this you out, but they are not considering them as classic links.

And so that’s really, really important to you. Regardless the framework, the JavaScript implementation that you have, that you make sure that your internal links or a trife classic ones, because the power of internal linking is just I mean, huge. internal link can override canonical tags they can they are more crawled than like you all that you will put in a sitemap.

So anything that like is linked internally is it’s really strong signal to search engine. And you want to you don’t want to miss that by just having onClick events instead of a drive. So, record ability of the website is the starting point. And href tags is debase The rendering piece blocked resources.

So Paul talked about automation. And we actually built like a automated script that crawls clients robots. txt every single dangerous to try it like changes in the robot 16 changing change in the content or in the status code, and it runs every day at six 6am nine 9am. Eastern time.

I was surprised when I learned that thing. I was surprised how many notification I would get. I would think that like our clients would not change the robot 60 that often. Every single day I received like between one and five like notification like just the statue SCOTUS change, they added like a new dissolver statement.

They are removing stuff. It’s kind of crazy. You would think that like this file doesn’t change that often.

But like every single day, wonderful clients or more are changing things and Will not always like warned about it.

And like it happens that sometimes they would block like wondering of the site because JavaScript assets are blocked or like CSS or anything.

And so when Google cannot search engine cannot access those assets, they cannot crawl a website properly.

It’s not just about the URL itself. It’s about rendering the page. And then you get this type of results here.

Obviously, my personal website is not blocked.

That’s just an example.

But the loading of the content. So again, you can get like provender services, and I prevent all your pages if you’re concerned about like Google wondering, though. Yeah, your website. What happened though, is that if the loading of the content is based on user interaction, then nobody’s going to ever get it except the users and Okay, again, that’s great, but like search engine cannot act they are not. Google is a lazy user, they’re not going to scroll down your page, I’m not going over on stuff, they’re not going to click on things. So some people have been testing that.

And there was like some science of user interaction mimicking, but again, it’s not scaled, and it’s not you cannot rely on that. So when we talk about like mega venues, for example, so I’ve talked to developers that wants to save some time, and improve like rendering of the page, like, you know, say latency Page Speed by delaying, like the rendering of those items, and images and links when the user over on the menu, that’s a great idea, except that like those links, they’re not going to be in the DOM when the page loads. So you can take a snapshot like for another page, Google can access the page, they’re going to render your page, they’re not going to get those links, because they’re not going to over on this menu item.

So while it’s a good idea to speed up the page rendering, it’s not something that should be done because search engine cannot access those links and Again, talking about internal linking and the power of it, that’s a big nono. Here, we see that also with like tab content. So again, that’s great sounds, you know, like a good idea not to load the content on tab 2345.

Because why loading that and like adding that to the loading of the page when the user might not needed right away.

But like, if Google and search engine cannot access it, because it’s not loaded on the page, because it’s some type two and three, then you’re not going to get any benefits from that content.

It’s especially important because as of right now, content that is seen tosco dom directly loaded content that is on tab like two, three, accordion, and everything, even if Google can get it. It’s devalued, because the idea is that they don’t want to rank a page where the content is not directly visible to the user. They’ll don’t they don’t want to say this page is what you’re looking for.

The user goes on the page and they don’t see that content right away.

It’s eaten in the top two. So it’s devalued, it’s there, you’re going to rank for it, it’s going to be indexed, but they’re not going to really like value that type of content as much as Dagwon.

Well, that is changing because the mobile first indexing process that they are working on that some websites are already in, you have to have this type of implementation for user experience, you need to have accordian, you need to have jobs.

Because when you design like a website for mobile, you cannot have people like scroll down like forever.

So you need to use this type of like design things.

And Google knows that they understand that and they’re not going to devalue the content anymore when it’s eaten for user experience purposes.

So that’s especially important like to make sure that they can actually get that content because it’s going to be as important as the one on top one on expanded accordion.

The last thing is the Lord more it’s pretty classic. Again, if when you click on like Show me more load more, and it doesn’t change the URL, then like I chances that like your prevent your page like your snapshot or Google is not going to see that unless it’s already loaded directly into Dom when the page first load and not when the user click on that. So the things are extremely important to remember.

Still, in the content loading piece, the five-second rule, what I call the five-second rule, it appears that Google is taking a snapshot of the page after five seconds.

So if for some reason you’re delaying, like the rendering, or the loading of some content, past five seconds, for whatever reason, I chances that Google is not seeing it. That could be a tip to avoid like any penalty for pop-ups.

For example, Google doesn’t like pop-ups that are blocking like the content of the page. And so maybe if you delay your content like past five seconds, they might not see it That’s what tells me that they might change that and adjust this rendering rule or whatever, to detecting the function. So they might like look at your JavaScript code today, it looks like you have a delayed function like ensure pop up after 10 seconds.

And we’re going to just wait until 10 second and render your page and CTO pop up. So it’s interesting to know but I would not rely on that to just to do like ads stuff so.

So the best practice though, when it comes to HTML snapshot, obviously like being and Facebook other like platform need that need to have like the wonder of content because they do not execute JavaScript.

Something that came up like pretty recently and like that is built-in like a lot of frameworks right now is like the idea of isomorphic JavaScript and or hybrid rendering where the user get like this awesome a Jackson split experience where everything happens on the client-side, you go to one page to another, and it’s really fast a jack is going on.

But when the page first load each year all is loaded independently like follows do, then everything is in the source code, everything is there, or at least in the DOM.

And so so search engine can get that for each single URL that they call. So that’s kind of the best practice here is to use those frameworks that have isomorphic or I braid rendering technologies.

There is a lot of documentation around that, especially on the Google side.

About pw ways and are to us, I read wondering for that. So the indexing part very quick on this is again, the idea that if any of you have like preventive services or do snapshots, you might get like your content to change here in the NGV.

You find it all for example here but We see a lot of website that like do not take care of the ad section, you might get like exactly the same information as a title the meta description you I trifling tags, like any important I well prognostics all those like really important canonical tag of this important like a su signals there that might not change because everything is about the content in the body section and not the ad section.

So again, something to remember because it could impact indexing.

If you have like the same information, they can only go back and screw everything up. And even just like duplicate page titles, it sounds really simple and like really old school like SEO, but it still matters and having duplicate page title over the entire website can be an issue.

Again, about the tools. So the Search Console like fetch and render, obviously a great resource, but not perfect.

The good news The stat they’re going to release either a new tool, or an updated version of that, that will show like the damn snapshot. So you will get the render up code into that tool from whatever chrome version they are using.

So we’ll get more information from Google directly. So but still like as it as a great resource. So I built one on technical seo.com, that you can find a fetch and render that as already like the DOM snapshot, the rendered code, the only thing about that and I need to spend time on it you updated. It’s using like Phantom jazz and not Chrome as the rendering engine.

And so as some limitation kind of works in like 95% of the time.

But for example, if you’re using new frameworks, like polymer and web component components, it’s not rendering like everything.

So maybe an issue here, but I will say that and as your follows again, a lot of them like, gee, Paul, it’s I think it’s coming really, really soon. Really excited about that, but but if I screaming Frog said, bro, they’re all rendering like pages and executing JavaScript. So definitely a resource. And maybe the best seo tool ever Chrome dev tools, including lighthouse that like for mention as well, is definitely like something to look out like JavaScript errors that may just trigger like issues with rendering of the page. So and yeah, I want a couple minutes over. Sorry about that. But thank you.

Wow, what a number.

You mentioned about duplicating pages. And so I work at a large conference on the SEO specialist for them. And one of the biggest problems we have is duplicated titles, because it goes page one, it’s a whole page nation page. thing where it goes page one, page two, page three, they all have duplicated titles. It’s a tool or something, or a way to work around that.

Well, in that particular case, I think it’s fine if we’re talking about like a series of pages. I don’t know, let’s say like women’s jeans, for example. And you have like, a lot of products that are like split into like, you know, 10 pages, and you don’t really need to really update that it’s not really a need to have like women’s jeans like page one, women’s jeans, page two, if you have like proper rail prev next tag and place, then the equity will be like the sequence will be consolidated, consolidated into one.

And so I think in that particular case, it’s less of an issue because it the page is about the same thing is just listing a different set of product. But it’s it’s not like facet navigation. For example if you if you have like a no no TVs For example, and like you click on like, a filter for brand, and like you have Samsung, you click on Samsung, then yes, maybe there should be a different URL that should be like a title tag and like some type of content on the page that talks about like Samsung TV, for example.

So that will make the page more specific and more relevant to Korea, Iran, Samsung TVs are like TV Wi Fi enable or whatever, all those filters that you can select that trigger like a different set of products.

Maybe the page should be like optimised for that too. Long Tail Pro reasons things like that. But Max, quick question off of Twitter from James Chapman, he’s looking for some clarification.

Will Google disregard content loaded after five seconds or milliseconds? Slide said one thing.

You said another, okay. So if it’s, if it’s an old rule, that would be five-second, so that’s what we see with like it, you know, tested it with indexation literally like the content after five seconds was not indexed.

As you can see, like in tools that Google provides with screenshot, if we delays from function like, for example, you can just, you know, test it yourself and change the colour of your text. And if it’s after five second, you might not see it like in those screenshots. But, again, Google trying to understand the user experience the best they can. And and, you know, like penalising sites that for example of like pop ups interstitials. And they might, they might just go over like those five seconds to really understand like what’s going on on the website. So

do one more question. Okay. Recommend

So So I actually could not hear you really well, but like, so I think I got most most of it. So but like paid links. Okay, it’s consoling and like yeah, I think. And the question is about like having a nofollow tag on that. I think that’s still the best project. I’m not the expert there. But actually like Sophie to my colleague, Kayla Becker, she works at mccole with me and like she’s, she’s the, the link ninja expert here and like she will have fully an answer for that. So thank you.