Semantic Markup and Search

hurriedtinkleAI and Robotics

Nov 15, 2013 (3 years and 8 months ago)

66 views

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 JavaScript


Try to not let the code get in the way of the content.

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 alt

attribute

No alt

attribute

Text
-
Only:

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.

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?