SEO Is About Users

Version 1.0Prepared by Trevor Pierce, Ad Hoc
SEO Is About Users
Improving findability with mobile-first, performance, security, and 508. Not 808’s.

Hi, I’m Trevor
1
I am a web accessibility designer at Ad
Hoc. I work with a wonderful team of
people in the healthcare space.
2
I have a degree in Visual Communications
and Design, which is a fancy way of
saying, print. I learned the history of
layout, typography, and illustration.
3
I discovered A List Apart in 2005. And that
was the beginning of a new path.
4
In 2016 I picked a side, and started to
learn React. (jQuery wasn’t cutting it,
and Backbone was confusing).

New Challenges in SEO
1
Search engine optimization isn’t quite
what it used to be. There are still <meta>
tags, keywords, quality inbound links, but
there are all new metrics now.
2
Search engines are looking at mobile-first
design, encrypted traffic, and front-end
performance.
3
Structured data is being used to provide
rich search results, and insight about the
social media landscape.
4
Search engines are concerned with
portions of Section 508, but completely
ignore the 808.

Prepared by Trevor Pierce, Ad Hoc Version 1.0
This is the mighty 808
The Roland TR-808 Rhythm Composer, often referred to
as the 808, is a drum machine introduced by the Roland
Corporation in 1980 and discontinued in 1983. It was one
of the earliest programmable drum machines, with which
users could create their own rhythms rather than having
to use preset patterns.
Wikipedia: Roland TR-808
https://en.wikipedia.org/wiki/Roland_TR-808

MOVING ON
Now that we’ve cleared that up...

Table of Contents
Theory of
Worthy Effort
Mobile-first
Design
Section 508
and A11y
Encrypting
Traffic (HTTPS)
Front-end
Performance
Linked Data,
SEO Validation

Theory of Worthy Effort
There is a strong correlation between sites that are usable, findable,
secure, and accessible, and the willingness of users to engage with them.

NEW SEO ITEM #1
Mobile-first Design

What is mobile-first?
The mobile-first approach creates designs and experiences for
the small screen first and working your way up. It is one of the
best strategies to create either a responsive or adaptive design.
UXPin
https://www.uxpin.com/studio/blog/a-hands-on-guide-to-
mobile-first-design/

Who uses the Internet in America 2018?
● 98% of the 18-29 demographic
18-29 17%
30-49 13%
50-64 11%
Mobile is often users’
first touch point
Who is smartphone dependent as of 2016?
Source: http://www.pewinternet.org/fact-sheet/internet-broadband/

1. What is the most important information?
a. Purpose or mission statement
b. Calls to action
c. Contact information
2. How can content be chunked into easily findable groups?
a. Headings and subheadings
b. Short, concise paragraphs
c. Expandable sections
d. Smaller pages with clear distinction
3. What does the information architecture look like?
a. Broad and shallow?
b. Narrow and deep?
Mobile-first means starting with content

1. Design for the smallest devices first
a. Current generation smartphones ~375 device pixels
b. Tablets ~768 device pixels
c. Desktop / Widescreen / High-density displays
2. Consider Flexbox or CSS Grid
a. Flexbox is good for one-plane layout
b. Grid is good for two-plane layout
c. Feature queries enable browser fallbacks
3. Iterate often
a. Test with real users, real devices
b. Expect to break things
c. Add breakpoints when it feels right
Don’t anticipate. Adapt!

Mobile-first wins:
1. Mobile users can operate your site without extra pinching and
zooming. Don’t forget the <meta viewport> declaration.
2. Responsive layouts assist users who zoom your site
to read more easily
3. Search engines are beginning to consider mobile-first designs
in their ranking algorithms

NEW SEO ITEM #2
Web Accessibility

20% is a lot
It is estimated 20% of web users
have some form of disability:
● Visual
● Hearing
● Motor
● Cognitive
● Vestigial
Source: https://webaim.org/intro/#people

Start with semantic HTML
Semantic means using markup that accurately describes
the content or resource. HTML is metadata -- it is data that
describes your data.
01 | Good markup resembles an outline
02 | One H1, matching the page <title>
03 | Properly nest headings
04 | Short, plain language paragraphs
05 | Lists, blockquotes, figures with captions
06 | Alt text for images, alt=”” for decorative items
07 | Validate your markup early and often

Add those snappy 508 hints
● <html lang="en">
● <meta name="viewport" content="width=device-width, initial-scale=1" />
● <noscript>Let users know your site requires JavaScript</noscript>
● <a href="#">Use Event.preventDefault</a>
● <a href="acme.com/about" aria-label="Learn more about Acme">Learn more</a>
● <button aria-label="Sign up for our mailing list">Sign up!</button>
● <h4 id="ingredient-list">Ingredient List</h4>
<ul aria-labelledby="ingredient-list">...list items</ul>

Scan your site for 508 errors
Scanners can be installed as browser add ons,
and offer no-manual-required ease of use.
01 | aXe-core ( https://axe-core.org/ )
02 | WAVE ( https://wave.webaim.org/ )
03 | Tota11y ( http://engineering.khanacademy.org/posts/tota11y.htm )

Think bigger, much bigger
Search engines are screen readers at scale
● Describing data helps users and assistive devices of any
scale understand what your site is about
● A subset of core accessibility checking is included in the
SEO Audit in Google Lighthouse
● Using the SEO audit ensures you are not making
mistakes that affect users, or search rank

Web accessibility (508) wins:
1. Users will have equal access because your site is more inclusive
2. Users will find your data easier, and be more likely to return
3. You are making a commitment to the open web
4. Your favorite search engines will reward the improved markup

NEW SEO ITEM #3
Traffic Encryption (HTTPS)

● Oct 2017 - Google now labels all non-HTTPS pages
with user input, Incognito pages “Not Secure”
● Can create uncertainty and worry
● “Is this page safe? I’m going somewhere else.”
● Pages not served on HTTPS ranked lower
Serving pages on HTTPS
makes user feel safe(r)

● Service workers (background services)
● Content distribution networks (proximity, caching)
● HTTP/2 (parallel file loading)
Some performance
upgrades require HTTPS

● Let’s Encrypt offers free, easy to use certificates
● Many shared hosting platforms offer SSL
● All good VPS hosting platforms offer guides to
roll your own Let’s Encrypt certificate
The bar for entry is much
lower than it used to be

HTTPS wins:
1. User content is encrypted, improving privacy
2. No insecure site messages are being shown to users
3. New tools available for front-end performance gains

NEW SEO ITEM #4
Front-end Performance

Know the challenges you face:
● Every byte of HTML, CSS, JavaScript you write
has to be downloaded, evaluated, and rendered
● The larger your (blocking) stylesheets and
scripts, the longer users wait. Abandonment
happens in as little as 4 seconds.
● Mobile users might be paying for data by the
byte. If you’re not optimized, you’re costing
them money.
Users want pages that
load fast

Put your page on a budget
Company
Your company
Admired company 1
Admired company 2
Admired company 3
Start Render Document Complete Fully Loaded
6.755s
4.322s
9.877s
1.922s
7.112s
5.118s
11.223s
3.471s
7.233s
5.422s
11.971s
3.866s
WebPagetest:
http://www.webpagetest.org/
Speed:
3G, 1.6 Megabits/sec,
200 Kilobytes
Kilobyte Budget:
1.922s * 200
384.4 kB
Dan Mall, How to Make a Performance Budget:
http://v3.danielmall.com/articles/how-to-make-a-performance-budget/

● Gives design, development a
performance target
● Makes allowances for fonts,
scripts, high-res images
● Helps prevent page size creep
as features are added
Images:
153.75 kB
JavaScript:
126.85 kB
CSS:
57.66 kB
HTML:
26.91 kB
Put your page on a budget, part deux

Speed up performance, real and perceived:
● Load CSS and JavaScript asynchronously
● Inline critical CSS into page <head>
● Split scripts into common, page-specific bundles
● Load CSS early and JavaScript late where possible
● Compression, minification
● Service workers for heavy computations
● Content-distribution networks
Don’t make users wait
longer than you have to

Front-end performance wins:
1. Users perceive a faster site, are more likely to engage
2. Data-restricted users are spending less money to view your content
3. Users on slower, less reliable networks can view your content easier

NEW SEO ITEM #5
Structured Data

What is structured data?
Structured data is a standardized format for providing
information about a page and classifying the page content.
Google: Introduction to Structured Data
https://developers.google.com/search/docs/guides/intro-
structured-data

Structured data says “Pay attention, this is important.”
It can describe many patterns:
● Business Type and Hours
● Blog or news feed
● Contact information
● Events
● Products
● Recipes
● Relationships
Search engines use structured data to learn

Microformats
Microformats are based on simple markup
conventions that enable you to add meaningful
structure to your web content.
http://microformats.org/wiki/Main_Page
Points to note:
● Easy to get started
● Well-supported, use semantic classes
● Some extra inline HTML, classes
● Older structured data format
<div id="hcard-Trevor-Pierce" class="vcard">
<a class="url fn" href="https://keybase.io/continuum">
Trevor Pierce
</a>
<div class="org">Ad Hoc</div>
<div class="addr">
<span class="locality">Seward</span>
<span class="region">NE</span>
<span class="postal-code">68434</span>
</div>
</div>

RDFa
RDFa is an extension to HTML5 that helps you
markup things like People, Places, Events,
Recipes, and Reviews
https://rdfa.info/
Points to note:
● Richer taxonomy than Microformats
● More complex, namespaced markup
● Facebook Open Graph ( http://ogp.me/ )
● Google Rich Snippets results
<html prefix="http://ogp.me/ns/music/#" lang="en">
<head>
<title>Miami Vice (2006)</div>
<meta property="og:title" content="Miami Vice" />
<meta property="og:type" content="video.movie" />
<meta property="og:url"
content="http://http://www.imdb.com/title/tt0430357/" />
<meta property="og:image"
content="https://ia.media-imdb.com/images/M/MV5BMTM4MDQ5MT
kxMV5BMl5BanBnXkFtZTcwMTU4MzUzMQ@@._V1_.jpg" />
…
</head>
…
</div>

JSON-LD
JSON-LD is a lightweight Linked Data format. It
is easy for humans to read and write. It is based
on the already successful JSON format.
https://json-ld.org
Points to note:
● Virtually 1:1 match to existing JSON
● Well-supported by search engines
● Google Rich Snippets results
● Add a <script> tag to document head
{
"@context": "https://json-ld.org/contexts/person.jsonld",
"@id": "dbpedia.org/page/Trent_Reznor",
"name": "Trent Reznor",
"born": "1965-05-17",
"dbo:associatedBand": {
"dbr:Nine_Inch_Nails":
"http://dbpedia.org/page/Nine_Inch_Nails"
}
}

Structured data wins:
1. Users get better search results
2. You help advance the web of linked information
3. Search engines categorize your data more accurately

SEO Is About Users
1
Optimize you content for users. Make it
easy to find, easy to understand, and
accessible to all. This means thinking
about human motivations, devices,
networks, and differing abilities.
2
Users who can find your data and have an
easy time interacting with it will return
and engage more frequently.
3
These same users might even tell their
friends. An anecdote - the only reviews I
see are either very good, or very, very bad.
4
Optimizing your content for search
engine placement should be a
by-product, not the goal unto itself.

CLOSING
Questions?

● https://keybase.io/continuum
● https://twitter.com/1copenut
● https://github.com/1copenut
I’m on the Internet

● https://www.w3.org/TR/WCAG20/
● https://www.w3.org/TR/wai-aria-1.1/
● http://v3.danielmall.com/articles/how-to-make-a-performance-budget/
● https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-blocking-css
● http://www.webpagetest.org/
● https://timkadlec.com/2014/11/performance-budget-metrics/
● https://www.dropbox.com/s/8h9lo8ee65oo9y1/front-end-performance-checklist-2018.pdf?dl=0
● https://developers.google.com/search/docs/guides/intro-structured-data
● http://microformats.org
● http://rdfa.info
● http://ogp.me/
● https://json-ld.org
Links for Further Research

Thank you.

https://unsplash.com/photos/Besxfn2Z8fo
Photo by Hoach Le Dinh on Unsplash
https://unsplash.com/photos/lO6ZzB041zY
Photo by Ant Rozetsky on Unsplash
https://commons.wikimedia.org/wiki/File:Roland_T
R-808_(large).jpg
Photo by Brandon Daniel
https://unsplash.com/photos/GIudaMzhA94
Photo by Matthew Fournier on Unsplash
https://unsplash.com/photos/u2Ru4QBXA5Q
Photo by Pankaj Patel on Unsplash
Photo credits
https://unsplash.com/photos/pY_AZJfdbHQ
Photo by Matt Artz on Unsplash
https://unsplash.com/photos/U66avewmxJk
Photo by jean wimmerlin on Unsplash
https://unsplash.com/photos/vjkM-0m34KU
Photo by Victor Freitas on Unsplash
https://unsplash.com/photos/YIN4xUBaqnk
Photo by Morgan Sessions on Unsplash
https://unsplash.com/photos/I2Dz5Hljm9g
Photo by KEEM IBARRA on Unsplash
https://unsplash.com/photos/RnCPiXixooY
Photo by Efe Kurnaz on Unsplash

SEO Is About Users

More Related Content

SEO Is About Users