1

CA 272 - Professional Web Site Development

Class 26 - Search Engine Optimization, Next Steps

and Web Trends

2

Search Engine Optimization

Search engine optimization (SEO):making your Web site appear and rank highly in search engines for search terms that are relevant to your content

interestingly, many accessibility tips also help with SEO

Searchbot is a special needs user — e.g., searchbot cannot ‘see’ graphics

3

Metadata: Page Titles

Meaningful page titles are important for accessibility and search engines

Google displays ~ 65 characters Use different page titles for EACH page Instead of ‘Welcome to Widget World’ …

Widget World - Widget Parts for Commercial and Industrial Grommets’ … or …

Widget World | Industrial - Grommet and Gasket Applications’ (60 chars with spaces)

4

Metadata: Keywords

Keywords used to be considered very important

Laundry list of relevant key phrases for page/site: widgets, grommets, gaskets, commercial parts …

Most search engines ignore now Your Web page content should contain

keywords and phrases Keyword density

5

Metadata: Page Description

Description is important for search engines - Google uses as entry for search listing Should be no more than 250 chars Plain English Work in keywords/phrases Ideally, should be different for each page

Author - good idea to include

6

Exercise: Insert Metadata

In Dreamweaver: Insert > HTML > Head Tags >

Keywords Description Meta - for other metadata, e.g., author:

Attribute: Name Value: author Content: [name of author]

Syntax: <meta name=“” content=“” />

7

Search Indexes vs. Directories

Search index: giant database of Web page that uses ‘spiders’ / ‘robots’ (searchbots) to automatically comb Web and store Web page info (using algorithms) Info from Web pages Google, Yahoo!, MSN

Search directory: manually categorized list of Web pages Info about Web pages Open Directory Project, Yahoo! Directory (pay for inclusion)

8

Popular Search Engines*

Google - 49.2% Yahoo - 23.8% MSN - 9.6% AOL - 6.3% Ask - 2.6% Others - 8.5%

* as of July 2006

Source: NetRatings for SearchEngineWatch.com

9

Important Search Providers

Google, Yahoo!, MSN, Ask, Open Directory Project

ODP - volunteer-run, feeds data to search engines

Other search engines draw data from other indexes (e.g., AOL uses Google data)

10

Search Ranking Criteria

Ultimately: relevance of content and user’s reliance on your information

Does your content contain key phrases that users are searching? Keyword density

Do other sites link to your content PageRank (Google)

Many other criteria (e.g., how long your site has been around)

11

Getting Your Site Listed

Search engines will typically find your site eventually Can submit your site to index

E.g., Google: http://www.google.com/addurl/ Create a Google sitemap Don’t get banned Advertise: Google AdWords, Yahoo Search

Marketing Get others to link to your site Keep generating good content; rework existing

content to improve keyword density, etc. Be patient

12

Google Webmaster Tools

Vital tool if you care about search engine ranking (and Google in particular)

See how Google sees your site: Crawl info - last indexed, any problems Robots.txt validation (instructions for searchbot)

Site performance: Top queries and ranking for various search terms Index inclusion

Upload sitemap (XML format) Specify preferred domain, other options

13

Google Analytics

Great, free tool for tracking visitors to your site How to sign up:

Go to http://www.google.com/analytics/index.html Click ‘Sign Up Now’ Create a Google account (if you need to)

Gmail users already have Google account Follow directions for creating Google Analytics account Add Web Site Profile (site to be tracked) Will need to add special <script> before closing </body>

tag on EVERY page to be tracked Confirm you have added code Google will begin tracking in few minutes after confirming

14

What’s Next?

Register a domain name E.g., GoDaddy.com or Network Solutions

Sign up for cheap Web hosting Learn how to administer a Web site using the

control panel Maintain a personal (or small company) Web

site using DW templates Get comfortable being the go-to Web gal/guy

15

Things to Learn

Advanced XHTML Learn ALL the HTML elements Understand frames & iframes in case you run into them Advanced tables and forms Inserting multimedia

Semantic Web Microformats Structured blogging Other semantic models

HTML 5, XHMTL 2, Xforms - coming soon?

16

Things to Learn

More CSS! More CSS image replacement - including custom

bullets and borders Learn CSS positioning backwards & forwards Get comfortable with advanced selectors Styling tables and forms Complex CSS layouts

Browser bugs - and hacks/filters to fix them Look ahead to CSS 3

17

Things to Learn

XML/XSL RSS/Atom - syndicating content JavaScript/DOM scripting

Unobtrusive JavaScript AJAX - Asynchronous JavaScript and

XMLHttpRequest C++ or another programming language

18

Things to Learn

Server-side programming language PHP - open-source, free, widely used by individuals and

smaller orgs ColdFusion ASP.net - wide corporate use JSP - enterprise-level

Relational database development MS Access (desktop) MySQL, MS SQL Server

SQL query language

19

Things to Learn

Graphic Design Applications: Fireworks, Photoshop, Illustrator Topics:

Fundamentals of design, color, typography Page layout Interface design

Other 3-D modeling Animation and video effects

20

Things to Learn

Flash Designing animations ActionScript programming Inserting multimedia on Web sites Working with external XML data

21

Things to Learn

Content Management Blogging (WordPress, Moveable Type) True CMS systems

Open-source systems like Joomla, Mambo, Drupal, etc. Enterprise CMS systems (if your company has one)

Web application development E-commerce Search engine optimization Accessibility

22

Other Skills to Develop

Communication skills Overall writing skills Web writing Proposal writing Speaking and presentation

Project management Marketing - yourself and company/client Subject area independent of Web

23

Ways to Learn More

MC classes (e.g., ColdFusion, PHP, JavaScript, ASP, graphics apps, database development, etc.)

Books (see site for some recommended titles) Conferences, networking events E-mail lists (e.g., DC Web Women, CSS-Discuss,

ColdFusion Users Group) Building sites for friends/family On-the-job training! Partnerships/internships

24

Web 2.0 Breaking out of traditional ‘Web broadcasting’ model –

content is provided by many content providers (e.g., blogs, social networking sites, wikis, Flickr, etc.) Collaboration/collective intelligence - Wikipedia is

perfect example Folksonomies – user-generated classification systems for

tagging, categorizing content Modularity/mash-ups – combining content from multiple

sources Syndication – RSS Podcasting, YouTube, and other avenues for individuals to

create and post content outside typical Web publishing structure

25

Web 2.0

Web services – allowing Web sites to talk with each other in background (go fetch data autonomously)

Web as platform – Web-based software used through Internet

‘The Long Tail’ – idea that it is now economically viable to serve users in very specialized niche markets instead of lumping customer together into small groups for marketing

26

Web 2.0 Technology

XHTML/CSS, microformats, Semantic Web Unobtrusive JavaScript AJAX Open-source Multiple output formats Web services Blogging and Content Management Web applications

27

Web 2.0 design

Glassy look Reflections – glass floor Bright colors (or conversely, muted color schemes) Gradients Patterns (often subtle, much more sophisticated

than old checkers and stripes) Rounded corners – breaking out of the box Big fonts – custom fonts (e.g., sIFR)

28

Questions?

Float layout CSS nav menus Etc.

29

Homework

Complete a draft of your final project Web site (at least some pages)