Transcript Lynch

Search is an access issue
1
Find this for me…
2
It’s all related…
Standards = Access = Flexibility = SEO
• The core advice is remarkably similar:
– W3C on access: Create well-formed, structured content
– Google on SEO: Create well-formed structured content
W3C: www.w3.org/WAI/intro/wcag.php
Google: http://www.google.com/support/webmasters/bin/answer.py?answer=35769
3
Web search and user interface
4
>90% of our content depends on search
5
Standards = SEO = Access
• CSS helps promote both access and search optimization
• XHTML provides semantic structure a crawler can understand
– h1, h2, h3, <p>, <ul>, etc.
• Allows you to order the page content logically & graphically
– DIV and ID structures contain & order content
– Text content flow can be independent of graphic layout
6
Standards = SEO = Access
• Search engine crawlers are the most frequent “disabled users”
on the web
• Crawlers can only read text
• Crawlers don’t use mice and don’t understand “click here”
• Can’t see your pictures & graphic display text
• Crawlers don’t use:
– Javascript
– Cookies
– Flash
• How will a crawler read your page layout tables?
Across rows? Down columns?
7
Search engine optimization defined
• Clean separation of content & presentation
• A consistent set of principles for content structure
• A consistent approach to page graphic layout & design
• An awareness of how search crawlers “read” a site
– Crawlers read & rank PAGES, not sites
• SEO is intrinsic to the site design & structure
– The principles are simple
– You can’t buy SEO, or simply “add it on” later
8
Page titles are the key starting point
• Single most important element in SEO
• Provide the keywords and themes for the page
• Provide the most prominent text for the search results
• MUST contain carefully chosen keywords, consistent with the rest
of the page content
• Provide the text for user bookmarks
• Should be as unique as possible
– GOOD:
Yale | Medical School History
– BAD:
Yale University School of Medicine | History of YSM
– Bad bookmark result: “Yale University School of…”
9
Keywords
• Consistent across:
– Page title <title>
– Headers <h1>, <h2>
– Content
• Ideal keyword occurrence range is about 5-9%
• Heavy repetition of keywords de-ranks a page (looks like a search scam)
– File & directory names: yes, they count too!
• Use meaningful plain English words, use hyphens as separators
Good: plain-english-words-work.html
• Underscores are “non-breaking,” and are not read as individual words
Bad: this_is_not_search_readable.html
• Directory names count too
seo-advice/keywords/plain-english-words-work.html
10
SEO beyond the page content itself
• Every word involved in your site structure matters also:
– File names
– Directory names
• Use plain-English words with breaking characters like hyphens
• Make sure your file names are readable by search engines:
– “sea-animals” reads as “sea” & “animals”
– “sea_animals” reads as “sea_animals” (not a recognizable word)
• Examples
– Good: sea-animals/marine-birds/greater-shearwater.html
– Poor: sea_animals/marine_birds/greater_shearwater.html
– (Nothing in the second example contributes to content relevance)
11
Meta tags and search
• A great idea, subverted by greed
• They can’t hurt, and might even help
• DON’T use them to cheat; that will get you blackballed
<link rel="schema.DC" href="http://purl.org/dc/elements/1.1/" />
<meta name="DC.title"
lang="en"
content="Patrick J. Lynch personal Web site" />
<meta name="DC.description"
lang="en"
content="Personal Web site of artist, author, designer and photographer Patrick J. Lynch." />
<meta name="DC.creator"
lang="en"
content="Patrick J. Lynch" />
<meta name="DC.publisher"
content="Patrick J. Lynch, Yale University" />
<meta name="DC.format"
scheme="DCTERMS.IMT" content="text/html" />
<meta name="DC.keywords"
lang="en"
content="web design, web style guide, yale university, yale school of medicine, yale,
wildlife illustration, wildlife art, wildlife photography, medical illustration" />
12
Flexible styles
13
Use the cascade
skin.css
CSS
CSS
CSS
Local graphics & colors
unique to this page
typography.css
All site typography
core.css
Layout DIVs for all pages
•
Core & typography shared
throughout the site
•
Unique “skins” create graphic
variations
14
Yale web standards layouts
Variations are produced by different “skins”
The HTML remains the same
skin1.css
skin2.css
skin3.css
skin4.css
Page engineering by Victor Velt, Yale University
15
Use the cascade
skin-green.css
skin-red.css
CSS
CSS
“Skins”
provide visual
or structural
variation
All pages share
the same
underlying
XHTML
structure
Styles shared
by all pages
CSS
CSS
CSS
CSS
core.css
typography.css
print.css
mobile.css
16
Yale web standards layouts (wireframes)
17
Flexible styles across display conditions
Screen
media=“screen”
Print
media=“print”
Mobile
media=“handheld”
18
Web Developer Toolbar for Firefox
19
The ironies: Violating user expectations
What users expect to emerge
from the printer
WYSIWYG
Huh?
A foundational principle of the
graphic user interface
20
What does “handheld” mean these days?
Limited mobile
The regular web, on a mobile device
21
Thank you
[email protected]
patricklynch.net
22