Recommandé
Recommandé
Contenu connexe
Tendances
Tendances (19)
Similaire à Seo for single page applications
Similaire à Seo for single page applications (20)
Dernier
Dernier (20)
Seo for single page applications
- 1. SEO for Single Page Applications by Mark Fusco and Justin Gillespie
- 2. Roadmap ● Problem: SPA has exciting UX benefits and growing popularity, but SSR websites post higher results ● So What: SEO: Challenge of getting your SPA to number one on SERP ● How to Solve: understanding How Googlebot crawls and indexes the web ● Bare Minimum Techniques to get crawled and indexed ● Best of Both Worlds Approach ● Tooling Goal: High level understanding with specific techniques that are framework agnostic
- 4. Terminology ● Single Page Application(SPA): Allow you to simulate the work of desktop apps and is arranged where all of the elements are sent on initial load. So when you go to a new page, only a portion of the content is updated. ● SSR: Server Side Rendered ● SEO: Search Engine Optimization - the practice of increasing the quantity and quality of traffic to your website through organic search engine results. ● SERP: Search Engine Results Page ● Organic traffic: Any traffic you don’t have to pay for.
- 5. Aimed at Google (800 lb gorilla), also applies across search engine platforms and is always evolving
- 6. ● Interactive user responsiveness ● Mobile applications ● Event based action / real time updates ○ Instant messaging ○ Push notification ○ Automatic feed update ● Technical benefits ○ High speed after initial load ○ Fast development / deployment (SPA only consists of index.html, js bundle, css bundle) ● Libraries make development easy ○ Caching ○ Local storage ○ Event processing SPA Benefits
- 7. Problem MPA (multi page applications) that are SSR (server-side rendered) websites rank higher on Google then their client-side rendered counter parts.
- 9. ● 75% of people never scroll past the first page of search engines. ● 70-80% of people ignore paid search results, choosing to only click on organic search results. Why is this important?
- 10. How Googlebot traditionally crawled the web ● Crawl: Scour the internet for content, looking over the code/content for each URL they find. ● Index: Store and organize the content found during the crawling process. Once a page is in the index, it’s in the running to be displayed as a result to relevant queries. ● Rank: Provide the pieces of content that will best answer a searcher’s query, which means that results are ordered by most relevant to least relevant.
- 11. Google pipeline
- 12. Total client-side rendering ● It takes a lot longer to develop mobile applications ● Usually have to code the server from scratch ● Difficult to separate client and server Poor SEO - your pages do not get indexed. Total server-side rendering
- 13. Minimum Requirements to get crawled and indexed ● Mobile first, Responsive Web Design that optimizes for user devices / network conditions ● Have original, high value content ● Write clean code otherwise it is index as empty page ● Allowed by robots.txt ● Stable, canonical URL ● Respond with “200 OK” HTTP status codes ● Linked to from with site ● XML sitemap ● Keep file sizes down bundling, minification,CSS sprite sheets, and beware of large js packages ● Fast scripts crawler gives 5 secs for scripts to load, parse, and execute ● Each page should have a terse, specific <title> tag, a brief but accurate summary in the meta description and good structure: meaningful <h1> and <h2> headings, meaningful link text, images with good alt text, etc. ● Use structured data such as JSON-LD
- 14. Two-prong approach ● Best Performance Optimized Framework Practices to get through the crawlers extra rendering loop ● Selectively Server Side Rendering the high value content to the webcrawler to increase page rank
- 15. Client -Side Rendered Performance Optimization ● Pre-rendering ○ Prerender SPA Plugin (commonly used with Vue.js, but framework agnostic) ○ React-snap and React-snapshot ○ react-helmet ● Lazy loading ● Update components only when necessary and required - React Hooks
- 16. Server Side Rendering ● Next.js is a JavaScript framework for creating static server-rendered apps. ● Gatsby.js React-based static site generator ● ReactDOMServer (React) ○ Renders components into HTML strings ○ Requires a lot of manual labor with React Router and Redux libraries to work under partial server/client application rendering conditions ● Vue.js & Nuxt.js ○ Vue.js works like a glue between a Node.js server and SPA code ■ Hydration - Process of loading the Vue.js application in the browser ○ Nuxt.js is a framework for facilitating the creation of universal applications with Vue.js ■ Capable of configuring usage of server side rendering with Vue.js ● Angular Universal ○ Middleware that lives between Angular.js and Node.js ○ Server side rendering for Angular.js applications ■ Unifies high performance and UX of SPAs and SEO liability of a static site ● Ember Fastboot ○ Runs Ember web application over Node.js ○ Responds with initial HTML which is then run in browser
- 17. Tooling Chrome Dev tools: Lighthouse Open Source Dev tools: WebPageTest, Structured Data Testing Tool, Mobile Friendly Test, AMP Test, and PageSpeed Insight Third Party Prerendering services: Netlify, Prerender.io
- 18. Summary ● Increasing SPA rankings on SERP is vital to increasing traffic ● Googlebot generally crawls and indexes the web, and the indexed pages are then ranked. ● Client side rendering ○ Faster after the initial request ○ Doesn’t need to reload the whole page ● Server side rendering ○ Faster initial load times ○ Higher SEO rankings due to HTML content being visible before the JS is loaded ● Compromise ○ Include initial state of web application in HTML file, to allow fast indexing of important content ● Tooling ○ Lighthouse, WebPageTest, Structured Data Testing Tool, Mobile Friendly Test, AMP Test, and PageSpeed Insight, Netlify, Prerender.io