BEST SEO TIPS FOR SINGLE PAGE APPLICATIONS ANGULAR ETC

You are moving away from server side rendered pages to single page application (SPA) and you want to assess the impact google crawlers and seo.



Your current web pages content might be tagged using microdata or JSON-LD format. You know you have good SEO rankings in Google. You are looking for an SEO expert or SEO consultant who can audit your current web pages and ensure same SEO performance on the new single page application web pages will be met (or exceeded).

Having an indexable version of your SPA website that enables you to attract customers through organic search is invaluable.

BEST SEO PRACTICES WHEN USING SINGLE PAGE APPLICATIONS

OPTION 1: Keep the ‘website’ seperate from the SPA.

You can have the SPA app portion behind a login portal and set up a standard website for the actual ranking material. It’s a lot easier to manage all your SEO and Marketing tasks using a more traditional website platform. Using this method, you will have a www.mysite.com for seo and digital marketing and and app.mysite.com for your single page applications. This option will be easier for you to manage, maintain, tweak and update all your marketing and SEO activities and content.

OPTION 2: Use Isomorphic JavaScript (server rendered JavaScript) from the very beginning.

This is the best framework to use if you can when first constructing your website/app as it will give you both the benefits of static HTML pages for SEO and great Google Rankings and also continue ripping off the benefits of fast client side applications for great user experience. But if for some reason you can’t implement Isomorphic JavaScript server rendering, you might need to use Prerender to create static indexable HTML pages.  Will Critchlow’s article  mentioned server rendering as “best practice” for 2017 and we also believe it has to be best practice for any good JS developer. This article by Bartosz Góralewicz on JavaScript SEO was great, and he says: “Not doing so (server rendered JS) is simply poor development. It is only OK to use client rendered Angular for content that isn’t publicly accessible (not accessible for Googlebot). For example, your website’s CMS panel, etc.” Both articles mention this video which does a great job at explaining the benefits of server rendering.

OPTION 3: OPTIMISE YOUR ALREADY BUILT SINGLE PAGE APPLICATION (SPA) IN ANGULAR OR OTHER PLATFORM

STEPS:

  1. Make a list of all pages on your site. Export the XML sitemap for your site. Having a list of all your website pages will gives you a reference guide you can consult as you work on SEO optimising your new single page application SPA website. You might have some issues with your SPA, so it is important to have this list ready so you do not let key pages of the site un-indexed by search engines. You can also divide content into directories instead of individual pages. For example, if you have an e- commerce website and know that you have a list of product pages, include your /products/ directory and make a note of how many pages that includes.
  2. Use Prerender if it is not feasible to try and reconstruct the whole framework for an Isomorphic setup.Prerender is a service that will render your website in a virtual browser, then serve the static HTML content to web crawlers. From an SEO standpoint, this is as good of a solution as you can hope for: users still get the fast, dynamic SPA experience while search engine crawlers can identify indexable content for search results. Prerender is a nice solution because a lot of times as SEO Consultants, we’re brought in to help clients after their site’s already been constructed with a client-side rendering framework like Angular or React. In cases like that, Prerender requires much less development time and resources post-website construction. Prerender’s pricing varies based on the size of your site and the freshness of the cache served to Google. Smaller sites (up to 250 pages) can use Prerender for free, while larger sites (or sites that update constantly) may need to pay as much as $200+/month. To optimise the use of Prerender you can render first the key sections of your site need to be served to search engines, or with what frequency, you may be able to save $ while still getting great SEO progress.
  3. “Fetch as Google” Within Google Search Console, go to “Fetch as Google.” “ Type aURL from your website and fetch it as Googlebot would during a crawl. “Fetch as Google” will returns the HTTP response from the page, which includes a full download of the page source code as Googlebot sees it. “Fetch and Render” will return the HTTP response and will also provide a screenshot of the page as Googlebot saw it and as a site visitor would see it. This has powerful applications for SPA or AngularJS websites. Even with Prerender installed, you may find that Google is still only partially displaying your website, or it may be omitting key features of your site that are helpful to users. Plugging the URL into “Fetch as Google” will let you review how your site appears to search engines and what further steps you may need to take to optimise your keyword rankings. Additionally, after requesting a “Fetch” or “Fetch and Render,” you have the option to “Request Indexing” for that page, which can be handy catalyst for getting your site to appear in search results.
  4. Re-Configure Google Analytics (or Google Tag Manager) Single page applications don’t track page views the way a standard website does. you will need to use Analytics through some kind of alternative method tagging method. One method that works well is to use the Angulartics plugin. Angulartics replaces standard pageview events with virtual pageview tracking, which tracks the entire user navigation across your application. Since SPAs dynamically load HTML content, these virtual pageviews are recorded based on user interactions with the site, which ultimately tracks the same user behaviour as you would through traditional Analytics. Other option is Google Tag Manager “History Change” triggers, but we have not used this last method yet.
  5. Recrawl the site. It is now time to find those errors that not even Google bot was anticipating. One issue you might discover after installing Prerender is that your crawlers might find a recursive loop that keeps generating longer and longer URL strings for the site content. SPAs can cause tedious, inexplicable issues that you’ll only uncover by crawling the site yourself. Even if you follow the steps above and take as many precautions as possible, I can still almost guarantee you will come across a unique issue that can only be diagnosed through a crawl.

WHAT RESULTS YOU CAN EXPECT

The tips above not only get your SPA’s website indexed, but even to get those sites ranking on first page for various keywords.

If you’ve come across any great solutions for SEO optimising SPA’s , please let me know in the comments area below ! I’d love to hear what other SEO issues people have encountered with SPAs.



BEST SEO TIPS FOR SINGLE PAGE APPLICATIONS

was brought to you by…

MAU. award winning digital marketing specialist at eDigital Agency

Award Winner Digital Marketer, top Linkedin Influencer, Certified Facebook / Adwords Professional, Certified SEO Consultant, StartUp Investor, Writer, Speaker. 15+ years optimising some of Australia’s top brands. MAU.trains marketers via Strategy Workshops & Training Sessions inc his popular Digital Marketing Plan & Social Media Plan templates. MAU. enjoys football, latin music & hiking while teaching Digital Marketing or completing creative photography briefs and conceptual photography assignments. Subscribe to MAU.’s e-newsletter connect on LinkedIn Instagram Facebook

eDigital – Australia’s “Digital Marketing” Destination

Share your opinion below 😀 ⇓