Is AngularJS Right for Your Enterprise?

Is AngularJS Right for Your Enterprise?The SEO Insider’s Guide to AngularJS

2

3

Today’s Agenda• Session 1: Bill Hunt• What is AngularJS?• What should SEOs care?• How does it affect indexation and crawlability?

• Session 2: Catfish Comstock• Case Studies• Prep work• Working with IT

• Session 3: Benj Arriola• Technical implementation of AngularJS

4

First User PollWhat is your current role?• SEO• UX• Developer• Product Manager• Merchandizing• Other

5

Bill HuntGlobal Digital & Search Marketing StrategistBack Azimuth

6

What is AngularJS?• AngularJS is a structural framework for dynamic web apps. It

lets you use HTML as your template language and lets you extend HTML's syntax to express your application's components clearly and succinctly. Angular's data binding and dependency injection eliminate much of the code you would otherwise have to write.

• Source: https://docs.angularjs.org/guide/introduction

7

AngularJS by other Names• Many dev shops are cloning the features of AngularJS and

creating their own platform…

Image Credit: http://noeticforce.com/best-Javascript-frameworks-for-single-page-modern-web-applications

8

Popularity of Angular & Others

• 400k sites using AngularJS• 558k sites using BackboneJS• 14k sites using Meteor• 9k site using EmberJS

Source: BuiltWith April 2016

9

Why are Developers Using It?• Developers can write less code than before• Simplified App development by removing program flows and

load order as Angular handles dependencies• MVC components reduce shortcuts and potential breaks• DOM manipulation in directive = more flexible designs

• Simply, Angular has wired up all of the common framework tools and ensures they work together.

10

Why Should We Care?• Developed for “Single Page Apps” • Pages may not have unique URL’s (no URL no links or indexing)

• Most of the text is “Rendered” in browser not in the page• Search Engines can render the page but cannot understand context

and relevance of the content (no text no relevance and no rank)

• Links and Connections are Dynamically Created• Deeps links are added during page load and not static (no links to

follow = no crawl = no index = no ranking)

11

Self Test 1 – Unique URL’s

• When you scroll the page, do the modules have unique URL’s?

12

Self-Test 2 – View Source• view-source:http://www.barbie.com/en-us

Do you see any text or content that would tell the search engine what the page is about?

13

Self-Test 3 – Does Google See Text?• Info:http://www.barbie.com/en-us – View Text-Only

Does Google have any text cached for the page?

14

Self-Test 4 – Page Relevant?• Barbie spy squad site:barbie.com/en-us

Does Google show the page as relevant for the query?

15

Collaboration• Determine the benefits of using AngularJS and the potential

impact on the business

• Collaborate with SEO and Dev and Creative teams to ensure search friendly implementation

16

Where Can You Find Me?• Email: • bill@back-azimuth.com

• Twitter• @billhunt

• LinkedIn • https://www.linkedin.com/in/billhunt3

• Bill Hunt’s Rant’s and Raves• www.whunt.com

Sample Footer

17

Second User PollHave you implemented AngularJS on your site?• Yes• No, but we plan on it• No, we’re looking at a few options• I don’t know

18

Catfish ComstockDirector of SEOBusinessOnLine

19

Introduction• A number of my clients have had significant

SEO issues using Angular JavaScript• Each of the three anonymous case studies

presented were coded in Angular JS prior to SEO consultation• These SEO issues include:

• Content not being indexed / Blank pages indexed• Links not being indexed / Navigation not being

indexed• Pages not being indexed / Pages being indexed

under the wrong URL• Each of these case studies is in a different

stage of resolution.

Sample Footer

https://www.madewithangular.com/

20

Client 1• Issue: Content Populated in

Angular JS• Some content seen / Some

content not seen• Cache was blank but specific

string search pulled up page• Recommendation: Recode

affected area• Still unresolved

Sample Footer

This area required a “Click More” action to see the

content. This content was not indexed by search

engines.

21

Client 1• Steps used to Identify the Issue:1)Check Text Cache:

a) Use Cache link from Google Results or

b) Use Cache: command in Googlec) Click on Text Cache Link in Cache

Header d) You may need to use the ESC button

to disable redirectse) Or append &Strip=1 to Cache URL

2)Check for Unique Stringa) Use “inurl” command in conjunction

with unique string in quotes

Sample Footer

22

Client 2• Issue: Page Navigation templates

not being indexed as links (showing up as code)• Slow / Inconsistent of Indexing of

Pages• Links not passing trust and

authority to pages linked from the navigation• Content is correctly indexed• Recommendation: Change

navigation code• Issue unresolved

Google Text Cache:

http://www.doz.com/search-engine/angularjs-index-seo

23

Client 3• Issue: Page content not indexed and pages

not being indexed• Ecommerce site had only 10 pages indexed

and only two product pages• Blank pages considered duplicates• Text cache showed blank page / search for

specific text had no results• Recommendation: Implement Prerender.IO• Results

• 5 pages to 13k+ Indexed• Content Seen and Indexed

• Issue resolved / But there are additional issues

24

Client 3• Additional Client Specific Issues with Prerender.IO Solution:• *Issues not related to Prerender.io solution • Canonical Tags

• Wrong Canonical Tags on • Pagination (Single URL)

• Pagination doesn’t have unique URLs to build fragments from• Make sure rel=next / rel=prev is implemented on both regular URLs and

fragments

25

Making the Case to Management / IT

• Two Potential Scenarios• Already Have Angular JS• Considering Angular JS

26

Making the Case to Management / IT• Already Have Angular JS

• Determine if performance is currently affected using methodologies described earlier

• This is evaluation should always be done following the launch of a redesign that uses Angular JS

• If so, explain potential / current issues to management and IT (use this Webinar)

• Present Documentation to Management with Impact Report

• Create Impact Report with Potential Loss of Revenue / Opportunity for Growth (SEOClarity Forecast Report)

27

Making the Case to Management / IT

• Considering Angular JS• Explain Potential Issues to

management and IT (use this Webinar)• Determine if Functionality is Needed• Create Impact Report with Potential

Loss of Revenue / Opportunity for Growth• Evaluate Potential Solutions• Launch Site with Optimization

Solution in Place• Validate Solution is Working

28

Where Can You Find Me?• https://

www.linkedin.com/in/catfish• @SEOCatfish • catfish@businessol.com• http://www.businessol.com

29

Third User PollHow is SEO aligned with your IT/Development priorities?• We’re fully democratized• SEO is a consideration before development commences• SEO is a consideration after development• We’re not aligned at all• I don’t know

30

Benj ArriolaTechnical SEO DirectorThe Control Group Media Company, Inc.

31

Technical Implementation for SEO

SEO for AngularJS Sites

Use AngularJS

(2) Static Site Equivalent

(3) Initial Static HTML Rendering Pre-rendering JS Code

(4) Headless Browsers

(5) Pre-rendering Services

(1) Don’t Use AngularJS

@BenjArriola Technical SEO Director @ControlGroup_SD

32

Sample Angular Site for Discussion

• This is not a full AngularJS tutorial.• Simple examples

to point out the SEO issues and solutions.• Example site is

based on an AngularJS tutorial.

@BenjArriola Technical SEO Director @ControlGroup_SD

http://bit.ly/ajs5min

Noticed the URL Hash

Fragments. This is a

single page application.

(SPA)

bit.ly/seoajs0

33

Sample Angular Site for Discussion

@BenjArriola Technical SEO Director @ControlGroup_SD

Where’s the

content?

Where’s the links?

34

AngularJS: Why? Why Not?

AngularJSDevelopers

Users Search Engines

SEOs

Less Code, Data Binding, MVC,

DOM Control, Development Time

Fast Loading,

Desktop App-LikeWhere’s theContent & Links?

More SEO Work

@BenjArriola Technical SEO Director @ControlGroup_SD

35

1. Don’t Use AngularJSSEO for

AngularJS Sites

Use AngularJS

Static Site Equivalent

Initial Static HTML

Rendering

Pre-rendering JS Code

Headless Browsers

Pre-rendering Services

Don’t Use AngularJS

@BenjArriola Technical SEO Director @ControlGroup_SD

Not an SPA, has individual HTML pages.

There’s the content and links in the

source code!

bit.ly/seoajs1

36

1. Don’t Use AngularJSSEO for

AngularJS Sites

Use AngularJS

Static Site Equivalent

Initial Static HTML

Rendering

Pre-rendering JS Code

Headless Browsers

Pre-rendering Services

Don’t Use AngularJS

@BenjArriola Technical SEO Director @ControlGroup_SD

Things to consider:• User Experience

• Conversions• Sales

Things to consider:• Invested time/resources in

AngularJS• Changes in development time,

efficiency changes.

37

2. Equivalent Static SiteSEO for

AngularJS Sites

Use AngularJS

Static Site Equivalent

Initial Static HTML

Rendering

Pre-rendering JS Code

Headless Browsers

Pre-rendering Services

Don’t Use AngularJS

@BenjArriola Technical SEO Director @ControlGroup_SD

Uses AngularJSStatic HTML

and/or Server-Side Scripting

38

SEO for AngularJS

Sites

Use AngularJS

Static Site Equivalent

Initial Static HTML

Rendering

Pre-rendering JS Code

Headless Browsers

Pre-rendering Services

Don’t Use AngularJS

2. Equivalent Static Site

@BenjArriola Technical SEO Director @ControlGroup_SD

Uses AngularJSStatic HTML

and/or Server-Side Scripting

Static HTML and/or Server-Side Scripting

Uses AngularJS

301 redirect based on special meta tag to interpret the hash

fragments as get variables.

Onclick events will load the AngularJS site with return false, and keeping static URLs in

the link href attribute value.

(1) Always have the <meta name="fragment" content="!">(2) # ?_escaped_fragment_=(3) 301 redirect to static page.

(1) Keep href values going to static pages(2) Use onclick="window.location.href='...'"; for users(3) Don’t forget the return false; so the href value does not execute.bit.ly/seoajs2

39

Static HTML and/or Server-Side Scripting

3. Initial Static HTML RenderingSEO for

AngularJS Sites

Use AngularJS

Static Site Equivalent

Initial Static HTML

Rendering

Pre-rendering JS Code

Headless Browsers

Pre-rendering Services

Don’t Use AngularJS

@BenjArriola Technical SEO Director @ControlGroup_SD

Uses AngularJS

40

(1) Static HTML and/or Server-Side Scripting

(2) Uses AngularJS

3. Initial Static HTML Rendering

@BenjArriola Technical SEO Director @ControlGroup_SD

AngularJS Version

bit.ly/seoajs3

41

(1) Static HTML and/or Server-Side Scripting

(2) Uses AngularJS

3. Initial Static HTML Rendering

@BenjArriola Technical SEO Director @ControlGroup_SD

Other pages of the site

AngularJS Version

AngularJS with initial static HTML version

42

4. Pre-Rendering:Headless Browser

SEO for AngularJS

Sites

Use AngularJS

Static Site Equivalent

Initial Static HTML

Rendering

Pre-rendering JS Code

Headless Browsers

Pre-rendering Services

Don’t Use AngularJS

@BenjArriola Technical SEO Director @ControlGroup_SD

Uses AngularJS

<meta name="fragment" content="!">

(1) Tells SEs to replace # with

?_escaped_fragment_=

in the URL.(2) The _escaped_fragment_

will trigger the headless browser to render the JavaScript code.

bit.ly/seoajs4

43

4. Pre-Rendering:Headless Browser

SEO for AngularJS

Sites

Use AngularJS

Static Site Equivalent

Initial Static HTML

Rendering

Pre-rendering JS Code

Headless Browsers

Pre-rendering Services

Don’t Use AngularJS

@BenjArriola Technical SEO Director @ControlGroup_SD

Uses AngularJS

<meta name="fragment" content="!">

(1) Tells SEs to replace # with

?_escaped_fragment_=

in the URL.(2) The _escaped_fragment_

will trigger the headless browser to render the JavaScript code.

bit.ly/seoajs4

If there is no _escaped_fragment_ GET variable, load the AngularJS site.

The loadpage.js has all the instructions for PhantomJS

If there is an _escaped_fragment_ GET variable, run the loadpage.js file using PhantomJS and save it as a plain html file.

44

5. Pre-Rendering ServicesSEO for

AngularJS Sites

Use AngularJS

Static Site Equivalent

Initial Static HTML

Rendering

Pre-rendering JS Code

Headless Browsers

Pre-rendering Services

Don’t Use AngularJS

@BenjArriola Technical SEO Director @ControlGroup_SD

Uses AngularJS

<meta name="fragment" content="!">

(1) Tells SEs to replace # with

?_escaped_fragment_=

in the URL.

(2) The _escaped_fragment_ will run a URL rewrite to load the prerendered, cached code coming from a prerendering service.

bit.ly/seoajs5

45

5. Pre-Rendering ServicesSEO for

AngularJS Sites

Use AngularJS

Static Site Equivalent

Initial Static HTML

Rendering

Pre-rendering JS Code

Headless Browsers

Pre-rendering Services

Don’t Use AngularJS

@BenjArriola Technical SEO Director @ControlGroup_SD

Uses AngularJS

<meta name="fragment" content="!">

(1) Tells SEs to replace # with

?_escaped_fragment_=

in the URL.

(2) The _escaped_fragment_ will run a URL rewrite to load the prerendered, cached code coming from a prerendering service.

bit.ly/seoajs5

The middleware of Prerender.io is what controls the URL rewriting to point the _escaped_fragment_ URLs load from Prerender.io’s server that cached and prerendered the code.

Submit the URLs you want to be cached and prerendered. A token passed in the HTTP headers is used to identify your account.

46

Technical Implementation for SEO

@BenjArriola Technical SEO Director @ControlGroup_SD

Developer SEO UserWhy Like? Why Dislike? Whatever Dude!• Great Control Over the

DOM• Data binding• Easy Form Validation• Grouping HTML into

reusable components

• Search engines typically do not read JavaScript code.

• Google, which has a headless browser performs inconsistently in crawling and indexing JavaScript code.

• The page loads fast, and acts like a desktop application. No long page reloading.

• Sites that rank high where the top results are exactly what they were looking for that there is no need to go deeper.

Developer SEO UserWhy Like? Why Dislike? Whatever Dude!• Great Control Over the

DOM• Data binding• Easy Form Validation• Grouping HTML into

reusable components

• Search engines typically do not read JavaScript code.

• Google, which has a headless browser performs inconsistently in crawling and indexing JavaScript code.

• The page loads fast, and acts like a desktop application. No long page reloading.

• Sites that rank high where the top results are exactly what they were looking for that there is no need to go deeper.

47

Implementation SummarySEO for

AngularJS Sites

Use AngularJS

(2) Static Site Equivalent

(3) Initial Static HTML Rendering

Pre-rendering JS Code

(4) Headless Browsers

(5) Pre-rendering Services

(1) Don’t Use AngularJS

@BenjArriola Technical SEO Director @ControlGroup_SD

• 1. Don’t use AngularJS• 2. Static Site Equivalent

• <meta name="fragment" content="!">• ?_escaped_fragment_ 301 redirects to static version.• href values point to static version.• Onclick window.location.href loading AngularJS version with return false

• 3. Initial Static HTML Rendering• AngularJS tags where the content is dynamically added by DOM control, will already

have the content preloaded by server-side scripting.• href values will have unique URLs but with onclick values loading AngularJS version

with return false.

• 4. Headless Browser Prerendering• <meta name="fragment" content="!">• ?_escaped_fragment_ will trigger to load the headless browser. • Caching the page for server efficiency, faster page loading.

• 5. Pre-rendering Service• <meta name="fragment" content="!">• ?_escaped_fragment_ will trigger to load he cached prerendered pages. • The middleware handles the URL rewriting and fetching from the cache source.

Never experienced an AngularJS developer agree. Only for small JS usages.

Never experience as the primary strategy.Experienced as a takeover SEO project

My Favorite, no meta fragment tag, no _escaped_fragment_ , nothing to install.Only experienced with new websites and refactored websites.

Based on industry peers, those that want to stray away from the PhantomJS installation and configuration will use Prerender.io…

…But when a site has a very large amount of pages, and cost goes up, they start considering the headless browser.

48

Where Can You Find Me?

• /in/benjarriola• @benjarriola• about.me/benjarriola

@BenjArriola Technical SEO Director @ControlGroup_SD

49

Fourth User PollWhat development process does your company use?• Waterfall• Agile• Lean• Other• I don’t know

50

Thank you!Q&A