# Presentation: 103845

## Semantic Markup and Search Engine Optimization

- Joseph R. Lewis
- Sandia National Laboratories

**Notes:**
About representing content appropriately in markup for optimal results in search engines.

## 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 JavaScript
- Try to not let the code get in the way of the content.

**Notes:**
Goal is to write lean, meaningful markup, with a minimum of cruft to interfere with your content. 

The whiz-bang stuff can be externalized using CSS and Javascript.

## Markup

- How many times have we seen this?
- Bad: <p class="heading2">

## Markup

- How many times have we seen this?
- Bad: <p class="heading2">
*Worse:* <p style="font-weight:bold; font-size:2em; color:#666;">

## Markup

- How many times have we seen this?
- Bad: <p class="heading2">
*Worse:* <p style="font-weight:bold; font-size:2em; color:#666;">
**OMG:** <p><font size=2><b><I><font color="#666666">...

## Markup

- What about just using **<h2>**?
- 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 <p> for paragraphs, not <br><br>.
- 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 <h1>, next level down <h2>, 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

- Standard browser:

- Decent altattribute

- No alt
- attribute

- Text-Only:

**Notes:**
<img> example using a simple web page with a single embedded image. The screenshots on the right are of the Lynx browser, showing a text-only representation, what a search engine or blind user might encounter. Good alt text returns a nice description of the image in it’s absence. Lack of alt text leaves the user high and dry.

## More forgotten tags

- Use <label>, <fieldset>, and <legend> for 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">DoE</abbr>.
*<acronym> will be deprecated.*

**Notes:**
These are good semantic practices. There is no reason why someone can’t write search crawlers to understand these tags and make sense out of them from a search perspective. Most search engines do understand the difference already between <title>, <h2>, and <p>, and definition lists and decoding abbreviations make perfect sense for specialized search applications. Other examples?

## XML

- Treat your HTML like XML. 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 (<h1> vs. <p>, 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?