Make your Vue.js web apps discoverable – JavaScript SEO
MARTIN SPLITT: If you are
building single page apps, you might be using a
JavaScript framework to do so. One of the most popular
frameworks is Vue. Vue is popular for being
pretty lightweight, using components like most
other JavaScript frameworks, and having a vibrant, active
community and ecosystem of developers and tooling. In this video, we will
build a sample application and make sure it is
discoverable via search, so your users and people
looking for your app are able to find it. We will use Vue-cli
in version 3.0.4. We create a new application,
then install VueRouter and set up two components, PostsList
that will list 10 posts, and PostDetail that
shows a single post. After setting up the
routing and components, we have this application that
roughly resembles a block pulling the posts from an API. We also enable the history
API mode of the Vue-router to make sure our URLs
are proper URLs instead of abusing the fragment
identifier to show different views. Let's look at what
we can improve in this application for SEO. First things first, to make our
posts more findable and more relevant in search results,
we should give each page a descriptive, helpful
title and description.
Those two things will show
up in the search results, and help users identify
the best result for what they are looking for. To give all our views
meaningful metadata, we will use the rear
Vue Meta utility. It allows us to set
the title and meta description of our PostsList
view to something meaningful, and use an excerpt of the
post and its title as the meta description and title for
the PostDetail view as well. Note that, ideally, we
would have some summary or key takeaways for each post. But, in this case,
we are just going to put the first 100
characters from the posts in the description instead. 100 is an arbitrarily
chosen number of characters. Meta descriptions are
unrestricted in length. When we put this into
the mobile-friendly test, we see our meta description
and title show up in the code. And that means, we will see them
in the search results, as well. But there's even more we can
do to both bots and users. We can make sure
our content arrives with an initial HTML
sent to the client without having to wait
for JavaScript to execute.
As we explained in
the previous videos, Googlebot does two
waves of indexing. In the first wave, we
crawl your page and index the content we find. But we do not execute JavaScript
due to resource constraints. Eventually, and unless
you tell us not to, we will do a second
wave of indexing, where we execute your JavaScript
and index your content again. But if you have a
large site or lots of frequently changing content,
this might not be optimum. A way around this
is pre-rendering of server-side rendering.
Vue has extensive documentation
and tooling for this. Alternatively, you
may consider doing dynamic rendering, which we
provide some documentation for, as well. I also recommend
watching the other videos from the series for more SEO
tips and tricks for single page apps in JavaScript. Also, in the next
episode, we will be discussing dynamic rendering. So stay tuned, and
subscribe to the channel..
