The Vue of SEO – How to make your Single-Page App rank well | iJS 2017

The Vue of SEO | iJS Conference 2017Dennis Schaaf | André Scharf
The Vue of SEO
How to make your Single-Page App rank well

André Scharf
Digital Lead | ViiV Healthcare
@andrescharf
Dennis Schaaf
Technology Lead | futurice
@dennisschaaf

Abstract
With the rise of modern web-frameworks, single-page applications have conquered the web. If done right, they
are not only faster and smoother than conventional websites, but also create a richer user-experience. These
modern applications don’t just enable new interaction patterns, but also new capabilities, such as offline and
real-time data interactions.
This has come at a cost – more client-side JavaScript increases the download time of pages, while client-side
URL routing introduces new problems – it delays the page-rendering time even further and makes it hard for
search engines to index your pages. Dangerous stuff if you care about your search-engine ranking.
André will talk about what it takes to build top-ranking web applications, while Dennis will demonstrate some
software architecture patterns using Vue.js to dramatically increase performance.
https://javascript-conference.com/web-development-architecture/the-vue-of-search-engine-optimization-how-to
-make-your-single-page-app-rank-well/

Why even care about SEO?

93%
of online experiences
begin with a search
engine.
40k
Google search queries
are conducted every
second
91%
of internet users use
search.

Search engines are complex systems …

… with a very simple job
Crawl Index Serve
● Search the web
● Find and follow hyperlinks
● Collect new and updated
pages and content
● Render web pages
● Search and analyse page
content
● Analyse connections of
pages through their links
● Interpret search queries in
their context
● Fetch matching search
results from index
● Evaluate and rank results

Therefore, there are 3 sides to that story
Make the
technical side run
smoothly
Create valuable
and indexable
content
Make sure the
word can be
shared easily

And 4 boxes to tick off before going live
©moz.com,14/04/17

Can you make it look fancy, please?

The rise of Single-page JavaScript Frameworks

Single Page Applications work differently
Client
Server
InitialGETrequest
FormPOST
Page
reload
Traditional Page Lifecycle
Client
Server
InitialGETrequest
AJAX
{…}
JSON
SPA Lifecycle

Does Google care about fancy?

Google still has issues dealing with JS

“If you search for any competitive keyword
terms, it’s always going to be server rendered
sites. And the reason is because although Google
does index client-side rendered HTML, it’s not
perfect yet and other search engines don’t do it
as well. So if you care about SEO, you still need to
have server-rendered content.”
Jeff Whelpley

How to get it right then

Client
Server
Initialrequest
AJAX
{…}
JSON
Traditional SPA
Client
Server
Optimizing for ‘Time to First meaningful Paint’
Initialrequest
AJAX
(otherdata)
{…}
JSON
With Pre-Rendering
HTML
Assets
HTML
(Rendered)
1STEMANINGFULLPAINT
1STEMANINGFULLPAINT
Assets
HTML
(Empty)

Optimize server rendering time
Use a Varnish Cache between your server and
the public, to ensure most pages are ‘cached’
(Still needs to be
Even better: pre-render all your pages to HTML
files, so that they load in light-speed!
Option 1: Server-side rendering
+ Caching
Option 2: Pre-rendering vacuumshoover-craft-2000
vacuumsroomba-k2-neo
pharmacypreservatives

Extra Credit - Optimize Initial load
Chunking of JS bundles
(very tricky to get running with SSR)
Problem: Need to know which chunks to
inline and which chunks to load after
Inline Critical (“Above the fold”) CSS

Get the content right
Content to HTML Ratio > 15% Use Components to get rid of unnecessary
wrapping elements, and simplify the HTML
structure.
Use scoped styles for simpler code and less
CSS-classes.
Lose the deeply nested
Bootstrap template

HTML-Tag Optimization
Use only one H1!!
Use semantic tags
Add follow/nofollow for links
Remember Image Alt-texts

Add ‘Structured Markup’ to the page

What about Hash navigation?
Google ignores everything after the # Use Vue-Router in combination with server-side
redirect rules to point to your relevant pages:
For example with web.config

Single-page URL Navigation
HTML5 Browser History API
Make your URLs
Human-readable
Have canonical urls
Page Titles - URL - and H1 and Meta-Tag should
have matching content
Vue-Router (Pages & Meta-data)

Single-page URL Navigation
Tracking of navigation events
Option 1: Google Tag Manager - using “History
Listener” tag type
Option 2: Google Analytics virtual page views
Option 3: Autotrack

Manage Duplicate Routes and Redirects
Force a trailing slash on the url
Eg. redirect site.com/test ->
site.com/test/
Add Meta-data with Canonical tags
Add redirects for moved pages
Use 301 Permanent redirect instead of creating a
404 to avoid loosing page ranking.

Auto generate your Sitemap.xml and Robots.txt!
For your sitemap: @nuxtjs/sitemap For your robots: nuxt-robots

What else to keep in mind

Use Google tag manager
Update external libraries easier
Load 3rd party libraries asynchronously,
independent of developers (for managing
ad-campaigns, retargeting, etc.)

SEO – Check if it works
● Create list of all URLs (XML Sitemap)
● “Fetch as Google” in Search Console
● Crawl site (using ScreamingFrog, JS
and regular mode)
● Check and configure analytics
● Run a site:-search in Google

Thank you!
Any questions?

One More Thing!
Do you like building
awesome apps?
Look for ‘Futurice’
Or, look at ‘Spice program’

The Vue of SEO – How to make your Single-Page App rank well | iJS 2017

Recomendados

Recomendados

Más contenido relacionado

Último

Último (20)

Destacado

Destacado (20)

The Vue of SEO – How to make your Single-Page App rank well | iJS 2017