SPA SEO: A Single-Page App Guide
Digest¶
You should at least use prerendering or server-side rendering to make SPA content easier to discover, understand, and index for search engines.
That’s the gist of it. There are other considerations, though, and this guide will cover most of them:
-
Fundamental SEO ranking factors (basics)
-
Issues with single-page application SEO
-
Best practices for SPA SEO in 2019
-
Actionable tips and tools for React, Vue, and Angular SEO
SEO basics
Discoverable, quality content¶
Meta tags¶
The following meta tags will help search engines better understand your content:
-
Meta content type—declares your character set for the page.
-
Viewport—enhances mobile user experience.
-
Title tag
-
Include 1 main keyword
-
Keep it < 70 characters
-
Differentiate it from competing titles on SERP
-
Always add your brand at the end (
[...]- Your Brand)
-
-
Meta description
-
Include 1-2 main keywords
-
Keep it < 140 characters
-
Include a call-to-action to click on the page
-
Demonstrate you understand the searcher's intent (i.e. people who land on the SERP)
-
-
Social tags—increases social shareability of content.
- Define at least Open Graph tags (Facebook) and Twitter Cards
Protips¶
-
Target keywords should appear in Title tag, URL, H1, and, with moderation, page content.
-
Image titles and ALT tags should be descriptively named.
-
Sitemap should always be defined—the XML sitemap helps search bots understand and index your site.