1 / 14

Semantic Markup and Search Engine Optimization

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

anais
Download Presentation

Semantic Markup and Search Engine Optimization

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. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

  2. 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.

  3. Markup • How many times have we seen this? • Bad: <p class="heading2">

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

  5. 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">…

  6. 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

  7. 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.

  8. 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.

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

  10. 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.

  11. 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.

  12. 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.

  13. Questions?

More Related