The technologies which power the web, and which power parts of WordPress, are changing. It’s increasingly common for developers to use JavaScript to make our websites behave more and more like apps. Done well, these approaches create rich, interactive experiences. When built poorly, they can be catastrophic for SEO.
For most WordPress website owners and managers, you shouldn’t need to worry about JavaScript SEO. Most WordPress plugins and themes work fine with JavaScript, and won’t cause any special SEO problems. But if you’re developing bespoke themes or plugins, then you should make sure that you follow best practice, and avoid the common pitfalls.
If you’d like to learn more about JavaScript SEO for WordPress, this article provides a starting point, and signposts resources which you can use to learn more.
Table of contents
- Front-end vs back-end technologies
- HTML, CSS & JavaScript
- JavaScript in WordPress
- Performance considerations
- Introducing Ajax
- Ajax in WordPress
- The admin area
- Single page applications
- SEO challenges
- Performance challenges
- Rendering challenges
- Pre-rendering
- Hydration
- Dynamic rendering
- Isomorphic / Universal JavaScript
- Headless WordPress
- Challenges with headless SEO
- Headless SEO in WordPress, with Yoast SEO
- Static HTML sites
- JAMstack
- In conclusion
- What does ‘best practice’ look like?
- Further reading
Front-end vs back-end technologies
Traditionally, most websites have a distinct ‘back-end’ (or ‘server-side’) and ‘front-end’ (or ‘client-side’). Note that this isn’t the same as “the public or user-facing parts of my website” or “my WordPress admin area“; we’re talking about the technologies which power the website, not the different parts of a WordPress website.
In WordPress, the back-end is usually a combination of PHP (a scripting language) and MySQL (a database technology). These store and process your data, and run the logic which constructs your front-end.
HTML, CSS & JavaScript
The front-end is a combination of HTML, CSS and JavaScript. HTML builds the structure and content (words and images). CSS manages presentation (colours, layouts and styles). JavaScript adds behaviour (interactivity, movement, and responsiveness).
When your browser requests a URL, the back-end determines what the server should respond with. That’s typically a package (or a series of packages) of HTML, CSS and JavaScript files. Your browser downloads and reads those files, and uses them to construct the front-end.
As you navigate through a site, this process repeats each time you visit a different page. Whenever you click a link, the page you’re on unloads, the new page is sent from the server to your browser.
If you’d like to learn more about the difference between back-end and front-end development, we recommend this guide by Chris Castiglione on One Month.

"use strict";
var adace_load_62f08d46470ba = function(){
var viewport = $(window).width();
var tabletStart = 601;
var landscapeStart = 801;
var tabletEnd = 961;
var content = '%3Cdiv%20class%3D%22adace_adsense_62f08d4646eba%22%3E%3Cscript%20async%20src%3D%22%2F%2Fpagead2.googlesyndication.com%2Fpagead%2Fjs%2Fadsbygoogle.js%22%3E%3C%2Fscript%3E%0A%09%09%3Cins%20class%3D%22adsbygoogle%22%0A%09%09style%3D%22display%3Ablock%3B%22%0A%09%09data-ad-client%3D%22ca-pub-9250614219462833%22%0A%09%09data-ad-slot%3D%224692840435%22%0A%09%09data-ad-format%3D%22horizontal%22%0A%09%09%3E%3C%2Fins%3E%0A%09%09%3Cscript%3E%28adsbygoogle%20%3D%20window.adsbygoogle%20%7C%7C%20%5B%5D%29.push%28%7B%7D%29%3B%3C%2Fscript%3E%3C%2Fdiv%3E';
var unpack = true;
if(viewport
})(jQuery);