Angular and SEO - Greenlane All Hands Day 10/17/16
•Descargar como PPTX, PDF•
0 recomendaciones•212 vistas
SEO considerations for Angular and JS frameworks.
Recomendados
Recomendados
Más contenido relacionado
La actualidad más candente
La actualidad más candente (20)
Similar a Angular and SEO - Greenlane All Hands Day 10/17/16
Similar a Angular and SEO - Greenlane All Hands Day 10/17/16 (20)
Último
Último (20)
Angular and SEO - Greenlane All Hands Day 10/17/16
- 3. What We’re Covering • wtf is a website, anyway? • javascript primer • how {{ angular }} sites are {{ built }} • angular + seo • don’t fight the future • resources
- 4. wtf is a website, anyway? ain’t your gramma’s content consumption anymore 4
- 5. From text content... The first websites were just a way of making linked text documents available. The first true website ever is still online: http://info.cern.ch/hypertext/WWW/TheProject.html 5
- 6. 6
- 7. … to dynamic applications Websites today do way more than serve up text or digital magazine pages. Modern websites are full-fledged applications. 7
- 8. 8
- 9. javascript primer alert(“don’t be alarmed”); 9
- 10. Javascript - web programming HTML is a markup language - tells a browser how to layout and style a document. Javscript is a scripting programming language - basically adding features to the browser. 10
- 11. HTML example <body> <h1>Heading</h1> <br /> <strong>Hello there.</strong> </body> 11
- 12. Javascript example <script> document.addEventListener( 'DOMContentLoaded', function () { document.write('hello there'); }, false ); </script> 12
- 13. how angular sites are {{ built }} more app than site 13
- 14. Template + controller The two basic components of an Angular app are: Template - builds the page layout Controller - connects functions to the template 14
- 15. The template The two basic components of an Angular app are: Template - builds the page layout Controller - connects functions to the template 15
- 16. 16 <superfunnypanel title="Personal Data" edit="/employee/{{employee.id}}/edit"> <!-- actual content comes here --> </superfunnypanel> module.directive('superfunnypanel', function () { return {restrict:’E’, //some fancy code whatever you get it right Controller: Template:
- 17. angular + seo best of both worlds (ish) 17
- 18. 1. Google can crawl it. 18 https://www.screamingfrog.co.uk/seo-spider-6-0/
- 19. 2. You gotta crawl like Google. 19 https://webmasters.googleblog.com/2014/05/understanding-web-pages-better.html
- 20. 3. Pushstate 20 http://www.codelord.net/2015/05/12/angularjs-how-to-setup-pushstate-with-html5mode/
- 21. 4. Don’t view- source, inspect. 21
- 23. 6. AJAX 23 Asynchronous JavaScript and XML Infinite Suggest AJAX https://script.google.com/macros/s/AKfycbxLiwwsGKnNbEp9YBmytHlgS6u8i7HNZXGb_Z_MJFWoocHubDnV/exec?k=skate%20board&l=en&loc=google.c om&limit=10&offset=0&callback=JSON_CALLBACK Google internal AJAX https://www.google.com/complete/search?client=serp&hl=en&gs_ri=serp&q=rank%20tank%20
- 25. don’t fight the future people thought inline images were dumb once 25
- 27. Resources • https://builtvisible.com/javascript-framework-seo/ • https://www.v9seo.com/blog/2016/07/08/seos-need-know-about-angularjs-sites/ • http://www.codelord.net/2016/01/20/setting-up-seo-on-an-angular-app/ • http://www.codelord.net/2015/05/12/angularjs-how-to-setup-pushstate-with-html5mode/ • http://www.angularjsseo.com/