Technical SEO & JavaScript

Rate this content
Bookmark

The web is an ever-changing platform and so are the websites we create. With new technologies and possibilities come new challenges for both developers and SEOs. In this session, we will talk about how developers and SEOs can become a team and solve challenges together. We will look into a few scenarios where this collaboration can bring success to a project.

8 min
21 Oct, 2021

Video Summary and Transcription

Technical SEO is important for making content visible to search engines. Developers have a significant impact on the crawling and indexing process. Hash-based routing can lead to duplicate content issues, and it is recommended to use the History API instead. In 2019, 12% of websites still used fragmented URLs.

1. Introduction to Technical SEO

Short description:

Hello and welcome everybody! Today, I'll be talking about technical SEO and its importance in making your content visible to people searching for it. SEO is a broad field, and while it's not only technical, we'll focus on the technical side in this talk. Search engines follow a process that involves making HTTP requests, understanding the content, indexing it, and ranking it. As developers, we have a significant impact on this process, as both the server-side and client-side influence whether a website can be crawled and indexed. Focusing on crawling and indexing can have a substantial impact on SEO.

Hello and welcome everybody out there, I'm super excited to be talking about technical SEO to all of you today. Specifically I want to focus a little bit on Vue.js, but basically none of the things that I talk about are very, very Vue.specific. If you want to learn more about Vue.specific SEO then I'll show you a few resources after the talk.

So when we talk about SEO, then a lot of people are like, what does it even mean? Besides the obvious meaning which is search engine optimization, it seems that it's very non-obvious to a lot of people what this is and a bunch of people think it's basically snake oil and trying to sell links and stuff like that. It's not that. Fundamentally, what SEO is about is making sure that what you are creating, what you are putting online there is actually visible to people looking for it, right? Because if you are going online to seek something that you don't know yet, then you're going through your search engine of choice and you search for whatever it is that you need and you find potential web applications or websites that are serving that specific purpose. To do so, you need to make sure that search engines can actually, you know, find your things and thus people using search engines can actually find the things that you built. And that entails making sure that the robots, which are the search engines, because they are computer programs that consume your content. You need to make sure that these robots actually can process and understand what you're putting out there on the web. And for that, there is a bunch of stuff that needs to be done and a bunch of it is technical, but not all of it is technical.

So SEO is a very broad field, similar to how software engineering is a very broad field. You might do frontend, you might do backend, you might do embedded systems, you might do game development. SEO is not only technical, but we'll focus on the technical side today, as we are all developers.

So when it comes to search engines, search engines fundamentally run a process, and this process can be broken down into multiple steps. The very first step is actually making HTTP requests to your server, to a URL that we found somewhere, and then fetching whatever comes back from your server. Then we need to understand what it is. So is this a website about dogs? Is this a website about cats? Is this a website about boats? And then we would put that into a database, which is called the index. And whenever someone looks for, let's say we make a cat website, if someone looks for cat pictures, then we have lots of websites for cat pictures in our index, and we will need to fetch them. And we need to figure out what is the best result for this user at this time. And that's the ranking process where we figure out where each of the websites in our index goes on the list of results, and then we show these results to users. Now, as developers, we actually have fundamental impact on this process because, if you think about it, both the server side as well as the client side influence if a website or web application can be crawled and indexed. If we can't make requests to certain pieces of content, or if the URL just gives us a 404 or a 500 error, then we can't really take it in and process it further. If we do, but then there's like something in the JavaScript that prevents us from seeing any of the content, then we don't really know what the website is about, and we can't actually put that into the index either. And if it's not in the index, we can't really rank it. A lot of people are focusing on ranking when it comes to SEO, and I don't think that's reasonable because it's just a lot of factors. And ranking is also influenced by where is our user, how many other competitors are there, what are the competitors doing. So there's constant flux in rankings, and I don't think it makes sense to look into those too much. I would focus more on the crawling and indexing side of things, because that's where you can have a lot of impact. Now as I said, the process starts with crawling, which means we discover a URL somewhere, and then we make a request to that URL. URLs take many forms, but these are the typical URLs that you probably have encountered yourself or have provided yourself.

2. Hash-based Routing and SEO

Short description:

Hash-based routing is not ideal for SEO as it can lead to duplicate content issues. Instead, it is recommended to use the History API for better crawling and indexing. In 2019, 12% of the websites we crawled still used fragmented URLs.

So you have a host, you have a path, and sometimes you have subsections. The thing with these hashes, or fragments as they are called technically, is that they are not meant to address different content. So page should have a lot of content and then part of it is the content that is addressed by subsection. But it's not that if I have page and then I change the fragment that I get completely new content that I wouldn't have seen beforehand if I would have gone to slash page.

Unfortunately, that's what a lot of people are doing. They are using hash-based routing, which is legitimate because it is a lot easier to set up for a local development server. But nonetheless, for SEO purposes, this is not great because a crawler assumes that these two pages are the same as the homepage here, right? The hash about should just be a part of what is already on the homepage on slash. Same with an exclamation mark in there. We have a specific URL crawling scheme for such URLs but we have deprecated it because we found it not to work that well. So definitely make sure to use History API rather than Hash Based Routing. In 2019, 12% of the websites we crawled for the Web Armor Doc unfortunately continue to use fragmented URLs.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Remix Conf Europe 2022Remix Conf Europe 2022
23 min
Scaling Up with Remix and Micro Frontends
Top Content
Do you have a large product built by many teams? Are you struggling to release often? Did your frontend turn into a massive unmaintainable monolith? If, like me, you’ve answered yes to any of those questions, this talk is for you! I’ll show you exactly how you can build a micro frontend architecture with Remix to solve those challenges.
Remix Conf Europe 2022Remix Conf Europe 2022
37 min
Full Stack Components
Top Content
Remix is a web framework that gives you the simple mental model of a Multi-Page App (MPA) but the power and capabilities of a Single-Page App (SPA). One of the big challenges of SPAs is network management resulting in a great deal of indirection and buggy code. This is especially noticeable in application state which Remix completely eliminates, but it's also an issue in individual components that communicate with a single-purpose backend endpoint (like a combobox search for example).
In this talk, Kent will demonstrate how Remix enables you to build complex UI components that are connected to a backend in the simplest and most powerful way you've ever seen. Leaving you time to chill with your family or whatever else you do for fun.
JSNation Live 2021JSNation Live 2021
29 min
Making JavaScript on WebAssembly Fast
Top Content
JavaScript in the browser runs many times faster than it did two decades ago. And that happened because the browser vendors spent that time working on intensive performance optimizations in their JavaScript engines.Because of this optimization work, JavaScript is now running in many places besides the browser. But there are still some environments where the JS engines can’t apply those optimizations in the right way to make things fast.We’re working to solve this, beginning a whole new wave of JavaScript optimization work. We’re improving JavaScript performance for entirely different environments, where different rules apply. And this is possible because of WebAssembly. In this talk, I'll explain how this all works and what's coming next.
React Summit 2023React Summit 2023
24 min
Debugging JS
As developers, we spend much of our time debugging apps - often code we didn't even write. Sadly, few developers have ever been taught how to approach debugging - it's something most of us learn through painful experience.  The good news is you _can_ learn how to debug effectively, and there's several key techniques and tools you can use for debugging JS and React apps.

Workshops on related topic

React Day Berlin 2022React Day Berlin 2022
86 min
Using CodeMirror to Build a JavaScript Editor with Linting and AutoComplete
Top Content
WorkshopFree
Using a library might seem easy at first glance, but how do you choose the right library? How do you upgrade an existing one? And how do you wade through the documentation to find what you want?
In this workshop, we’ll discuss all these finer points while going through a general example of building a code editor using CodeMirror in React. All while sharing some of the nuances our team learned about using this library and some problems we encountered.
TestJS Summit - January, 2021TestJS Summit - January, 2021
173 min
Testing Web Applications Using Cypress
WorkshopFree
This workshop will teach you the basics of writing useful end-to-end tests using Cypress Test Runner.
We will cover writing tests, covering every application feature, structuring tests, intercepting network requests, and setting up the backend data.
Anyone who knows JavaScript programming language and has NPM installed would be able to follow along.
Node Congress 2023Node Congress 2023
63 min
0 to Auth in an Hour Using NodeJS SDK
WorkshopFree
Passwordless authentication may seem complex, but it is simple to add it to any app using the right tool.
We will enhance a full-stack JS application (Node.JS backend + React frontend) to authenticate users with OAuth (social login) and One Time Passwords (email), including:- User authentication - Managing user interactions, returning session / refresh JWTs- Session management and validation - Storing the session for subsequent client requests, validating / refreshing sessions
At the end of the workshop, we will also touch on another approach to code authentication using frontend Descope Flows (drag-and-drop workflows), while keeping only session validation in the backend. With this, we will also show how easy it is to enable biometrics and other passwordless authentication methods.
Table of contents- A quick intro to core authentication concepts- Coding- Why passwordless matters
Prerequisites- IDE for your choice- Node 18 or higher
React Summit US 2023React Summit US 2023
96 min
Build a powerful DataGrid in few hours with Ag Grid
WorkshopFree
Does your React app need to efficiently display lots (and lots) of data in a grid? Do your users want to be able to search, sort, filter, and edit data? AG Grid is the best JavaScript grid in the world and is packed with features, highly performant, and extensible. In this workshop, you’ll learn how to get started with AG Grid, how we can enable sorting and filtering of data in the grid, cell rendering, and more. You will walk away from this free 3-hour workshop equipped with the knowledge for implementing AG Grid into your React application.
We all know that rolling our own grid solution is not easy, and let's be honest, is not something that we should be working on. We are focused on building a product and driving forward innovation. In this workshop, you'll see just how easy it is to get started with AG Grid.
Prerequisites: Basic React and JavaScript
Workshop level: Beginner
Node Congress 2023Node Congress 2023
49 min
JavaScript-based full-text search with Orama everywhere
Workshop
In this workshop, we will see how to adopt Orama, a powerful full-text search engine written entirely in JavaScript, to make search available wherever JavaScript runs. We will learn when, how, and why deploying it on a serverless function could be a great idea, and when it would be better to keep it directly on the browser. Forget APIs, complex configurations, etc: Orama will make it easy to integrate search on projects of any scale.
Node Congress 2022Node Congress 2022
128 min
Back to the basics
WorkshopFree
“You’ll never believe where objects come from in JavaScript.”
“These 10 languages are worse than JavaScript in asynchronous programming.”
Let’s explore some aspects of JavaScript that you might take for granted in the clickbaitest nodecongress.com workshop.
To attend this workshop you only need to be able to write and run NodeJS code on your computer. Both junior and senior developers are welcome.
Objects are from Mars, functions are from Venus
Let’s deep-dive into the ins and outs of objects and then zoom out to see modules from a different perspective. How many ways are there to create objects? Are they all that useful? When should you consider using them?
If you’re now thinking “who cares?“, then this workshop is probably for you.
Asynchronous JavaScript: the good? parts
Let’s have an honest conversation.
I mean… why, oh why, do we need to bear with all this BS? My guess is that it depends on perspective too. Let’s first assume a hard truth about it: it could be worse… then maybe we can start seeing the not-so-bad-even-great features of JavaScript regarding non-blocking programs.