Tài liệu Professional Web Design: Techniques and Templates- P11 doc

The great thing about this service is that Google will verify if the file is written and uploaded correctly.Case Studies This section examines three case studies in which the techniques

Trang 1

upload a sitemap The great thing about this service is that Google will verify if the file is written and uploaded correctly.

Case Studies

This section examines three case studies in which the techniques in this chapter were used to increase each site’s search engine results Each site is unique in its coding and SEO history, things learned from the SEO efforts, and the results achieved.

Figure 17.16

Example of an XML sitemap

Trang 2

Case Study 1—A5design.com

This case study was conducted for a5design.com (see Figure 17.17) It was

optimized for Web design, which is a very competitive field Over the years, the

site has had a lot of SEO work done to it, and it has a decent number of sites

linking to it For the past couple years, however, the site had all meta data

removed, so it has been floating dead in the water, relying solely on past SEO

standings The SEO work was done in conjunction with a redesign.

Optimization Changes Made to Site

Following is a list of SEO changes that were made to the site—each of which is

mentioned previously in this chapter:

■ Keyword and phrases researched and rewritten

■ Keywords in close proximity to the start of the title tag

Figure 17.17

The case study site for this section: a5design.com

Trang 3

■ Keyword-filled links

■ XML sitemap added

■ Links tweaked to include keywords

■ Use of<h>tags on pages other than homepage

■ Keywords added to filenames

■ ‘‘Alt’’ and ‘‘title’’ properties used

Optimized Code

Following is the code for the homepage Anything that was created with SEO in mind has been bolded, which makes it easy to scan and see many of the tips and techniques employed in this chapter.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" transitional.dtd">

</head>

Trang 4

<div id="web-design-portfolio-text"><a href="http://www.a5design.com/

fort-collins-web-sites.cfm" class="a5link1"><span

class="color-1-text-22">View our</span><div style="margin:-3px 0px 0px 0px;">web designs

<em>portfolio</em></a></div></div>

<div id="web-design-portfolio"><a href="http://www.a5design.com/

fort-collins-web-sites.cfm"><img src="http://www.a5design.com/images/

web-design-portfolio.jpg" width="494" height="73" alt="Loveland website

designer" title="Loveland website designer" border="0" /></a></div>

<div id="web-design-logo-title"><a href="http://www.a5design.com/

index.cfm"><img src="http://www.a5design.com/images/web-design-header.jpg"

width="1000" height="121"alt="Fort Collins website design" title="Fort Collins

website design" border="0" /></a></div>

<div id="web-design-date">March 24, 2010</div>

</div>

<div id="professional-web-design"><a href="http://www.a5design.com/

web-design-books.cfm"><img src="http://www.a5design.com/images/

professional-web-design.png" width="103" height="128" alt="website design

book" title="website design book" border="0" /></a></div>

<div id="advanced-professional-web-design"><a sign.com/web-design-books.cfm"><img src="http://www.a5design.com/images/

href="http://www.a5de-advanced-professional-web-design.png" width="103" height="128" alt="website

designer book" title="website designer book" border="0" /></a></div>

<div id="fort-collins-books">our books</div>

<div id="fort-collins-books-shadow">our books</div>

<div id="web-design-books-text">Learn more about how A5design approachesweb design with our<a href="http://www.a5design.com/web-design-books

cfm"><strong>Web design books</strong></a>, written by A5design owner Clint

Eccher.<br /><br />Look for the 4th edition of the best selling,

inter-nationally-published "Professional Web Design: Techniques and Templates" coming

Trang 5

</a> that is reasonably priced and has a long shelf life we offer both <em>

<a href="http://www.a5design.com/fort-collins-web-sites.cfm" link3"><span class="color-4-text-12">custom web designs</span></a> and

<a href="http://www.a5design.com/web-design-template.cfm"

class="a5-link3"><span class="color-4-text-12">template web designs</span></a>,

</em> depending on a client's design goals and budget we not only work locally in

<em>fort collins, colorado,</em> and <em>northern colorado,</em> but we also

do<em><span class="color-4-text-12"><a href="http://www.a5design.com/fort-collins-web-design-services.cfm" class="a5link3">web design work</a>

</em></span> throughout the united states and internationally.</div>

if (AC_FL_RunContent == 0) {alert("This page requires AC_RunActiveContent.js.");

} else {AC_FL_RunContent(

’codebase’, ’http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0’,

Trang 6

’salign’, ’’

); //end AC code}

<param name="movie" value="web-design-fort-collins.swf" /><paramname="quality" value="high" /><param name="wmode" value="opaque" /><param

name="bgcolor" value="#ffffff " /> <embed src="web-design-fort-collins.swf"

quality="high" wmode="opaque" bgcolor="#ffffff " width="626" height="352"

name="web-design-fort-collins" align="middle" allowScriptAccess="sameDomain"

allowFullScreen="false" type="application/x-shockwave-flash"

pluginspa-ge="http://www.macromedia.com/go/getflashplayer" />

</object>

</noscript>

</div>

<div id="web-site-video-text">   <a href="http://www

a5design.com/fort-collins-web-designers.cfm" class="a5link2">Is your

<strong>web site</strong> just this <span class="color-1-text-38">BORING</

span> or does it<div style="margin:-10px 0px 0px 0px;">   <

span class="color-6-text-30"><strong>engage</span></strong></div><div

style="margin:0px 0px 0px 0px;">       

and</div><div style="margin:-10px 0px 0px 0px;">   <span

class="color-6-text-30"><strong>convert?</span></strong></a></

div></div>

<div id="web-site-video-text-shadow">   Is your

<strong>web site</strong> just this <span class="color-3-text-38">BORING</

span> or does it<div style="margin:-10px 0px 0px 0px;">   <

span class="color-3-text-30"><strong>engage</span></strong></div><div

style="margin:0px 0px 0px 0px;">       

and</div><div style="margin:-10px 0px 0px 0px;">   <span

class="color-1-text-30"><strong>convert?</span></strong></a></

div></div>

<div id="add-web-design-templates"><span style="float:left;margin:

-1px 0px 0px 0px;padding:0px 10px 0px 10px;"><img src="http://www.a5design

com/images/icon-add-web-designs.jpg" width="19" height="19" alt="add website

design templates" title="add website design templates" /></span>

Trang 7

<a href="http://www.a5design.com/add-web-design-templates.cfm" link1"><strong>add Web Design templates</strong></a> from our <a

href="http://www.a5design.com/fort-collins-web-design-<!- -[if IE 7]>href="http://www.a5design.com/fort-collins-web-design-<!- -></a>href="http://www.a5design.com/fort-collins-web-design-<!- -<![endif]- ->

<!- -[if lte IE 6]><table><tr><td><![endif]- ->

<li class="dropdown"><a web-sites.cfm" style="width:160px;margin:0px 0px 0px 0px;padding:0px 0px 0px10px;<!- - - width:250px;text-align:left; - - ->">web sites

href="http://www.a5design.com/fort-collins-</a>

</li>

<li class="dropdown"><a logos.cfm" style="width:160px;margin:0px 0px 0px 0px;padding:0px 0px 0px10px;<!- - - width:250px;text-align:left; - - ->">logos

<!- -[if IE 7]><!- -></a><!- -<![endif]- ->

<!- - [if lte IE 6]><table><tr><td><![endif]- - >

<li class="dropdown"><a design.cfm" style="width:160px;margin:0px 0px 0px 0px;padding:0px 0px 0px10px;<!- - - width:250px;text-align:left; - - ->">custom design

Trang 8

<!- -[if IE 7]><!- -></a><!- -<![endif]- ->

<!- -[if lte IE 6]></td></tr></table></a><![endif]- ->

<li><a href="http://www.a5design.com/web-design-books.cfm">web designbooks

<!- -[if IE 7]><!- -></a><!- -<![endif]- ->

Trang 9

<li class="dropdown"><a template.cfm" style="width:160px;margin:0px 0px 0px 0px;padding:0px 0px 0px10px;<!- - - width:250px;text-align:left; - - ->">web design templates

href="http://www.a5design.com/web-design-</a>

</li>

<li class="dropdown"><a templates.cfm" style="width:160px;margin:0px 0px 0px 0px;padding:0px 0px 0px10px;<!- - width:250px;text-align:left; - ->">add design templates

Trang 10

Keywords: Fort Collins Web Designer

Date Results Were Recorded: November 24

Yahoo: Not indexed in first 10 pages

Bing: Not indexed in first 10 pages

Date Results Were Recorded: December 22

Date Results Were Recorded: January 4

Yahoo: Indexed on page 9, listing 3

Keywords: Fort Collins Web Design

Case Study 2—Onepartart.com

This case study was conducted for onepartart.com (see Figure 17.18) It was

optimized for the science illustration field, which is not highly competitive,

especially at a local level in Northern Colorado Originally designed and

opti-mized more than 10 years ago, the site employs older coding methods, which

makes the code much longer than it needs to be The old SEO work was not very

thorough, so it was removed and replaced with newer code.

Trang 11

Following is a list of SEO changes that were made to the site—each of which is mentioned previously in this chapter:

■ Keyword and phrases researched and rewritten

■ Page title changed

■ Images renamed

■ Homepage copy rewritten

■ Spacer.gif image renamed

Optimized Code

Following is the code for the homepage Anything that was created with SEO in mind has been bolded, which makes it easy to scan and see many of the tips and techniques employed in this chapter.

Figure 17.18

The case study site for this section: onepartart.com.Copyright† 2010 Onepartart.com Used withpermission

Trang 12

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

illustra-fort collins, northern colorado, denver, greeley, loveland">

services provided by Onepartart">

</head>

<!- - Hide script from old browsers

if (document.images) {

bullet_on = new Image

bullet_off = new Image

bullet_on.src = "images/bullet_on.gif "

bullet_off.src = "images/technical_illustrator_spacer.gif "

email_on = new Image

email_off = new Image

email_on.src = "images/email_on.gif "

email_off.src = "images/email.gif "

contact_on = new Image

contact_off = new Image

Trang 13

width="210" height="60" alt="" border="0"></td>

Trang 14

<td valign="top"><img src="images/technical_illustrator_spacer.

gif " name="home" width="14" height="10"alt="technical illustrator home"

title="technical illustrator home" border="0"></td>

</tr>

<tr>

<td align="right"><img src="images/spacer_black.gif" width="35"

height="1" alt="" border="0"></td>

gif " name="about" width="14" height="10"alt="techical illustrator about"

title="techical illustrator about" border="0"></td>

</tr>

<tr>

gif " name="portraits" width="14" height="10"alt="techical illustrator

portraits" title="techical illustrator portraits" border="0"></td>

</tr>

<tr>

<td><img src="images/technical_illustrator_spacer.gif"

width="1" height="1" alt="" border="0"></td>

</tr>

<tr>

Trang 15

<td class="green9" align="right" valign="top"><a href="science.htm" onMouseOver="document.science.src=bullet_on.src;"

onMouseOut="document.science.src=bullet_off.src" style="text-decoration:none; color: #434C06"><b>SCIENCE ILLUSTRATIONS</b></a></td>

style="text-decora-<td valign="top"><img src="images/technical_illustrator_spacer.gif " name="illustrations" width="14" height="10"alt="techical illustratorillustrations" title="techical illustrator illustrations" border="0"></td>

border="0"></td>

Trang 16

<tr>

width="144" height="30"alt="The Technical Illustration and Scientific

tration Professionals" title="The Technical Illustration and Scientific

Illus-tration Professionals" border="0"></td>

width="14" height="1"alt="The Technical Illustration and Scientific

tion Professionals" title="The Technical Illustration and Scientific

Illustra-tion Professionals" border="0"></td>

src="images/technical_illus-trator" title="Fort Collins Technical Illussrc="images/technical_illus-trator"

border="0"></td>

width="1" height="14"alt="Fort Collins Technical Illustrator" title="Fort

Collins Technical Illustrator" border="0"></td>

<td rowspan="50"><img trator_spacer.gif " width="20" height="1" alt="Fort Collins Technical Illus-

src="images/technical_illus-trator" title="Fort Collins Technical Illussrc="images/technical_illus-trator"

border="0"></td>

</tr>

<tr>

<td><img src="images/denver_technical_illustration

gif " width="86" height="76"alt="Fort Collins Technical Illustrator"

title="Fort Collins Technical Illustrator" border="0"></td>

Trang 17

</tr>

<tr>

src="images/technical_illus-</tr>

<tr>

</tr>

<tr>

src="images/technical_illus-</tr>

<tr>

</tr>

<tr>

Trang 18

il-provided by<strong>technical illustrator Lori Discoe</strong> We encourage

you to take a look at some of our work.<a href="classes.htm">View Our Classes</

a></td>

src="images/technical_illus-title="Greeley Technical Illustrator" border="0"></td>

<td id="blankbg"><img trator_spacer.gif " width="210" height="1"alt="Greeley Technical Illustrator"

src="images/technical_illus-title="Greeley Technical Illustrator" border="0"></td>

Trang 19

<td><a href="mailto:info@onepartart.com?subject=E-mail from Web site"onMouseOver="document.email.src=email_on.src;"

onMouseOut="document.email.src=email_off.src" style="text-decoration: none;color: #434C06"><img src="images/email.gif" name="email" width="206"

height="58" alt="" border="0"></a></td>

<td><img src="images/technical_illustrator_spacer.gif" width="1"

</tr>

<tr>

a5design.com" style="text-decoration: none">A5design</a></td>

Trang 20

Keywords: Fort Collins Scientific illustration

Google: Not indexed in first 10 pages

Keywords: Technical illustration

Keywords: Fort Collins Technical illustrator

Trang 21

Keywords: Denver Technical illustrator

Case Study 3—Apricotpetal.com

This case study was conducted for apricotpetal.com (see Figure 17.19) It was optimized for the hair stylist field, which is competitive, especially at a local level

in Fort Collins, Colorado While the coding and SEO employed the latest

Figure 17.19

The case study site for this section: apricotpetal.com.Copyright† 2010 Apricotpetal.com Used withpermission

Trang 22

techniques, the site had not been listed in search engines, which always makes it

more difficult to be indexed.

Following is a list of SEO changes that were made to the site—each of which is

mentioned previously in this chapter:

■ Keyword and phrases researched and written

■ Links tweaked to include keywords and phrases

■ Use of<h>tags on pages other than homepage

■ File names had keywords added to them

Optimized Code

Following is the code for the homepage Anything that was created with SEO in

mind has been bolded, which makes it easy to scan and see many of the tips and

techniques employed in this chapter.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"DTD/xhtml1-transitional.dtd">

<head><title>Fort Collins Hair Salon - Apricot Petal</title>

in Redken Products - Apricot Petal Salon" />

salons, hair salon, fort collins, Redken, christian higgins, charles young, the

studio" />

</head>

<body>

Trang 23

<div id="hair-salon">We are a Redken salon, providing hair salon services

in Fort Collins Give us a chance to design you a hair style that will enhance yournatural beauty We are a hair salon with experience in all hair types from natu-rally curly to European straight.</div>

<div id="fort-collins-hair-salon"><a href="index.cfm"><img src=

"images/spacer.gif " width="320" height="230" border="0" alt="" /></a></div>

<div id="a5-menu-item-2"><a href="about.cfm"><span text-11">about</span></a></div>

<div id="a5-menu-item-3"><a href="services.cfm"><span text-11">services</span></a></div>

<div id="a5-menu-item-4"><a href="specials.cfm"><span text-11">charles<br />young<br />donations</span></a></div>

<div id="a5-menu-item-5"><a href="contact.cfm"><span text-11">contact</span></a></div>

class="color-1-<div id="hair-salons-fort-collins" style="height:600px;">

<div id="hair-salon-fort-collins" class="color-1-text-11"><spanstyle="float:left;padding:0px 10px 0px 0px;"><img src="images/fort-collins-hair-salon.png" width="35" height="31" alt="" /></span><span style="color:

#e8c81d;">Call</span> or <span style="color:#86c340;">Text</span> for pointments:<span style="color:#ea4b25;">970</span>.<span style="color:

ap-#ea4b25;">443</span>.<span style="color:#ea4b25;">7939</span></div>

</div>

<div id="a5-footer">4243 Saddle Notch Dr  <img star.gif " width="7" height="7" alt="" />  Fort Collins CO 80526  <imgsrc="images/bullet-star.gif " width="7" height="7" alt="" />  phone:970.443.7939  <img src="images/bullet-star.gif" width="7" height="7"alt="" />  † copyright 1993-2010  <img src="images/bullet-star.gif"width="7" height="7" alt="" />  Web design by <a href="http://www.a5de-sign.com" style="text-decoration: none;color:#ecc426;">A5design</a>

Trang 24

var pageTracker = _gat._getTracker("UA-9952197-1");

This page’s SEO results were followed over three months Google, Yahoo, and

Bing were the search engines followed.

Keywords: Fort Collins Hair Salon

Google: About page 7 listing 4

Google: Page 4, listing 7

Date Results Were Recorded: March 24

Summary

SEO hasn’t changed much over the years The same basic things a designer

should do to optimize a site now are what was recommended years ago Some of

Trang 25

the tips and techniques discussed in this chapter include researching keywords, writing strong title tags, developing meta keywords and meta descriptions, using

<h1>to<h6> tags, and employing ‘‘alt’’ and ‘‘title’’ properties in images While this chapter doesn’t replace the efforts a professional SEO expert or motivated, persistent designer could accomplish over a period of time, it does provide a strong initial SEO foundation of a site.

Tiêu đề	Search Engine Optimization (SEO) Case Studies
Trường học	University of Technology
Chuyên ngành	Web Design
Thể loại	Study guide
Năm xuất bản	2010
Thành phố	Unknown

Định dạng
Số trang	50
Dung lượng	4,12 MB