Website Construction - SEO, Progressive Enhancement€¦ · WebsiteConstruction SEO, Progressive...

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)


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



Markup

Enhance content with meaning



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



Why does it matter?

Source: HitWise.com


http://www.hitwise.com/datacenter/main/dashboard-10133.html


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)

http://research.microsoft.com/en-us/um/people/cutrell/CHI2007-What%20are%20you%20looking%20for-CutrellGuan.pdf



Why does it matter?

Source: Cutrell & Guan (2007): What are you looking for? An eye-tracking study of information usage

in Web Search





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



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>



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>



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>



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>



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



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>



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>



Find the appropriate elementCreate a useful DOM structure



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>



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



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>



Search Engine Optimization

Deploy keyword strategicallyCoherent information across the siteOptimize key contentOptimize on-site linksMake it linkworthyAcquire inbound links



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>



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



Optimize key content

Search-Engines favormeta descriptions (alt , title , src, summary, abbr),title tagsand headlines.



Choose your keywords length



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>



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



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



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



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


http://www.w3.org/TR/cooluris/


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>



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


http://dir.yahoo.com

http://www.business.com

http://www.dmoz.org

http://botw.org

http://www.google.com/addurl/


Google Webmaster Tools

Webmaster Guidelines


http://www.google.com/support/webmasters/bin/answer.py?answer=35769


See the lecture on CSS debugging ad hacking


http://www.it.uu.se/edu/course/homepage/websiteconst/st09/lectures/handout-06.pdf


First rule

No Javascript in HTML document



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>



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>



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


http://www.jslint.com

http://jqueryfordesigners.com/demo/radio1.html

http://www.it.uu.se/edu/course/homepage/websiteconst/st09/demos/lecture06


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


http://onlinetools.org/articles/unobtrusivejavascript/


HTML CSS JS

Content Presentation Behaviour

SEO Filters/Hacks UnobstrusiveConditional comments Defensive testing



Professional Frontend Engineering

Watch the complete video


http://video.yahoo.com/watch/4671445/12486762

Website Construction - SEO, Progressive Enhancement€¦ · WebsiteConstruction SEO, Progressive...

Documents

Transcript of Website Construction - SEO, Progressive Enhancement€¦ · WebsiteConstruction SEO, Progressive...