Semantic Markup and Search Engine Optimization Joseph R

Doing Justice • What do we do with all that great content work? –

Markup • How many times have we seen this? – Bad: <p class="heading 2">

Markup • What about just using <h 2>? – This is the tag the

Markup Guidelines • Use <p> for paragraphs, not . • Use <ul>and <li>, and

Guidelines, continued… • Images – Use the alt property appropriately. • Should be a

<img> Example Text-Only: Standard browser: Decent alt attribute No alt attribute

More forgotten tags • Use <label>, <fieldset>, and <legend> form elements. • Use <dl>,

XML • Treat your HTML like XML describes exactly what it is tagging and

How this affects SEO • Don’t create markup that will interfere with the ability

Slides: 14

Download presentation

Semantic Markup and Search Engine Optimization Joseph R. Lewis Sandia National Laboratories

Doing Justice • What do we do with all that great content work? – Treat markup with care • Helps to think about accessibility • Represent your document in markup as the spec intended • Use HTML 4. 01, XHTML, or XML – Separate presentation from design • No presentational markup • Externalize CSS and Java. Script – Try to not let the code get in the way of the content.

Markup • How many times have we seen this? – Bad:

Markup • How many times have we seen this? – Bad: – Worse:

Markup • How many times have we seen this? – Bad: – Worse: – OMG: …

Markup • What about just using <h 2>? – This is the tag the spec wants you to use. – This gives common, established, accepted semantic meaning and structure to the document. – Assigns a level of weight to the heading. – Fully styleable using CSS

Markup Guidelines • Use for paragraphs, not . • Use <ul>and <li>, and style with CSS, instead of trying to do custom bullets with images. – Navigation: List of links – Forms: List of choices • Use heading tags. – Top level <h 1>, next level down <h 2>, and so on, in order.

Guidelines, continued… • Images – Use the alt property appropriately. • Should be a concise yet descriptive representation of the image • Need alt text if images are not supported (or working) – longdesc property: URL that points to a detailed description of the image content.

<img> Example Text-Only: Standard browser: Decent alt attribute No alt attribute

More forgotten tags • Use <label>, <fieldset>, and <legend> form elements. • Use <dl>, <dt>, and <dd> for definition lists. • Use <abbr> for abbreviations and acronyms. – Use the title property to expand the abbreviation, i. e. <abbr title="Department of Energy">Do. E</abbr>. • <acronym> will be deprecated.

XML • Treat your HTML like XML describes exactly what it is tagging and HTML should be no different. • Use XML to take semantic structure up to the next level beyond HTML. • Good support for XML/XSLT in modern browsers and search engines. • Server side parsers are available to assist with backwards compatibility and data manipulation.

How this affects SEO • Don’t create markup that will interfere with the ability of the content to be accessed. • Search engines are tuned to understand HTML and place weight accordingly (<h 1> vs. , for example). • Spiders can crawl for definitions, lists, images, etc, if properly tagged. • Search engines can’t read images or plugins. (Flash can be an exception. ) • Orientation is on text, not design.

Questions?