Upload
others
View
3
Download
0
Embed Size (px)
Citation preview
Website ConstructionSEO, Progressive Enhancement
Frédéric Haziza <[email protected]>
Department of Computer Systems
Uppsala University
Summer 2009
HTML CSS JS Conclusion
HTML CSS JSContent Presentation Behaviour
2 WebConst’09 | Website Construction (SEO, Progressive Enhancement)
HTML CSS JS Conclusion
Rules of Progressive Enhancement
1 Enrich content with thorough markup2 Test core functionality with HTML only3 Enchance layout with CSS4 Enchance behaviour with JS5 Respect end-user browser preferences6 Don’t create barriers to entry
3 WebConst’09 | Website Construction (SEO, Progressive Enhancement)
HTML CSS JS Conclusion
Markup
Enhance content with meaning
4 WebConst’09 | Website Construction (SEO, Progressive Enhancement)
HTML CSS JS Conclusion
Tags
html, head, body, div, span, applet,object, iframe, a, abbr, acronym,address, area, base, blockquote,button, caption, hr, br, cite, code, col,colgroup, optgroup, del, dfn, h1, ...,h6, em, font, img, ins, kbd, q, s,samp, small, strike, strong, sub, sup,gtt, var, pre, p, b, u, i, center, dl, dt,dd, ol, ul, li, fieldset, form, label,legend, table, caption, tbody, tfoot,thead, tr, th, td
5 WebConst’09 | Website Construction (SEO, Progressive Enhancement)
HTML CSS JS Conclusion
Why does it matter?
Source: HitWise.com
6 WebConst’09 | Website Construction (SEO, Progressive Enhancement)
HTML CSS JS Conclusion
Why does it matter?
Source: Cutrell & Guan (2007): What are you looking for? An eye-tracking study of information usage
in Web Search7 WebConst’09 | Website Construction (SEO, Progressive Enhancement)
HTML CSS JS Conclusion
Why does it matter?
Source: Cutrell & Guan (2007): What are you looking for? An eye-tracking study of information usage
in Web Search
8 WebConst’09 | Website Construction (SEO, Progressive Enhancement)
HTML CSS JS Conclusion
SEO barriers
Inadequate inbound links – low page rank
Drowning in splash pages – missing opportunities
Flash – with the two divs trick
Obscure navigationGive up graphics-based navigationJunk javascript-only navigation<script src="menunav.js" ... ></script> list-based CSS-style menus.Don’t duplicate content
9 WebConst’09 | Website Construction (SEO, Progressive Enhancement)
HTML CSS JS Conclusion
Which is better?
1 Fish<br />Chips<br />
2 <li>Fish<li>Chips
3 <li>Fish</li><li>Chips</li>
4 <ul><li>Fish</li><li>Chips</li>
</ul>
11 WebConst’09 | Website Construction (SEO, Progressive Enhancement)
HTML CSS JS Conclusion
Which is better?
1 <span class="headline">This is a title </span>
2 <h1>This is a title </h1>
3 <p><b>This is a title</b></p>
12 WebConst’09 | Website Construction (SEO, Progressive Enhancement)
HTML CSS JS Conclusion
Which is better?
1 <dl><dt>Menu of the day</dt>
<dd>Fish</dd><dd>Chips</dd>
</dl>
2 <h3>Menu of the day</h3><ul>
<li>Fish</li><li>Chips</li>
</ul>
13 WebConst’09 | Website Construction (SEO, Progressive Enhancement)
HTML CSS JS Conclusion
Which is better?
1 <div id="footer">c© Uppsala University | Just some more text</div>
2 <div id="footer"><p> c© Uppsala University | Just some more text</p></div>
14 WebConst’09 | Website Construction (SEO, Progressive Enhancement)
HTML CSS JS Conclusion
Old time, Table as layout mechanism
Not good because:CSS can be cached, table markup cannotAccessibility issuesPresentation is meshed within contentLoad timeSemantically wrong: it’s not tabular data
15 WebConst’09 | Website Construction (SEO, Progressive Enhancement)
HTML CSS JS Conclusion
Divitis and Classitis – Common mistake
<d i v i d="news"><d i v c l a s s=" h e a d l i n e " > News h e a d l i n e </ d i v><d i v c l a s s=" sou r c e " > UNT </ d i v><d i v c l a s s=" date " > Jan 6 th , 1978 </ d i v><d i v c l a s s=" paragraph "> Lorem ipsum . . . </ d i v>
<d i v c l a s s=" h e a d l i n e " > News h e a d l i n e </ d i v><d i v c l a s s=" sou r c e " > Dagens Nyheter </ d i v><d i v c l a s s=" date " > Jan 6 th , 1978 </ d i v><d i v c l a s s=" paragraph "> Lorem ipsum . . . </ d i v>
</ d i v>
16 WebConst’09 | Website Construction (SEO, Progressive Enhancement)
HTML CSS JS Conclusion
Divitis and Classitis – Healthier
<d i v c l a s s="mod" i d="news"><h2> News h e a d l i n e </h2><c i t e c l a s s=" p u b l i s h e r "> UNT </ d i v><c i t e c l a s s=" date " > Jan 6 th , 1978 </ d i v><p> Lorem ipsum . . . </p>
<h2> News h e a d l i n e </h2><c i t e c l a s s=" p u b l i s h e r "> Dagens Nyheter </ d i v><c i t e c l a s s=" date " > Jan 6 th , 1978 </ d i v><p> Lorem ipsum . . . </p>
</ d i v>
17 WebConst’09 | Website Construction (SEO, Progressive Enhancement)
HTML CSS JS Conclusion
Find the appropriate elementCreate a useful DOM structure
18 WebConst’09 | Website Construction (SEO, Progressive Enhancement)
HTML CSS JS Conclusion
New elements - Tables
<t a b l e><thead><t r> . . . </ t r></ thead><t f o o t><t r> . . . </ t r></ t f o o t><tbody><t r> . . . </ t r></ tbody>
</ t a b l e>
20 WebConst’09 | Website Construction (SEO, Progressive Enhancement)
HTML CSS JS Conclusion
New elements - Table
<t a b l e summary=" De t a i l e d f e a t u r e s compar i son ">
<cap t i on>Featu r e compar i son</ cap t i on>
<thead><t r> <th> . . . </ th> </ t r></ thead><t f o o t><t r> <th> . . . </ th> </ t r></ t f o o t><tbody><t r> <td> . . . </ td></ tbody>
</ t a b l e>
Like the alt attribute of an img
21 WebConst’09 | Website Construction (SEO, Progressive Enhancement)
HTML CSS JS Conclusion
New elements - Forms
< f i e l d s e t><l egend>Ship add r e s s</ l egend>< i n pu t . . .>
</ f i e l d s e t>
< f i e l d s e t><l egend>B i l l a dd r e s s</ l egend>< i n pu t . . .>
</ f i e l d s e t>
23 WebConst’09 | Website Construction (SEO, Progressive Enhancement)
HTML CSS JS Conclusion
Search Engine Optimization
Deploy keyword strategicallyCoherent information across the siteOptimize key contentOptimize on-site linksMake it linkworthyAcquire inbound links
24 WebConst’09 | Website Construction (SEO, Progressive Enhancement)
HTML CSS JS Conclusion
Deploy keyword strategically
<head>
<meta name="keywords " content=" uppsa ladc ,upp sa l a danscen te r , uppsa la , dance cen t e r ,dance , cour se , hea l th , par ty , s a l s a ,d i s co , s t r e e t dance , o r i e n t a l " />
</head>
25 WebConst’09 | Website Construction (SEO, Progressive Enhancement)
HTML CSS JS Conclusion
Coherent information across the site
<head>
<meta name=" d e s c r i p t i o n " c on t en t="Uppsa la DansCenter o f f e r s an un iquecomb ina t i on o f dance c ou r s e s ( s t r e e t , b e l l y dance , d i s co ,cheerdance , . . . ) i n downtown Uppsa la f o r a l l ages to advantageousp r i c e s . Our p r em i e r i n t e r e s t i s to he l p you f i n d dance j o y . Withus , you can l e a r n d i f f e r e n t s a l s a dance s t y l e s : rueda de ca s i no ,cuban dances , LA s a l s a s t y l e , and many more . Uppsa la Danscente ro r g a n i z e s a l s o dance shows and pe r f o rmance s i n Uppsa la andStockholm" />
<meta name=" t i t l e " c on t en t="Uppsa la DansCenter " />
< t i t l e>Uppsa la Danscente r</ t i t l e>
</head>
+
Content, links, header tags, navigation and the URI of the page
26 WebConst’09 | Website Construction (SEO, Progressive Enhancement)
HTML CSS JS Conclusion
Optimize key content
Search-Engines favormeta descriptions (alt , title , src, summary, abbr),title tagsand headlines.
27 WebConst’09 | Website Construction (SEO, Progressive Enhancement)
HTML CSS JS Conclusion
Choose your keywords length
28 WebConst’09 | Website Construction (SEO, Progressive Enhancement)
HTML CSS JS Conclusion
Company name in your title...NOT!
Instead of
<head>< t i t l e> Uppsa la Danscente r − our i n s t r u c t o r s </ t i t l e>
</head>
better with
<head>< t i t l e> Our i n s t r u c t o r s − Uppsa la Danscente r </ t i t l e>
</head>
29 WebConst’09 | Website Construction (SEO, Progressive Enhancement)
HTML CSS JS Conclusion
Favor headlines
Instead of
<head>< s t y l e t ype=" t e x t / c s s ">
<!−−p . heade r { f on t−s i z e : 2em ; c o l o r : b l u e ; margin : . . . }
−−></ s t y l e>
</head><body>
<p c l a s s="heade r "> Summer s a l s a at " S a l t " </p>. . .
better with
<head>< s t y l e t ype=" t e x t / c s s ">
<!−−h1 { f on t−s i z e : 2em ; c o l o r : b l u e ; margin : . . . }
−−></ s t y l e>
</head><body>
<h1> Summer s a l s a at " S a l t " </h1>. . .
30 WebConst’09 | Website Construction (SEO, Progressive Enhancement)
HTML CSS JS Conclusion
Watch out for anchor links
Instead of
For more i n f o rma t i o n about our s a l s a i n s t r u c t o r s<a h r e f="/ i n s t r u c t o r s / s a l s a . html ">c l i c k he r e</a>.
better with
More i n f o rma t i o n about our<a h r e f="/ i n s t r u c t o r s / s a l s a . html ">s a l s a i n s t r u c t o r s</a>.
31 WebConst’09 | Website Construction (SEO, Progressive Enhancement)
HTML CSS JS Conclusion
Search-friendly URL
Instead of
More i n f o rma t i o n about our<a h r e f=" index . html ?p=132&vc=xy45">s a l s a i n s t r u c t o r s</a>.
better with
More i n f o rma t i o n about our<a h r e f="/ i n s t r u c t o r s / s a l s a . html ">s a l s a i n s t r u c t o r s</a>.
32 WebConst’09 | Website Construction (SEO, Progressive Enhancement)
HTML CSS JS Conclusion
Cool URIs
Instead of
http://wwww.example.com/index.php?cat=53
better with
http://wwww.example.com/index.php?query=salsa+courses
or even better with
http://wwww.example.com/salsa+courses
33 WebConst’09 | Website Construction (SEO, Progressive Enhancement)
HTML CSS JS Conclusion
Use the nofollow trick
You can concentrate PageRank where you need it most with thenofollow attribute. Created to prevent blog comment spam, thenofollow attribute can be added to links that point to pages to whichyou don’t want to refer PageRank, such as your privacy policy orhelp page. Google can’t differentiate between blog and non-bloglinks and says that this practice is OK. Hammocks.com usesnofollow extensively on its site to concentrate its referred PageRankto flow to only those pages it wants to promote, as shown here:<u l>
< l i c l a s s=" p ip e "><a r e l=" no f o l l ow " h r e f=" . . . ">
Customer S e r v i c e</a></ l i>< l i c l a s s=" p ip e ">
<a r e l=" no f o l l ow " h r e f=" . . . ">Order S t a tu s</a></ l i>
< l i><a r e l=" no f o l l ow " h r e f=" . . . "i d=" ca r t Image ">View Cart</a></ l i>
</ u l>
34 WebConst’09 | Website Construction (SEO, Progressive Enhancement)
HTML CSS JS Conclusion
Work on your inbound links
Use XML newsfeeds such as RSS to automatically syndicateyour content to other sites.Register your feeds at news aggregators.Write great content and create useful tools.Write articles on your most important topics for other sites,and have them link back to your website.Get listed in the major directories in the appropriate category:
• http://dir.yahoo.com• http://www.business.com• http://www.dmoz.org• http://botw.org• http://www.google.com
35 WebConst’09 | Website Construction (SEO, Progressive Enhancement)
HTML CSS JS Conclusion
Google Webmaster Tools
Webmaster Guidelines
36 WebConst’09 | Website Construction (SEO, Progressive Enhancement)
HTML CSS JS Conclusion
Rules of Progressive Enhancement
1 Enrich content with thorough markup2 Test core functionality with HTML only3 Enchance layout with CSS4 Enchance behaviour with JS5 Respect end-user browser preferences6 Don’t create barriers to entry
37 WebConst’09 | Website Construction (SEO, Progressive Enhancement)
HTML CSS JS Conclusion
See the lecture on CSS debugging ad hacking
39 WebConst’09 | Website Construction (SEO, Progressive Enhancement)
HTML CSS JS Conclusion
Rules of Progressive Enhancement
1 Enrich content with thorough markup2 Test core functionality with HTML only3 Enchance layout with CSS4 Enchance behaviour with JS5 Respect end-user browser preferences6 Don’t create barriers to entry
40 WebConst’09 | Website Construction (SEO, Progressive Enhancement)
HTML CSS JS Conclusion
First rule
No Javascript in HTML document
41 WebConst’09 | Website Construction (SEO, Progressive Enhancement)
HTML CSS JS Conclusion
Don’t break the web!
<a h r e f="#"> . . . </a>
<a h r e f=" j a v a s c r i p t : f oo ( ) "> . . . </a>
<a h r e f=" . . . " o n c l i c k=" foo ( ) "> . . . </a>
42 WebConst’09 | Website Construction (SEO, Progressive Enhancement)
HTML CSS JS Conclusion
Don’t break the web! – Example
<a h r e f=" he l p . htm"onclick="helpPopup()"> Help </a>
<a h r e f=" he l p . htm" i d=" h e l p e r "> Help </a>
< s c r i p t type=" t e x t / j a v a s c r i p t ">$( ’ a#he l p e r ’ ) . c l i c k ( helpPopup ) ;
</ s c r i p t>
<script type="text/javascript">var obj = document.getElementByID(“helper");if ( obj ) {
addListener(obj,"click", helpPopup);}
</script>
43 WebConst’09 | Website Construction (SEO, Progressive Enhancement)
HTML CSS JS Conclusion
JS
Never trust that it worksUser might have disabled it
Only to enhanceClient-side form validation is just something nice,
but server-side validation should be the safety net.
Test your codeAnd optimize: JSLint
Example
Let’s build one example
44 WebConst’09 | Website Construction (SEO, Progressive Enhancement)
HTML CSS JS Conclusion
Rules of Unobstrusive JavaScript
No javascript in HTML documentsDon’t depend on (or trust) JSPoke object before using themMind your mannersSupport parallel events
Unobstrusive Javascript
45 WebConst’09 | Website Construction (SEO, Progressive Enhancement)
HTML CSS JS Conclusion
HTML CSS JS
Content Presentation Behaviour
SEO Filters/Hacks UnobstrusiveConditional comments Defensive testing
46 WebConst’09 | Website Construction (SEO, Progressive Enhancement)
HTML CSS JS Conclusion
Professional Frontend Engineering
Watch the complete video
47 WebConst’09 | Website Construction (SEO, Progressive Enhancement)