SlideShare a Scribd company logo
1 of 33
Download to read offline
The Vue of SEO | iJS Conference 2017Dennis Schaaf | André Scharf
The Vue of SEO
How to make your Single-Page App rank well
The Vue of SEO | iJS Conference 2017Dennis Schaaf | André Scharf
André Scharf
Digital Lead | ViiV Healthcare
@andrescharf
Dennis Schaaf
Technology Lead | futurice
@dennisschaaf
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/
The Vue of SEO | iJS Conference 2017Dennis Schaaf | André Scharf
Why even care about SEO?
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.
The Vue of SEO | iJS Conference 2017Dennis Schaaf | André Scharf
Search engines are complex systems …
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
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
The Vue of SEO | iJS Conference 2017Dennis Schaaf | André Scharf
And 4 boxes to tick off before going live
©moz.com,14/04/17
The Vue of SEO | iJS Conference 2017Dennis Schaaf | André Scharf
Can you make it look fancy, please?
The Vue of SEO | iJS Conference 2017Dennis Schaaf | André Scharf
The rise of Single-page JavaScript Frameworks
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
The Vue of SEO | iJS Conference 2017Dennis Schaaf | André Scharf
Does Google care about fancy?
The Vue of SEO | iJS Conference 2017Dennis Schaaf | André Scharf
The Vue of SEO | iJS Conference 2017Dennis Schaaf | André Scharf
Google still has issues dealing with JS
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
The Vue of SEO | iJS Conference 2017Dennis Schaaf | André Scharf
How to get it right then
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)
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
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
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
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
The Vue of SEO | iJS Conference 2017Dennis Schaaf | André Scharf
Get the content right
Add ‘Structured Markup’ to the page
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
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)
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
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.
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
The Vue of SEO | iJS Conference 2017Dennis Schaaf | André Scharf
What else to keep in mind
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.)
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
The Vue of SEO | iJS Conference 2017Dennis Schaaf | André Scharf
Thank you!
Any questions?
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’

More Related Content

Recently uploaded

Check out the Free Landing Page Hosting in 2024
Check out the Free Landing Page Hosting in 2024Check out the Free Landing Page Hosting in 2024
Check out the Free Landing Page Hosting in 2024 Shubham Pant
 
TYPES AND DEFINITION OF ONLINE CRIMES AND HAZARDS
TYPES AND DEFINITION OF ONLINE CRIMES AND HAZARDSTYPES AND DEFINITION OF ONLINE CRIMES AND HAZARDS
TYPES AND DEFINITION OF ONLINE CRIMES AND HAZARDS edrianrheine
 
LESSON 10/ GROUP 10/ ST. THOMAS AQUINASS
LESSON 10/ GROUP 10/ ST. THOMAS AQUINASSLESSON 10/ GROUP 10/ ST. THOMAS AQUINASS
LESSON 10/ GROUP 10/ ST. THOMAS AQUINASS lesteraporado16
 
Zero-day Vulnerabilities
Zero-day VulnerabilitiesZero-day Vulnerabilities
Zero-day Vulnerabilities alihassaah1994
 
Presentation2.pptx - JoyPress Wordpress
Presentation2.pptx -  JoyPress WordpressPresentation2.pptx -  JoyPress Wordpress
Presentation2.pptx - JoyPress Wordpress ssuser166378
 
Vision Forward: Tracing Image Search SEO From Its Roots To AI-Enhanced Horizons
Vision Forward: Tracing Image Search SEO From Its Roots To AI-Enhanced HorizonsVision Forward: Tracing Image Search SEO From Its Roots To AI-Enhanced Horizons
Vision Forward: Tracing Image Search SEO From Its Roots To AI-Enhanced Horizons Roxana Stingu
 
Bio Medical Waste Management Guideliness 2023 ppt.pptx
Bio Medical Waste Management Guideliness 2023 ppt.pptxBio Medical Waste Management Guideliness 2023 ppt.pptx
Bio Medical Waste Management Guideliness 2023 ppt.pptx naveenithkrishnan
 
Introduction to ICANN and Fellowship program by Shreedeep Rayamajhi.pdf
Introduction to ICANN and Fellowship program  by Shreedeep Rayamajhi.pdfIntroduction to ICANN and Fellowship program  by Shreedeep Rayamajhi.pdf
Introduction to ICANN and Fellowship program by Shreedeep Rayamajhi.pdf Shreedeep Rayamajhi
 
LESSON 5 GROUP 10 ST. THOMAS AQUINAS.pdf
LESSON 5 GROUP 10 ST. THOMAS AQUINAS.pdfLESSON 5 GROUP 10 ST. THOMAS AQUINAS.pdf
LESSON 5 GROUP 10 ST. THOMAS AQUINAS.pdf mchristianalwyn
 
Computer 10 Lesson 8: Building a Website
Computer 10 Lesson 8: Building a WebsiteComputer 10 Lesson 8: Building a Website
Computer 10 Lesson 8: Building a Website Mavein
 
WordPress by the numbers - Jan Loeffler, CTO WebPros, CloudFest 2024
WordPress by the numbers - Jan Loeffler, CTO WebPros, CloudFest 2024WordPress by the numbers - Jan Loeffler, CTO WebPros, CloudFest 2024
WordPress by the numbers - Jan Loeffler, CTO WebPros, CloudFest 2024 Jan Löffler
 
Benefits of doing Internet peering and running an Internet Exchange (IX) pres...
Benefits of doing Internet peering and running an Internet Exchange (IX) pres...Benefits of doing Internet peering and running an Internet Exchange (IX) pres...
Benefits of doing Internet peering and running an Internet Exchange (IX) pres... APNIC
 

Recently uploaded (12)

Check out the Free Landing Page Hosting in 2024
Check out the Free Landing Page Hosting in 2024Check out the Free Landing Page Hosting in 2024
Check out the Free Landing Page Hosting in 2024
 
TYPES AND DEFINITION OF ONLINE CRIMES AND HAZARDS
TYPES AND DEFINITION OF ONLINE CRIMES AND HAZARDSTYPES AND DEFINITION OF ONLINE CRIMES AND HAZARDS
TYPES AND DEFINITION OF ONLINE CRIMES AND HAZARDS
 
LESSON 10/ GROUP 10/ ST. THOMAS AQUINASS
LESSON 10/ GROUP 10/ ST. THOMAS AQUINASSLESSON 10/ GROUP 10/ ST. THOMAS AQUINASS
LESSON 10/ GROUP 10/ ST. THOMAS AQUINASS
 
Zero-day Vulnerabilities
Zero-day VulnerabilitiesZero-day Vulnerabilities
Zero-day Vulnerabilities
 
Presentation2.pptx - JoyPress Wordpress
Presentation2.pptx -  JoyPress WordpressPresentation2.pptx -  JoyPress Wordpress
Presentation2.pptx - JoyPress Wordpress
 
Vision Forward: Tracing Image Search SEO From Its Roots To AI-Enhanced Horizons
Vision Forward: Tracing Image Search SEO From Its Roots To AI-Enhanced HorizonsVision Forward: Tracing Image Search SEO From Its Roots To AI-Enhanced Horizons
Vision Forward: Tracing Image Search SEO From Its Roots To AI-Enhanced Horizons
 
Bio Medical Waste Management Guideliness 2023 ppt.pptx
Bio Medical Waste Management Guideliness 2023 ppt.pptxBio Medical Waste Management Guideliness 2023 ppt.pptx
Bio Medical Waste Management Guideliness 2023 ppt.pptx
 
Introduction to ICANN and Fellowship program by Shreedeep Rayamajhi.pdf
Introduction to ICANN and Fellowship program  by Shreedeep Rayamajhi.pdfIntroduction to ICANN and Fellowship program  by Shreedeep Rayamajhi.pdf
Introduction to ICANN and Fellowship program by Shreedeep Rayamajhi.pdf
 
LESSON 5 GROUP 10 ST. THOMAS AQUINAS.pdf
LESSON 5 GROUP 10 ST. THOMAS AQUINAS.pdfLESSON 5 GROUP 10 ST. THOMAS AQUINAS.pdf
LESSON 5 GROUP 10 ST. THOMAS AQUINAS.pdf
 
Computer 10 Lesson 8: Building a Website
Computer 10 Lesson 8: Building a WebsiteComputer 10 Lesson 8: Building a Website
Computer 10 Lesson 8: Building a Website
 
WordPress by the numbers - Jan Loeffler, CTO WebPros, CloudFest 2024
WordPress by the numbers - Jan Loeffler, CTO WebPros, CloudFest 2024WordPress by the numbers - Jan Loeffler, CTO WebPros, CloudFest 2024
WordPress by the numbers - Jan Loeffler, CTO WebPros, CloudFest 2024
 
Benefits of doing Internet peering and running an Internet Exchange (IX) pres...
Benefits of doing Internet peering and running an Internet Exchange (IX) pres...Benefits of doing Internet peering and running an Internet Exchange (IX) pres...
Benefits of doing Internet peering and running an Internet Exchange (IX) pres...
 

Featured

AI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdfAI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdf marketingartwork
 
Skeleton Culture Code
Skeleton Culture CodeSkeleton Culture Code
Skeleton Culture Code Skeleton Technologies
 
PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024 Neil Kimberley
 
Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar) contently
 
How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024 Albert Qian
 
Social Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsSocial Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie Insights Kurio // The Social Media Age(ncy)
 
Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024 Search Engine Journal
 
5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary SpeakerHub
 
ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd Clark Boyd
 
Getting into the tech field. what next
Getting into the tech field. what next Getting into the tech field. what next
Getting into the tech field. what next Tessa Mero
 
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentGoogle's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search Intent Lily Ray
 
How to have difficult conversations
How to have difficult conversations How to have difficult conversations
How to have difficult conversations Rajiv Jayarajah, MAppComm, ACC
 
Introduction to Data Science
Introduction to Data ScienceIntroduction to Data Science
Introduction to Data Science Christy Abraham Joy
 
Time Management & Productivity - Best Practices
Time Management & Productivity -  Best PracticesTime Management & Productivity -  Best Practices
Time Management & Productivity - Best Practices Vit Horky
 
The six step guide to practical project management
The six step guide to practical project managementThe six step guide to practical project management
The six step guide to practical project management MindGenius
 
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright... RachelPearson36
 
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present... Applitools
 
12 Ways to Increase Your Influence at Work
12 Ways to Increase Your Influence at Work12 Ways to Increase Your Influence at Work
12 Ways to Increase Your Influence at Work GetSmarter
 
ChatGPT webinar slides
ChatGPT webinar slidesChatGPT webinar slides
ChatGPT webinar slides Alireza Esmikhani
 
More than Just Lines on a Map: Best Practices for U.S Bike Routes
More than Just Lines on a Map: Best Practices for U.S Bike RoutesMore than Just Lines on a Map: Best Practices for U.S Bike Routes
More than Just Lines on a Map: Best Practices for U.S Bike Routes Project for Public Spaces & National Center for Biking and Walking
 

Featured (20)

AI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdfAI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
 
Skeleton Culture Code
Skeleton Culture CodeSkeleton Culture Code
Skeleton Culture Code
 
PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024
 
Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)
 
How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024
 
Social Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsSocial Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie Insights
 
Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024
 
5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary
 
ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd
 
Getting into the tech field. what next
Getting into the tech field. what next Getting into the tech field. what next
Getting into the tech field. what next
 
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentGoogle's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search Intent
 
How to have difficult conversations
How to have difficult conversations How to have difficult conversations
How to have difficult conversations
 
Introduction to Data Science
Introduction to Data ScienceIntroduction to Data Science
Introduction to Data Science
 
Time Management & Productivity - Best Practices
Time Management & Productivity -  Best PracticesTime Management & Productivity -  Best Practices
Time Management & Productivity - Best Practices
 
The six step guide to practical project management
The six step guide to practical project managementThe six step guide to practical project management
The six step guide to practical project management
 
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
 
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
 
12 Ways to Increase Your Influence at Work
12 Ways to Increase Your Influence at Work12 Ways to Increase Your Influence at Work
12 Ways to Increase Your Influence at Work
 
ChatGPT webinar slides
ChatGPT webinar slidesChatGPT webinar slides
ChatGPT webinar slides
 
More than Just Lines on a Map: Best Practices for U.S Bike Routes
More than Just Lines on a Map: Best Practices for U.S Bike RoutesMore than Just Lines on a Map: Best Practices for U.S Bike Routes
More than Just Lines on a Map: Best Practices for U.S Bike Routes
 

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

  • 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’
Current LanguageEnglish
Español
Portugues
Français
Deutsche
© 2024 SlideShare from Scribd

玻璃钢生产厂家梧州玻璃钢休闲椅多少钱松原不锈钢家具价格淮南玻璃钢树池坐凳生产厂家梧州玻璃钢花瓶价格甘肃玻璃钢装饰厂家直销黄山玻璃钢花钵多少钱吉林玻璃钢医疗外壳制造北京不锈钢家具公司忻州玻璃钢设备外壳定做湖州玻璃钢卡通雕塑生产厂家宝鸡玻璃钢浮雕厂家龙岩玻璃钢生产厂家益阳玻璃钢树池坐凳拉萨商业美陈生产厂家庆阳玻璃钢种植池价格枣庄玻璃钢垃圾桶定制中卫玻璃钢餐桌椅加工宜宾玻璃钢产品鸡西不锈钢家具制作普洱玻璃钢花槽厂石家庄不锈钢花盆定做三亚玻璃钢机械外壳生产厂家济宁玻璃钢家具定制太原玻璃钢树池厂家直销嘉兴玻璃钢浮雕厂家直销海东玻璃钢浮雕厂家直销昆明玻璃钢动物雕塑制作巴中玻璃钢雕塑定做湛江玻璃钢批发云浮玻璃钢花池厂香港通过《维护国家安全条例》两大学生合买彩票中奖一人不认账让美丽中国“从细节出发”19岁小伙救下5人后溺亡 多方发声卫健委通报少年有偿捐血浆16次猝死汪小菲曝离婚始末何赛飞追着代拍打雅江山火三名扑火人员牺牲系谣言男子被猫抓伤后确诊“猫抓病”周杰伦一审败诉网易中国拥有亿元资产的家庭达13.3万户315晚会后胖东来又人满为患了高校汽车撞人致3死16伤 司机系学生张家界的山上“长”满了韩国人?张立群任西安交通大学校长手机成瘾是影响睡眠质量重要因素网友洛杉矶偶遇贾玲“重生之我在北大当嫡校长”单亲妈妈陷入热恋 14岁儿子报警倪萍分享减重40斤方法杨倩无缘巴黎奥运考生莫言也上北大硕士复试名单了许家印被限制高消费奥巴马现身唐宁街 黑色着装引猜测专访95后高颜值猪保姆男孩8年未见母亲被告知被遗忘七年后宇文玥被薅头发捞上岸郑州一火锅店爆改成麻辣烫店西双版纳热带植物园回应蜉蝣大爆发沉迷短剧的人就像掉进了杀猪盘当地回应沈阳致3死车祸车主疑毒驾开除党籍5年后 原水城县长再被查凯特王妃现身!外出购物视频曝光初中生遭15人围殴自卫刺伤3人判无罪事业单位女子向同事水杯投不明物质男子被流浪猫绊倒 投喂者赔24万外国人感慨凌晨的中国很安全路边卖淀粉肠阿姨主动出示声明书胖东来员工每周单休无小长假王树国卸任西安交大校长 师生送别小米汽车超级工厂正式揭幕黑马情侣提车了妈妈回应孩子在校撞护栏坠楼校方回应护栏损坏小学生课间坠楼房客欠租失踪 房东直发愁专家建议不必谈骨泥色变老人退休金被冒领16年 金额超20万西藏招商引资投资者子女可当地高考特朗普无法缴纳4.54亿美元罚金浙江一高校内汽车冲撞行人 多人受伤

玻璃钢生产厂家 XML地图 TXT地图 虚拟主机 SEO 网站制作 网站优化