Search is an access issue
Download
1 / 22

Search is an access issue - PowerPoint PPT Presentation


  • 46 Views
  • Uploaded on

Search is an access issue. Find this for me…. It’s all related…. The core advice is remarkably similar: W3C on access: Create well-formed, structured content Google on SEO: Create well-formed structured content. Standards = Access = Flexibility = SEO. W3C: www.w3.org/WAI/intro/wcag.php

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about ' Search is an access issue' - hunter-everett


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript


It s all related
It’s all related…

  • The core advice is remarkably similar:

    • W3C on access: Create well-formed, structured content

    • Google on SEO: Create well-formed structured content

Standards = Access = Flexibility = SEO

W3C: www.w3.org/WAI/intro/wcag.php

Google: http://www.google.com/support/webmasters/bin/answer.py?answer=35769




Standards seo access
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


Standards seo access1
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?


Search engine optimization defined
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


Page titles are the key starting point
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…”


Keywords
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 tooseo-advice/keywords/plain-english-words-work.html


Seo beyond the page content itself
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)


Meta tags and search
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" />



Use the cascade

CSS

CSS

CSS

Use the cascade

  • Core & typography shared throughout the site

  • Unique “skins” create graphic variations

skin.css

Local graphics & colors

unique to this page

typography.css

All site typography

core.css

Layout DIVs for all pages


Yale web standards layouts

skin1.css

skin2.css

skin3.css

skin4.css

Yale web standards layouts

Variations are produced by different “skins”

The HTML remains the same

Page engineering by Victor Velt, Yale University


Use the cascade1

skin-green.css

skin-red.css

“Skins”provide visual or structural variation

CSS

CSS

All pages share the same underlying XHTML structure

Styles shared by all pages

CSS

CSS

CSS

CSS

mobile.css

core.css

typography.css

print.css

Use the cascade



Flexible styles across display conditions

Screen

media=“screen”

Print

media=“print”

Mobile

media=“handheld”

Flexible styles across display conditions



The ironies violating user expectations

What users expect to emerge

from the printer

Huh?

The ironies: Violating user expectations

WYSIWYG

A foundational principle of the graphic user interface


What does handheld mean these days

Limited mobile

The regular web, on a mobile device

What does “handheld” mean these days?


Thank you
Thank you

patrick.lynch@yale.edu

patricklynch.net