Search Engine Optimization (SEO) represents 60% of online traffic coming to most websites. The impact of search engines in our world are such that “to google” has been a verb in the Oxford and Merriam Webster dictionnary for almost a decade now. SEO is one of the practices that are heavily impacted by HTML5 along with accessibility. Accessibility aims to help individuals who have difficulties navigating the Web. In Canada, nearly 1 in 10 Canadians benefit form a website compliant with accessibility standards.
This presentation will show how HTML5 can dramatically improve accessibility and what it could mean for the future of SEO.
1. SEARCH ENGINE RANKINGS
HTML5 brings changes to two close digital practices : SEO and
accessibility in various ways that will be presented today.
HTML5
SEOACCESSIBILITY
01/28/15
GET STARTED
3. Who: Myriam Jessier
What: SEO and accessibility
Why: Because without people like you, we can’t do our job
Where: it’s happening all over the world but if you want to get technical, it’s
happening specifically here, at Notman.
When: The deadline for accessibility laws is looming in Canada and the importance of
SEO can’t be ignored (SEOs do get really loud about their practice).
Introduction
3
4. Potential of HTML5
4
NEW TAGS TO
CLASSIFY CONTENTIMPROVED
FORMS
USED IN
APPS
USED IN
GAMES
BOOST SITES
IN RICH MEDIA
IMPROVED CRAWLING
AND INDEXING
IMPROVED
UX
ALTERNATIVE TO
FLASH AND
SILVERLIGHT
5. And now for aless pleasant reality check
5
Reality check
NO PROVEN
IMPACT ON SEO
BROWSERS DON’T
FULLY SUPPORT IT
NOT USED BY
SEARCH ENGINES
TO UNDERSTAND
CONTENT
7. Search engine optimization (SEO) is
the process of affecting the visibility of
a website or a web page in a search
engine's "natural" or un-paid
("organic") search results.
A quick and dirty definition of SEO
If you Google « definitionof SEO » :
7
Positioning your
content in search
engine result pages
Backlinks
Good
content
Great dev
work
8. Key takeaway
No evidence that HTML5 affects SEO but it has great potential to change the way
search engines index and understand content.
WHY SEO KEEPS AN EYE ON HTML5
8
RICH MEDIA
WEBSITES
CODE BLOAT
UNDERSTANDING
CONTENT
MAKING AJAX
SEO FRIENDLY
9. Fun facts
• ShortofawebsitemadeinFrontageusingtables,SEOshatenothingmorethanawebsitemadeinFlash.
• Andrightabovethat,wehaveparallaxandotheronepagerwebsitesthatdonotuseHistoryAPI.
Fun Facts
9
Code bloat
WelovethesimplerHTMLDoctype
AndHTML5 filespecification
Rich media
HTML5givesALTtextgreatsupport
Audioandvideo elementsbring a lot
Content
Semantic markup helps crawlers
understand what each block of code is
tryingtoaccomplish withinthepage.
Ajax
Changing the URL in the address bar
of the browser without refreshing the
pageisgreatwith History API.
10. <article> for an independent block of content.
<section> for a subsection of a block of content.
<header> to specify the header of a page or the
header section of a self-contained block of content.
<footer> for an entire HTML document or the
footer of an <article>.
<nav> for main site navigation, previous/next
article links, pagination.
<aside> for content related but not part of the
main document
<video> to provide a cross-browser compatible
way to display video.
Tags that will be critical to the SEO success of a website
10
SEMANTICS &
CONTEXT
11. Semantic markup speaks to software
…and in turn allows webmasters to
speak to search engines
Importance for SEO
Semantic HTML speaks louder than
a thousand divs.
11
12. <video> specifies a standard way to embed
a video in a web page.
SEOs can tell search engines about content
related to the video, such as <captions>
and <subtitles>.
Rich content
Video
12
<audio> means that ultimately, we will
no longer have to rely upon third party
plugins in order to render audio.
Audio
Images
<figure> and <figurecaption> allow SEOs
to explain images better to search
engines
& users.
13. For SEO optimization purposes, it is often
recommended to use unique H1 tags in order
to communicate clearly the overall theme of
the page. Multiple H1 tags can be used within
a page, but it must be done very carefully (so
we often recommend to use a single H1 to
avoid problems).
This debate is present in SEO and accessibility.
Also, navigation menus and footers should not
be part of the content hierarchy as H tags as
they often add nothing to help understand the
overall theme of a page.
The great H1 debate
H1 tags clarify the theme of your content
13
17. Accessibility for the web means making
sure that our web pages and
applications are available to everyone,
including people with disabilities.
A website is accessible when it is
compatible with adaptation
technologies (software).
A comprehensive definition of accessibility
17
cognitive
visualhearing
mobility
18. Semantic HTML means the HTML
tags in a page should describe the
content in a way that has to do with
its meaning rather than its
presentation.
Ajax – HTML5 enables a refreshing
of the page without reloading the
content which in turns allows the
user to continue browsing without
starting all over again.
Using semantic HTML improvesaccessibility
18
VIDEO CAPTIONING RESPECT THE W3C
POUR MODEL
BETTER CONTENT
NAVIGATION
UI
19. Disabilities – a few statistics
19
Deafness
Visual Impairment
Cognitive
Mobility
360 million people have disabling hearing loss
285 million people are visually impaired
Between 110 million and 190 million adults have significantdifficulties in functioning.
That’s roughly 15% of the world’s population.
Clear statisticsare hard to find with theWorld Health Organization
Clear statisticsare hard to find with the World Health Organization
20. Disabilities – Canadian statistics
20
13.7%
When your
website is not
accessible, you
disregard
13.7% of the
country’s adult
population
3.8 million adult Canadians
live with a disability. That’s
nearly 1 in 10 Canadians.
More than 8 out of 10 persons
with disabilities use aids and
assistive devices
21. WCAG 2.0 (Web Accessibility Content Guidelines)
In Québec, there are 3 standards :
SGQRI-008-01
SGQRI-008-02
SGQRI-008-03
Ontario has an accessibility law based on the characteristics of companies.
Level A– put into effect in January 2014
Level AA – deadline for January 2021
Level AAA
Norms and standards
21
22. SECTORS
Public
SGQRI-008
– 70 requirements
– 3 levels of accessibility
Private
WCAG 2.0
– W3C recommended
– 12 rules and 61 criterias
Rich content
03
Website
01
Downloadable
Documents
02
Perceptible Usable
Comprehensi
ble
Robust
23. Creating an Accessible Web Site
23
HEADER AREA
WITH LOGO
HOMEPAGE ABOUT PAGE WITH
VIDEO
FAQ PAGE
24. Key takeaways:
Give access to all the information needed to fill out a form.
Required field allows screen readers to give out information on a mandatory field.
HTML5 Forms –Required attributes
24
Data validation
keeps your
data clean and
improves UX.Forms allow for a required
attribute that specifies if a
particular input it required.
Input types give hints to the browser
about the type of keyboard layout to
display for on-screen keyboards.
25. HTML5 – Audio & Video Accesibility
25
Providing details on
rich content
Natively play audio
and video files in
browser
More control and
more accessibility !
NEW TAGS NEW POSSIBILITIES MORE ACCESSIBILITY
27. SIMPLIFIEDDOCTYPE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html>
27
28. Figure element for images
28
There isn't any easy or semantic way to associate the caption, wrapped in
a paragraph tag, with the image element itself. HTML5 rectifies this, with
the <figure> element. When combined with the <figcaption> element, we
can now semantically associate captions with their image counterparts.
33. Forms allow for a new required attribute, which
specifies, naturally, whether a particular input is
required. Dependent upon your coding preference,
you can declare this attribute in one of two ways:
<input type="text" name="someInput" required>
Or, with a more structured approach.
<input type="text" name="someInput"
required="required">
With this code, and within browsers that support
this attribute, a form cannot be submitted if that
"someInput" input is blank.
The example on the right can be found here :
http://wet-boew.github.io/wet-
boew/demos/formvalid/formvalid-en.html
Required attribute
33
34. Get in Touch
Web
Email: jessiermyriam@gmail.com
Social Media
LinkedIn: twitter.com/siliconelife
LinkedIn: linkedin.com/in/myriamjessier
34
Hinweis der Redaktion
Here are some of the HTML5 benefits often discussed in our line of work :
Improved UX
New tags to classify content
Great alternative to Flash & Silverlight
Heavily used in apps and games
Improved crawling and indexing
Improved Forms
http://searchengineland.com/seo-best-practices-for-html5-truths-half-truths-outright-lies-99406
None of the popular Internet browsers fully support all of the features and codes in HTML5.
Today’s browsers will render HTML5, but there are still many aspects of HTML5 that are not fully supported by or compatible with all Internet browsers.
Since Google doesn’t use it as a means of understanding content better, it means that your clients will not be favoring HTML5 for SEO purposes.
Someday, HTML5 will make a great difference but as of now, no one is providing evidence about the effects of HTML5 on organic traffic. Still, once Search Engines take notice, HTML5 has the potential to change the way crawlers index the Web and how they understand content
It’s a new feature called the History API. It lets developers change the URL in the address bar of the browser without refreshing the page. This subtle change helps search engines tie AJAX content to a unique URL, which is crucial for their ranking algorithms.
http://www.searchenginejournal.com/html5-an-essential-weapon-for-seos/62512/
Article : The contents of an article tags should be entire self-contained. A blog post or new article could be wrapped in an <article> tag, for example.
Section : If a blog post was broken into several sections by subheaders, each section could be wrapped with a <section> tag. Just as books have chapters, blocks of content can have section.
Footer : This may contain things like footer navigation or meta-data about an article
Header : <header> tags might contain navigation, branding or the document headline.
Aside : In other words, could be used on a website sidebar or it could be used within an <article> for special call outs – like the “did you know” call outs found in many books.
http://www.searchenginejournal.com/html5-an-essential-weapon-for-seos/62512/
HTML5 is semantic HTML. It provides meaning to the structure of the page. A div doesn’t do that.
New semantic markup helps search engines understand what each block of code is trying to accomplish within the page.
HTML5 provides several new ways for webmasters to instruct search engines on how to handle links.
Identifying the most important links on your page is possible with page nav, footer and other tags. Links in the header and navigation get a little more of a boost compared to those in the footer.
http://code.tutsplus.com/tutorials/28-html5-features-tips-and-techniques-you-must-know--net-13520
https://developer.mozilla.org/en-US/Apps/Build/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video
The controls attribute adds video controls, like play, pause, and volume.
It is a good idea to always include width and height attributes.
If height and width are not set, the browser does not know the size of the video. The effect will be that the page will change (or flicker) while the video loads.
Text between the <video> and </video> tags will only display in browsers that do not support the <video> element.
Multiple <source> elements can link to different video files. The browser will use the first recognized format.
Currently, there are 3 supported file formats for the <audio> element: MP3, Wav, and Ogg
Because the HTML5 spec doesn't specify a specific codec for video, it's left to the browsers to decide. When displaying HTML5 video, you must offer both H.264 format (used by Safari and IE9+) and the Theora and Vorbis formats (used by Firefox and Opera)
Point important : un audit SEO soulève 70% des problèmes d’accessibilité
http://www.clarissapeterson.com/2012/11/html5-accessibility/
The four key areas disability accessibility seeks to address are:
Hearing
Mobility
Cognitive
Visual
People who are visually impaired often use assistive technology such as screen reader software or a braille display.
For the hearing impaired, most of the web is accessible, except for video and audio content, so for those we need to provide a text alternative, such as captioning or a transcription.
For example, skipping to different sections of a page is easier when using heading levels appropriately (H1 through H6).
In short, to be accessible, content for the Web needs to be made perceivable, operable, understandable and robust. Together, these attributes comprise the World Wide Web Consortium (W3C) POUR model, which mandates that the information and UI elements being presented to users must be perceivable to their senses; that there must be a way for them to operate the UI; that they must be able to understand the information and how to use the interface elements; and that the content be robust enough so they can access it using a variety of user agents, including assistive technologies (ATs).
http://www.who.int/mediacentre/factsheets/fs282/en/ blindness and visual impairment last updated August 2014
http://www.who.int/mediacentre/factsheets/fs300/en/ deafness last updated February 2014
http://www.who.int/mediacentre/factsheets/fs352/en/ December 2014
Header area with logo
Navigation menu
Main graphics
Main content
Blocks of information
Contact form
help with navigation : level 0, level 1, level 2 to see all the aspects of the navigation in the website
a page that has all types of contents to see how components work. We work in components
Forms can cause problems for people using screen readers if you don’t make sure it’s possible for them to access all the information they need to fill out the form.
With a required attribute, the browser will check a field and provided an error message if it is not filled in. Screen readers interpret it and let the user know that the field is required when it’s initially encountered.
http://code.tutsplus.com/tutorials/28-html5-features-tips-and-techniques-you-must-know--net-13520http://www.html5rocks.com/en/tutorials/forms/html5forms/
http://www.clarissapeterson.com/2012/11/html5-accessibility/
http://www.searchenginejournal.com/html5-an-essential-weapon-for-seos/62512/
HTML5 allows browsers to natively play audio and video files. One of the great things for accessibility when you use these elements is that since the browser provides the controls, they are much more likely to be accessible.
YouTube announced a new HTML5 video embed for their videos, for browsers which support it. Unfortunately, again, because the HTML5 spec doesn't specify a specific codec for video, it's left to the browsers to decide. While Safari, and Internet Explorer 9 can be expected to support video in the H.264 format (which Flash players can play), Firefox and Opera are sticking with the open source Theora and Vorbis formats. As such, when displaying HTML5 video, you must offer both formats.
Chrome can correctly display video that is encoded in both the "ogg" and "mp4" formats.
There are a few things worth noting here.
We aren't technically required to set the type attribute; however, if we don't, the browser has to figure out the type itself. Save some bandwidth, and declare it yourself.
Not all browsers understand HTML5 video. Below the source elements, we can either offer a download link, or embed a Flash version of the video instead. It's up to you.
The controls and preload attributes can be found online
It's appropriate to have multiple headers and footers in your projects.
Try not to confuse these elements with the "header" and "footer" of your website. They simply refer to their container. As such, it makes sense to place, for example, meta information at the bottom of a blog post within the footer element. The same holds true for the header.