- 1. The Vue of SEO | iJS Conference 2017Dennis Schaaf | André Scharf
The Vue of SEO
How to make your Single-Page App rank well
- 2. The Vue of SEO | iJS Conference 2017Dennis Schaaf | André Scharf
André Scharf
Digital Lead | ViiV Healthcare
@andrescharf
Dennis Schaaf
Technology Lead | futurice
@dennisschaaf
- 3. The Vue of SEO | iJS Conference 2017Dennis Schaaf | André Scharf
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/
- 4. The Vue of SEO | iJS Conference 2017Dennis Schaaf | André Scharf
Why even care about SEO?
- 5. The Vue of SEO | iJS Conference 2017Dennis Schaaf | André Scharf
93%
of online experiences
begin with a search
engine.
40k
Google search queries
are conducted every
second
91%
of internet users use
search.
- 6. The Vue of SEO | iJS Conference 2017Dennis Schaaf | André Scharf
Search engines are complex systems …
- 7. The Vue of SEO | iJS Conference 2017Dennis Schaaf | André Scharf
… 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
- 8. The Vue of SEO | iJS Conference 2017Dennis Schaaf | André Scharf
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
- 9. The Vue of SEO | iJS Conference 2017Dennis Schaaf | André Scharf
And 4 boxes to tick off before going live
©moz.com,14/04/17
- 10. The Vue of SEO | iJS Conference 2017Dennis Schaaf | André Scharf
Can you make it look fancy, please?
- 11. The Vue of SEO | iJS Conference 2017Dennis Schaaf | André Scharf
The rise of Single-page JavaScript Frameworks
- 12. The Vue of SEO | iJS Conference 2017Dennis Schaaf | André Scharf
Single Page Applications work differently
Client
Server
InitialGETrequest
FormPOST
Page
reload
Traditional Page Lifecycle
Client
Server
InitialGETrequest
AJAX
{…}
JSON
SPA Lifecycle
- 13. The Vue of SEO | iJS Conference 2017Dennis Schaaf | André Scharf
Does Google care about fancy?
- 14. The Vue of SEO | iJS Conference 2017Dennis Schaaf | André Scharf
- 15. The Vue of SEO | iJS Conference 2017Dennis Schaaf | André Scharf
Google still has issues dealing with JS
- 16. The Vue of SEO | iJS Conference 2017Dennis Schaaf | André Scharf
“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
- 17. The Vue of SEO | iJS Conference 2017Dennis Schaaf | André Scharf
How to get it right then
- 18. The Vue of SEO | iJS Conference 2017Dennis Schaaf | André Scharf
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)
- 19. The Vue of SEO | iJS Conference 2017Dennis Schaaf | André Scharf
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
- 20. The Vue of SEO | iJS Conference 2017Dennis Schaaf | André Scharf
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
- 21. The Vue of SEO | iJS Conference 2017Dennis Schaaf | André Scharf
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
- 22. The Vue of SEO | iJS Conference 2017Dennis Schaaf | André Scharf
Get the content right
HTML-Tag Optimization
Use only one H1!!
Use semantic tags
Add follow/nofollow for links
Remember Image Alt-texts
- 23. The Vue of SEO | iJS Conference 2017Dennis Schaaf | André Scharf
Get the content right
Add ‘Structured Markup’ to the page
- 24. The Vue of SEO | iJS Conference 2017Dennis Schaaf | André Scharf
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
- 25. The Vue of SEO | iJS Conference 2017Dennis Schaaf | André Scharf
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)
- 26. The Vue of SEO | iJS Conference 2017Dennis Schaaf | André Scharf
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
- 27. The Vue of SEO | iJS Conference 2017Dennis Schaaf | André Scharf
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.
- 28. The Vue of SEO | iJS Conference 2017Dennis Schaaf | André Scharf
Auto generate your Sitemap.xml and Robots.txt!
For your sitemap: @nuxtjs/sitemap For your robots: nuxt-robots
- 29. The Vue of SEO | iJS Conference 2017Dennis Schaaf | André Scharf
What else to keep in mind
- 30. The Vue of SEO | iJS Conference 2017Dennis Schaaf | André Scharf
Use Google tag manager
Update external libraries easier
Load 3rd party libraries asynchronously,
independent of developers (for managing
ad-campaigns, retargeting, etc.)
- 31. The Vue of SEO | iJS Conference 2017Dennis Schaaf | André Scharf
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
- 32. The Vue of SEO | iJS Conference 2017Dennis Schaaf | André Scharf
Thank you!
Any questions?
- 33. The Vue of SEO | iJS Conference 2017Dennis Schaaf | André Scharf
One More Thing!
Do you like building
awesome apps?
Look for ‘Futurice’
Or, look at ‘Spice program’