Lesson 106 23 aug13-1430-ay

23
Unit 1: Web Fundamentals Lesson 6: Search Engine Optimization August 21, 2013

Transcript of Lesson 106 23 aug13-1430-ay

Page 1: Lesson 106 23 aug13-1430-ay

Unit 1: Web FundamentalsLesson 6: Search Engine Optimization

August 21, 2013

Page 2: Lesson 106 23 aug13-1430-ay

2

Lesson 6: Search Engine Optimization

Introduction to HTML

Learning to Use HTML

HTML and Email

History and Future of the

Web

HTML and Forms

Search Engine

Optimization

Learning to Use CSS

Introduction to CSS

Reusing Code

3 Ways to Use CSS

Separation of Concerns

Launching Your Own Website

Lesson 1 Lesson 2 Lesson 3 Lesson 4

Lesson 8 Lesson 7 Lesson 6 Lesson 5

Lesson 9 Lesson 10 Lesson 11 Lesson 12

Build understanding Develop skills

Page 3: Lesson 106 23 aug13-1430-ay

Recap from last time (I)

3

• HTML is important not just for receiving information, but also for sending data to a server

• Forms allow us to actively engage with the internet, both sending and receiving information as we browse websites

Amazon server

Amazon database

Page 4: Lesson 106 23 aug13-1430-ay

Recap from last time (II)

4

• There are many different types of forms – these allow for many features such as account login and search bars

• User information is stored in databases, which are similar to filing cabinets with a different file for each user

Google search Gmail sign-in

Page 5: Lesson 106 23 aug13-1430-ay

How to attract visitors to your website?

5

• We’ve already looked at how to view, interact with, and send data to websites

• But if you’ve built a website of your own, how do you get people to actually visit your page?

Not very effective…

Page 6: Lesson 106 23 aug13-1430-ay

One of the best ways is to show up in search results

6

• Search engines such as Google and Yahoo want to show the most relevant websites to their users

• If a user searches ‘lawn chairs’, they should expect to see results for:

Companies selling patio furniture

Pictures of lounge chairs

But not a TSwift music video!

Page 7: Lesson 106 23 aug13-1430-ay

Meta tags

7

• To help Google decide what a website is about, they look at meta tags, which are words that describe the content on your site

• Meta tags can be used to tell what language a page is written in, who authored the page, or even the location of the business or site owner

Page 8: Lesson 106 23 aug13-1430-ay

A few examples of meta tags

8

Type of meta tag Example

Locations served by a business

Type of content

Keywords describing the page

Page 9: Lesson 106 23 aug13-1430-ay

Where to find meta tags? (I)

9

1. Go to the Apple homepage at www.apple.com

Page 10: Lesson 106 23 aug13-1430-ay

Where to find meta tags? (II)

10

2. Right click on an empty region (make sure your cursor looks like and not ). Click ‘View Page Source’ to view the HTML.

Click here

Page 11: Lesson 106 23 aug13-1430-ay

Where to find meta tags? (III)

11

3. Now you should be able to see the HTML of the page. The meta tags are located near the top of the page.

Let’s take a closer look…

Page 12: Lesson 106 23 aug13-1430-ay

Where to find meta tags? (IV)

12

4. You should see the meta tags underneath the <head> tag.

<head> tag

Meta tags

Page 13: Lesson 106 23 aug13-1430-ay

Where to find meta tags? (V)

13

5. Without knowing too much about meta tags, we can already guess what some of these mean:

A short description of Apple and the page are about

The author of the page is “Apple Inc.”

Page 14: Lesson 106 23 aug13-1430-ay

Which keyword meta tags should I use? (I)

14

What you should do What you should NOT do

Use keywords that describe your website’s content

Choose keywords that are specific to your page

Consider what users will think to search when they want to find you

Page 15: Lesson 106 23 aug13-1430-ay

Which keyword meta tags should I use? (II)

15

What you should do What you should NOT do

Use keywords that describe your website’s content

Choose keywords that are specific to your page

Use keywords that are unrelated to your website

Choose keywords that are too general or vague

Consider what users will think to search when they want to find you

Pick keywords just because they’re popular search terms

We want to make sure the RIGHT users are able to find our website

Page 16: Lesson 106 23 aug13-1430-ay

Exercise: brainstorming keyword meta tags (I)

16

• Suppose you are the owner of the website for Pixar Animation Studios. You need to brainstorm 5 keyword meta tags to use. What would they be?

• Hint: think of words or phrases that describe your page’s content

Page 17: Lesson 106 23 aug13-1430-ay

Exercise: brainstorming keyword meta tags (II)

17

• There are many great keywords you could have used. Below are just a few examples of good and bad keywords

Good keywords Bad keywords

Pixar

Animation

Toy Story

Nemo

Buzz Lightyear

Brown

Hat

Andy Murray

Tesco

Microsoft

Company name

Name of Pixar film

Names of Pixar characters

Woody may be wearing a brown hat, but these words are not specific to Pixar

These keywords aren’t relevant at all

Page 18: Lesson 106 23 aug13-1430-ay

Search engine optimization (I)

18

• In the past, to get to the top of the search results, you just needed to choose the right keyword meta tags

• Now search engines no longer look at meta tags to decide what order to display search results

Page 19: Lesson 106 23 aug13-1430-ay

Search engine optimization (II)

19

• Search engines now use complicated algorithms to determine which websites are most important

• Search engine optimization (SEO) is how website owners improve the rank of their page in search results

One of these algorithms looks at links between pages to decide which pages are most important

Page 20: Lesson 106 23 aug13-1430-ay

Meta tags are still important

20

• Even though meta tags no longer affect a page’s ranking, they are still very important!

• Meta tags will appear in search results to describe your page to potential visitors

• Good meta tags can help attract the right audience to your site!

This is the meta description tag

Page 21: Lesson 106 23 aug13-1430-ay

Summary (I)

21

• Meta tags describe the content on your website and can help you attract the right audience

• Meta tags appear in the <head> section, usually near the top of the HTML code

• Good meta tags are specific and accurately describe the content on your page

Page 22: Lesson 106 23 aug13-1430-ay

Summary (II)

22

• Good search engine optimization (SEO) can help your site get more visitors

• While search engines used to rely on meta tags, they now use complex algorithms to determine how to order search results

One of these algorithms looks at links between pages to decide which pages are most important

Page 23: Lesson 106 23 aug13-1430-ay

23

What to do on your own

1. Go to URL to complete the Codecademy course online

2. Do the practice set on the material learned

3. Take the follow-up quiz to test your understanding

Get ready to learn CSS!!