MARTIN SPLITT: There are many different kinds
of content on the web.
There's HTML, images and videos, but also
increasingly complex applications
running in the browser for things
such as email, spreadsheets, or even entire photo editing
suites.
So what does the term JavaScript site really mean?
And when do you need to pay attention to JavaScript SEO?
[MUSIC PLAYING]
Traditionally, JavaScript was used
to progressively enhance the site
on top of its primary content.
For example, you may add behavior
or additional features, such as analytics, funky text
effects that follow the mouse cursor, or even
whimsical effects, such as falling snowflakes on a web
page.
We don't refer to such websites as JavaScript sites,
because all their primary content
is present without JavaScript.
Try this for yourself, and use the View Page Source
feature of your browser.
Alternatively, you can also turn off JavaScript in your browser,
and these sites will still work just fine
and show you all their primary content.
But then there are these web sites
that use JavaScript to load and display critical content,
such as using JavaScript to dynamically load
more content when the user scrolls
or when the browser is resized.
JavaScript might also be used to do other things in response
to user actions, such as clicking or typing
on a keyboard.
The important difference from the previous examples
of using JavaScript for dynamic behavior
is that now we are using JavaScript to modify or add
critical content on the page.
This is relevant for SEO purposes,
as you want to make sure that Googlebot sees all the content
on the page, including the parts that are being dynamically
added using JavaScript.
Last but not least, there are the so-called single-page apps.
Single-page apps usually consist of the so-called shell
and various views or routes with different content.
Some JavaScript frameworks, like React and Angular,
fall into this category as well.
For example, you might have a shell consisting
of a navigation menu and a footer that
stay the same all the time.
But in between navigation and footer,
the content can change without reloading the page.
You can use the browser's developer tools
to see the content being fetched from the network
in these cases.
Unlike the previous examples of websites using JavaScript,
single-page applications usually only
deliver the static parts, the shell,
and use JavaScript to decide which content
to fetch and display later.
So let's take a step back and recap.
If you use the View Page Source of your browser
and see all your content, you don't have
to worry about JavaScript SEO.
If you only see some of your content,
this content will be indexed in the first wave of indexing,
so right away, basically.
We will have a look at some tools and tips
to make sure the rest of your content remains indexable
as well.
If you are concerned with being indexed as fast as possible,
make sure the content you care about the most
is part of the markup you see in the source of your website.
If you do not see your content and use JavaScript
to load the content dynamically, that
means your single-page app will need
to wait for rendering and then indexing.
In later episodes we will explore
options to improve this.
For instance, we can use dynamic rendering.
But don't worry.
This won't affect how your website is ranking
or place your site at a disadvantage.
In the next episode, we will go over a few important techniques
and best practices that you should keep in mind no matter
what kind of site you have to make
sure your site's content is discoverable in search.
So do not forget to subscribe and comment and like
this video, and also check the helpful webmaster's links
in the video description below.
More JavaScript SEO is coming soon, so stay tuned.