6 min read
This is a long form blog post of my conference talk of the same name. Slides can be found here.
Single Page Applications (SPAs) are trendy with developers but product owners, account managers, and marketing folks are sometimes hesitant to get on board. Why? SEO.
SEO or search engine optimization is the practice of increasing traffic to your website through unpaid search results. You may also hear this called "organic search traffic.” It’s important because you want everyone to find you. As developers, this should be important because what’s the point of spending hundreds of hours building an application if no one can find it. You want to improve how often you appear in search results for relevant search terms and how high you rank.
SPAs get a pretty bad rap for SEO, but they’re not necessarily bad for SEO. Building a SPA is not a death sentence for your search rankings. You just need to be aware of how you build your site to support it.
In SEO, content is queen. This can make SPAs challenging because content is rendered on an as-needed basis instead of on page load like traditional web pages.
Meta content such as title, description, keywords, and canonical tags are used as the display text in search results and affect how search engines rank the URL for specific search terms. Make sure that you are building your application in a way that your meta content is dynamic depending on the URL.
yourapp.com/authors/:id you’ll want to use canonical tags to indicate which of these URLs is primary for this content and which should be ranked and presented in the search results. It’s also important to note that unique URLs include URLs that differ by query parameters, www vs non-www, and http vs https.
While we’re talking about URLs, make sure that you have your app configured correctly to support deep linking. Backlinking is a big way that search engines evaluate your SEO value. Backlinking is the practice of linking to other pages of your site and can be done within other URLs on your site or by other sites on the web. You want to make sure that when the search crawler follows backlinks and tries to crawl deep links to your site, it can read the correct content. If your deep links aren’t working correctly and the content isn’t being rendered or the wrong content is being rendered, your search ranking will suffer.
Avoid long running scripts
Don’t block scripts in robots.txt
If after all of this, you still aren’t seeing the search ranking that you want, here are some tools you can use to improve the SEO of your site even more.
Fetch as Google
Google has a “Fetch as Google” tool that will let you see exactly what the GoogleBot is able to crawl and render. This can help identify why certain areas of your app aren’t being indexed properly.
The second method is to use SaSS offerings. This is a good choice when you have content that changes frequently (more often that your build process runs). The SaSS then serves the prerendered site to search crawlers. This can come dangerously close to cloaking (crawlers get different content than people) so be careful here. I use the
prerender-spa-plugin package on this site. I saw my Google search ranking improve from bottom of page 4 to near top of page 1 within days of implementing it.
But prerendering can grind your build process to a halt if you have hundreds or thousands of URLs to render.
If you know you’ll be building a large site, you’ll want to server-side render it.
Server-side rendering (SSR) is where a page is rendered by the web server as part of the server request/response cycle. In the case of Vue.js and other similar frameworks, this is done by executing the app against a virtual DOM.
There are frameworks that can make building an SSR app relatively easy (like Next.js or Next.js). However, migrating a client side app to be SSR can be a labor-intensive challenge.
Currently SSR is only really supported with a Node backend. There are some plugins for PHP, but they’re not great and to be honest, I couldn’t find much more information than that.
SEO is a discipline all its own and requires a lot of time and attention. As developers, we should be aware of what our SEO goals are while we’re building our applications. Not only is it important from the perspective of our product owners, but we should want people to be able to find the awesome apps we’re spending hundreds of hours building.
This post is not meant to be an exhaustive guide to SEO for SPAs or any websites in general. I encourage you to read further and learn more about this. I’m always happy to chat about ideas and am excited to learn more as well. Tweet me @mercedescodes if you have thoughts you want to share.
Published Sep 22 2018