Do you know about Hulu’s JavaScript fail story?

Back in 2016, the online video streaming service experienced a 56% visibility drop due to bad JS handling.

A nightmare no business wants to go through.

To avoid such disasters, you have to know what you’re doing when working with modern JavaScript frameworks.

Here at Snipcart, we love Vue.js, but are entirely aware of the SEO issues with a Vue.js singe-page application.

In this post, I want to show JS developers how easy it is to make Vue SEO-friendly.

I’ll go through:

• General SEO tips you should always apply.
• Specific Vue.js SPA SEO issues.
• Tools to fix them with server-rendering & prerendering.
• A technical Vue.js SEO example using prerender-spa-plugin.

This is a fully updated version of our Vue.js SEO resource. The original one was followed by two other pieces about JS frameworks SEO issues, for React, and Angular. There’s also a video version of this content you can find at the end of this post.

General SEO tips

Before we explore SEO issues specific to JavaScript SPAs, let’s cover the best practices developers should adopt when building search engine optimized sites.

As someone already said: “The best place to hide a dead body is the second page of Google search.”

This shortlist is inspired by some of the biggest SEO players such as Moz, Backlinko, and Ahrefs. I’ve added links to their resources should you want to dig deeper.

→ Meta tags

Meta tags are low-hanging fruits. They let you show search engines precisely what your content is about.

However, not all tags are born equal. You should focus your energy on only a few of them, namely:

• Meta content type—Has to be present on every page, declares your character set for the page.
• Title—Choose a unique title that catches searchers attention while accurately describing the content of the page. Keep it concise!
• Meta description—It should convince SERP (Search Engine Results Page) visitors to click on your link to find answers to their specific research intent.
• Viewport—Essential for a good mobile experience.

Learn more: SEO Meta Tags, by Moz.

vue-meta is a solid tool to manage page meta info in Vue 2.0 components.

Social tags can also have a significant impact on SEO as they help your content to spread on social platforms, thus increasing your SEO social signals. There are specific tags for all the big platforms (Facebook, Twitter, Pinterest, Google+).

Learn more: Must-Have Social Meta Tags for Twitter, Google+, Facebook, and More, by Moz.

→ Mobile optimization

If you’re not aware of Google’s mobile-first indexing, well, consider this a wake-up call! Google is now giving more love to smooth mobile experiences than desktop ones, and so should you.

Learn more: Mobile SEO: The Definitive Guide, by Backlinko.

NativeScript powers cross-platorm Vue.js mobile apps.

→ HTTPS

A missing HTTPS certification or a broken config could penalize your website. Isn’t it understandable that search engines are inclined to push sites that are trusted and certified, after all?

Even if it wasn’t for SEO, you probably want to offer a platform as secure as possible for your users. So no reason not to meet this criterion!

Learn more: HTTP vs. HTTPS for SEO: What You Need to Know to Stay in Google’s Good Graces by ahrefs.

#vue #vue.js #programming