angular and seo - greenlane all hands day 10/17/16
TRANSCRIPT
Angular and SEOwe.in(kansas)==!anymore
misconceptioninception
What We’re Covering• wtf is a website, anyway?• javascript primer• how {{ angular }} sites are {{ built }}• angular + seo• don’t fight the future• resources
wtf is a website, anyway?ain’t your gramma’s content consumption anymore
4
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
… to dynamic applicationsWebsites today do way more than serve up text or digital magazine pages.
Modern websites are full-fledged applications.
7
8
javascript primeralert(“don’t be alarmed”);
9
Javascript - web programmingHTML 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
HTML example<body><h1>Heading</h1><br /><strong>Hello there.</strong></body>
11
Javascript example<script>
document.addEventListener( 'DOMContentLoaded', function ()
{
document.write('hello there');
}, false );
</script>
12
how angular sites are {{ built }}
more app than site
13
Template + controllerThe two basic components of an Angular app are:Template - builds the page layoutController - connects functions to the template
14
The templateThe two basic components of an Angular app are:Template - builds the page layoutController - connects functions to the template
15
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:
angular + seobest of both worlds (ish)
17
1. Google can crawl it.
18
https://www.screamingfrog.co.uk/seo-spider-6-0/
2. You gotta crawl like Google.
19
https://webmasters.googleblog.com/2014/05/understanding-web-pages-better.html
3. Pushstate
20
http://www.codelord.net/2015/05/12/angularjs-how-to-setup-pushstate-with-html5mode/
4. Don’t view-source, inspect.
21
5. Don’t contradict
tags.22
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.com&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
7. AJAX timeout
24
don’t fight the futurepeople thought inline images were dumb once
25
resourcesgit knowledged
26
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/