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 Think accessibility Represent your document in markup as the spec intended Use HTML 4.01, XHTML, XML –Separate presentation from design No presentational markup Externalize CSS and JavaScript

Markup How many times have we seen this? –Bad: –Worse: –OMG: … What about just using ? –This is the tag the spec wants you to use. –This gives common, established, accepted semantic meaning and structure to the document.

Markup Guidelines Use for paragraphs, not. Use 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, next level down, and so on, in order.

Guidelines, continued… Images –Use the alt property appropriately. Should be a concise yet descriptive representation of the image –longdesc property: URL that points to a detailed description of the image content.

Example Standard browser: Decent alt attribute No alt attribute Text-Only:

More forgotten tags Use,, and for form elements. Use,, and for definition lists. Use for abbreviations and acronyms. –Use the title property to expand the abbreviation, i.e. DoE. – will be deprecated.

XML Treat your HTML like XML. 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 Use HTML tags as they were intended to be used in the spec. Search engines are tuned to understand HTML and place weight accordingly ( 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.