Upload
seoclarity
View
1.010
Download
0
Embed Size (px)
Citation preview
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: • [email protected]
• 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 • [email protected]• 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