According to Wikipedia it’s “a high-level, dynamic, weakly typed, prototype-based, multi-paradigm, and interpreted programming language.”
If this makes little sense – don’t worry. To form a basic understanding to benefit SEO a definition doesn’t have to be this complex.
- HTML – Hypertext Markup Language. Imagine this to be the “skeleton” to the web pages “physical form” – let’s use a Zebra as an example. As the bones in a Zebra skeleton provide structure so too does HTML to a site. It organises the static content on a site into headings, paragraphs, lists etc.
- CSS – Cascading Style Sheets. Picture this as the “fur” that covers the Zebra skeleton. Much like a Zebra has an instantly recognisable black and white appearance, the CSS is the design, style and wow factor added to a website, making up the presentation layer of the page.
Put simply, as muscles make a Zebra run, JS is a programming language that makes webpages interactive and animated, bringing a page to life to engage a user.
This should be broken down to whether or not search engines can see the content and grasp the website experience. If so, great. If not, what solution can be used to right this?
Key Concepts to Understand
Google crawls a website using its ‘Googlebot’ crawler and indexes with the ‘Caffeine’ infrastructure. Each performs very different functions – Googlebot is all about discovery.
It’s a complex system, factoring in crawl queuing, scheduling and budget, URL importance, and server response time to name a few. But in essence it finds all URLs and crawls them.
When the crawler finds URLs that have been changed or added since its previous visit, they are sent to the indexer. The indexer will try make sense of the URL by analysing the content as well as assessing subprocesses like canonicalisation, page layout and more.
What is Ajax in JS?
Asynchronous meaning “not existing or occurring at the same time”, so the web applications can communicate with a server without interfering with other functions or lines of code on a page by operating in the background.
Usually, all the assets on a page are requested and fetched from the server and then rendered on the page. AJAX can be implemented to update the content or a layout without initiating a full page refresh. Usefully, as often pages on a site don’t differ greatly, using AJAX means only the assets that differ need to be loaded, which improves the UX.
A great example of this in action is Google Maps; the page updates as the user navigates without a full page reload.
What is the DOM?
Think of the Document Object Model (DOM) as the web browser’s actions taken after receiving the HTML document to render the page.
It is essentially an application programming interface (API) for markup and structured data such as HTML and XML.
From an SEO perspective it’s important to understand the DOM, because it’s how Google analyses and understands webpages. Visually, the DOM is what you see when you “Inspect Element” in a browser.
As previously mentioned, the main issue with JS is if bots are unable to find URLs and understand the site’s architecture. Crawling and indexing can become slow and inefficient.
Importantly this can lead to issues, whereby key pages are deemed unimportant due to a lack of internal link value. Likewise, relatively unimportant pages are misinterpreted as high value because there are plain HTML links pointing to them.
Further, because internal linking is a strong signal to search engines regarding the site’s architecture and importance of pages, pages are crawled and rendered according to their perceived importance. You could, therefore, see Google investing more time crawling and rendering the wrong pages over the pages you actually want to rank.
The best way to resolve this issue is through providing search engines access to the resources they need by working with the website development team to determine which files should and should not be accessible to search engines.
One recommendation is pushState, currently supported by Google. It’s Navigation-based and used to manipulate the browser History API.
Simply, pushState updates the address bar URL, ensuring only what needs to change on the page is updated.
The best use is seen with infinite scroll (when the user scrolls to new parts of the page the URL will update). This means the user shouldn’t need to refresh the page, as the content updates as they scroll down while the URL is updated in the address bar.
Hopefully this overview helps some readers form a base knowledge of a very important component of the web, so when you’re next on safari you can appreciate the zebra in front you.