CODING FOR SEO by Jonathan Shroyer Sunday, May 8, 2011 W3C WEB STANDARDS • They develop “recommendations” for HTML, CSS, XML, DOM, etc. • Most major software developers in the field assist in the creation of the standards (Adobe, Apple, AOL, Google, HP, IBM, Microsoft, Mozilla, Opera, Oracle, Yahoo!, etc.) Sunday, May 8, 2011 SEMANTICS Sunday, May 8, 2011 WHAT IS “SEMANTIC”? • “Relating to meaning” • Use tags that describe the content they contain For example: <h1>This is the main title</h1> <h2>This is my sub heading</h2> <p>This is a paragraph of content.</p> Sunday, May 8, 2011 Sunday, May 8, 2011 LAYERED SEMANTIC MARKUP Separate content/structure from presentation • Content/Structure - HTML • Presentation - CSS • Behavior - Javascript Sunday, May 8, 2011 WHY USE SEMANTIC CODE? Using semantic code improves: • SEO ranking • Ease of maintenance (no tag soup) • Page size/load time • Accessibility Semantic HTML is the foundation of “Progressive Enhancement” Sunday, May 8, 2011 PROGRESSIVE ENHANCEMENT VS. GRACEFUL DEGRADATION Progressive enhancement • Builds sequentially on the 3 layers (HTML, CSS, JS) • Gives everyone access to basic content and functionality • Allows every user to consume as much visual and interactive richness as their environment can support Sunday, May 8, 2011 PROGRESSIVE ENHANCEMENT VS. GRACEFUL DEGRADATION Graceful Degradation • Designed for the cutting-edge with fall- backs for less-capable browsers • Looks great, but fewer people can use your site. Sunday, May 8, 2011 THE BASICS Sunday, May 8, 2011 HTML IS A LANGUAGE • Just like any language you speak, the more words you know the better quality the communication • SEO isn't as cryptic as you think! Just think like a blind person trying to use your site because that’s how a search engine does it. Sunday, May 8, 2011 PROPER HEADINGS • H tags are possibly most important for SEOs • One H1 per page • Opening page H1 should be company name and tagline/short description. • H1 tags on all inner pages should be article title. • NEVER skip a tag! (ie. H2 to H4) Sunday, May 8, 2011 IMAGES • Use alt tags on images which you want people to know what it is. (ie. If image wasn't there, would the description add to the content?) • Learn how to size images properly and how to compress them. Extra size slows down site and can lower SEO value. Sunday, May 8, 2011 BASIC TEXT FORMATTING • Use <strong> for bold text • <em> for italics • Wrap text in <span> with class or style to create a custom text style Sunday, May 8, 2011 FORMS • Wrap forms in <fieldset> followed by <legend> • Legends act as the title of your form • Never put input options after submit button • Use labels for your input fields. 'for' corresponds to ID. • <label for="firstname"> • Inputs need name and ID • <input type="text" name="fname" id="firstname" /> Sunday, May 8, 2011 FORMS IMPORTANT NOTE: Screen readers switch from content to form mode when encountering the form tag. Many screen readers can’t read content within a form tag other than labels and inputs. Sunday, May 8, 2011 TABLES • Tables are for tablature data... not for layouts • Tables should include summery and id • Use <thead> for column headers • Add scope to <th> and/or <td>. • Defines a way to associate header cells and data cells in a table. • Scope can be col, row, colgroup, row group Sunday, May 8, 2011 ABBR • Abbreviated Forms: For example, SEO, SEM, WWW, HTTP, etc. • Do not confuse ABBR with ACRONYM and/or vice versa. If the abbreviation and/or initialism is not pronounced as a word then utilize the ABBR element and not the ACRONYM element described below. ABBR is a phrase element. • Attributes: class, dir, id, lang, style, title <abbr title="Search Engine Optimization">SEO</abbr> Sunday, May 8, 2011 ACRONYM • A word or name that is formed by combining the first letters (or the first few letters) of a series of words. For example, SERP is the acronym for Search Engine Results Page. An ACRONYM can be and/or is pronounced as a word, whereas many other abbreviations and/or initialisms can not and/or are not. ACRONYM is a phrase element. • Attributes: class, dir, id, lang, style, title <acronym title="Search Engine Results Page">SERP</acronym> Sunday, May 8, 2011 ADDRESS • Information on Author: The ADDRESS element may be used by authors to supply contact information for a document and often appears at the beginning or end of a document. • Attributes: class, dir, id, lang, style, title <address> Contact: Address: City, State, Zip, Country Tel: +1-714-555-1212 Website: http://example.com/ </address> Sunday, May 8, 2011 AREA • Client-Side Image Map Area: When a user activates a region of a client-side image map with a mouse, the pixel coordinates are interpreted by the user agent. The user agent selects a link that was specified for the activated region and follows it. • Attributes: class, dir, id, lang, style, title <map name=""> <area href="" shape="" coords="" alt=""> </map> Sunday, May 8, 2011 BLOCKQUOTE • Long Quotation: BLOCKQUOTE is for long quotations (block level content) and Q is intended for short quotations (inline content) that don't require paragraph breaks. • Attributes: class, cite, dir, id, lang, style, title <blockquote>”These two elements (BLOCKQUOTE and Q) designate quoted text. BLOCKQUOTE is for long quotations (block level content) and Q is intended for short quotations (inline content) that don't require paragraph breaks. </blockquote> Sunday, May 8, 2011 BUTTON • Push Button: Buttons created with the BUTTON element function just like buttons created with the INPUT element, but they offer richer rendering possibilities. Does not work with IE6! • Attributes: accesskey, class, dir, disabled, id, lang, name, style, tabindex, title, type, value <button type="button">Click Me!</button> Sunday, May 8, 2011 CAPTION • Table Caption: When present, the CAPTION element's text should describe the nature of the table. The CAPTION element is only permitted immediately after the TABLE start tag. A TABLE element may only contain one CAPTION element. • Attributes: class, dir, id, lang, style, title <table> <caption>Table caption</caption> ... Sunday, May 8, 2011 CITE • Citation: This is a phrase element and contains a citation or a reference to other sources. • Attributes: class, dir, id, lang, style, title <p>As <cite>Barack Obama</cite> said, <q>Focusing your life solely on making a buck shows a poverty of ambition. It asks too little of yourself. And it will leave you unfulfilled.</q></p> Sunday, May 8, 2011 CODE • Computer Code Fragment: Designates a fragment of computer code. • Attributes: class, dir, id, lang, style, title <p>The expression <code>x += 1</code> is short for <code>x = x + 1</code>.</p> Sunday, May 8, 2011 DEFINITION LISTS (DL, DT, DD) • Definition List, Definition Term, Definition Description: Definition lists vary only slightly from other types of lists in that list items consist of two parts: a term <dt></dt> and a description <dd></ dd>. The term is given by the DT element and is restricted to inline content. The description is given with a DD element that contains block level content. • Attributes: class, dir, id, lang, style, title Sunday, May 8, 2011 DEFINITION LISTS (DL, DT, DD) <dl> <dt>SEO</dt> <dd>Search Engine Optimization is the process of improving the volume and quality of traffic to a web site from search engines via "natural" ("organic" or "algorithmic") search results.</dd> </dl> Sunday, May 8, 2011 DEL • Deleted Text: INS and DEL are used to markup sections of the document that have been inserted or deleted with respect to a different version of a document (e.g. in blog authoring where publishers need to view changes made). • Attributes: cite, class, datetime, dir, id, lang, style, title <del>Search Engine Optimization</del> <ins>Search Engine Marketing</ins> Sunday, May 8, 2011 DFN • Definition: Indicates that this is the defining instance of the enclosed term. • Attributes: class, dir, id, lang, style, title <ul> <li><dfn>SEO</dfn>: Search Engine Optimization is a subset of SEM and involves the process of improving the volume and quality of traffic to a web site from search engines via natural (organic or algorithmic) search results.</li> </ul> Sunday, May 8, 2011 INS • Inserted Text: INS and DEL are used to markup sections of the document that have been inserted or deleted with respect to a different version of a document (e.g., in draft legislation where lawmakers need to view the changes). • Attributes: cite, class, datetime, dir, id, lang, style, title <ins>Search Engine Optimization</ins> <del>Search Engine Marketing</del> Sunday, May 8, 2011 LABEL • Form Field Label Text: The LABEL element may be used to attach information to controls. Each LABEL element is associated with exactly one form control. • Attributes: accesskey, class, dir, for, id, lang, style, title <label for="Radio1">This Radio Button 1 has a label associated with it.</label> <input type="radio" value="Selected" name="Radio" id="Radio1"> Sunday, May 8, 2011 MAP • Client-Side Image Map: The MAP element specifies a client- side image map (or other navigation mechanism) that may be associated with another elements (IMG, OBJECT, or INPUT). An image map is associated with an element via the element's usemap attribute. The MAP element may be used without an associated image for general navigation mechanisms. • Attributes: accesskey, class, dir, id, lang, style, title <map name=""> <area href="" shape="" coords="" alt=""> </map> Sunday, May 8, 2011 NOSCRIPT • Alternate content container for non script based rendering. The NOSCRIPT element allows authors to provide alternate content when a script is not executed. The content of a NOSCRIPT element should only be rendered by a script aware user agent.