Lesson 14: Sources and Search Engines

Overview

This lesson gives students a deeper understanding of how search engines work by having them take some time to design their own algorithms for determining the relevance and trustworthiness of a website. A video about how search works will help students see how some of the real world algorithms for searching work. Motivated by the desire to have their website found, students will update their websites to make them easier to find in searching.

Purpose

Students use search engines all the time. They take for granted how hard it is to produce search engine results in seconds. In order to give them a deeper understanding of the algorithms that control modern search, students will develop their own algorithms.

This lesson connects back to Unit 1, which is explicitly called out in the Wrap Up. This a problem that humans and computers solve differently. In fact it a problem that computers solve better than humans, as a human would take too much time to search through huge amounts of data.

Agenda

Warm Up (10 minutes)

Activity 1 (30 minutes)

Activity 2 (30 minutes)

Wrap Up (10 minutes)

Objectives

Students will be able to:

  • Explain how search engines look for relevance and trustworthiness of website when searching
  • Add optimizations to their website to improve its ability to be searched for.

Preparation

Links

For the Teacher

For the Students

Vocabulary

  • Algorithm - A precise sequence of instructions for processes that can be executed by a computer
  • Relevant - closely connected or appropriate to the matter at hand.
  • Search Engine - A program that searches for and identifies items in a database that correspond to keywords or characters specified by the user, used especially for finding particular sites on the World Wide Web.
  • Search Engine Optimization - The process of maximizing the number of visitors to a particular website by ensuring that the site appears high on the list of results returned by a search engine.
  • Search Engine Optimizer - A tool that analyzes a website on different qualities that lead to a higher rank on different search engines.
  • Trustworthy - able to be relied on as honest or truthful.

Introduced Code

Support

Report a Bug

Teaching Guide

Warm Up (10 minutes)

Internet Scavenger Hunt

Goal: Students get a shared experience with searching online.

Group: Partner up students.

Teaching Tip

If your students don't have a lot of experience using an online search engine you might want to do a quick search engine basics overview.

Distribute: Each group will need a copy of Internet Scavenger Hunt - Activity Guide

Circulate: Circulate the room to ensure that both members of pairings are actively engaged in the activity.

Prompt:

  • Which things were hardest to find?
  • Which were easiest to find?
  • What strategies did you use to find things online?

Discuss: Student pairs share out what they were able to discover about the scavenger hunt and what strategies worked well for finding information.

Activity 1 (30 minutes)

Unplugged: Search Engine Design

Goal: Students look at how search works and how that relates to sources that can and cannot be trusted.

Distribute: One copy of Search Engine Design - Activity Guide to each student.

Group: Put students in pairs.

Set Up: Each pair will need at least one computer.

Remarks

When you search for something online, you want something that is both relevant and trustworthy. How do search engines determine if something is relevant and trustworthy? Today you are going to try to develop an algorithm a computer could use to determine if something is relevant for a particular search and trustworthy enough for a user to use.

Design Search Engine Algorithm

Review: Relevant, Trustworthy and Algorithm

Students will work in pairs to develop their own algorithm to search for relevant and trustworthy sources. The worksheet takes them through the different steps listed below. The major learning moments here are when the students are developing algorithms. Each algorithm should be a set of steps which include concrete things that can be looked at on a website. To help facilitate this learning it would be good to have students stop and discuss the algorithms they come up with as a class along the way.

Set Up
Before starting this activity you will need to use Search Engine Design - Teacher Guide to determine which sites students will look at during this activity. The set of websites will be used by students to explore trustworthiness and relevance to different searches. As the teacher you will pick the set of websites and provide it to your students to use.

To start off, ask students to complete the first two steps on the Search Engine Design - Activity Guide:

  • Students look at the list of websites to determine their relevance to particular searches
  • Students try to come up with an algorithm for determining relevance

Discussion Goal

If students used a system that could not be implemented by a computer looking at the HTML and CSS of website, remind them they are developing an algorithm for a computer.

Algorithm for Relevance could include:

  • Look for the words in the search in the title
  • Look for the words in the search in the content of the website
  • Look for pictures with alt descriptions that match the other words

Discuss: Have groups share their algorithms for determining relevance. Create a list of the things students identified as way of looking at relevance.

Once you have finished discussing, have students return and work on the next two steps:

  • Students think about which websites they might rank as more relevant
  • Students try to determine an algorithm for ranking relevant websites

Discussion Goal

The algorithm for ranking should reference the one for determining relevance and put more weight on certain things. Could include:

  • The number of words from the search that are in the website
  • The number of times the words from the search are in the website
  • Words appearing in the title versus the content of the website

Discuss: Have groups share their algorithm for ranking. Create a list of the things students identified.

Finally, have students return to work on the last two steps:

  • Students look at the list of websites to determine their trustworthiness
  • Students design an algorithm for deciding if a website is trustworthy

Discussion Goal

The algorithm for determining trustworthiness is hard to determine. Humans do a lot of this by looking at style and brand name. Computers can't look at those elements as easily. The students' lists could include:

  • Does the site have an About Us page
  • Does the site use comments in their page
  • Does the site have all the key validator pieces
  • Does the site have a last edited date
  • Look at the URL for the site what does it end in? .edu .org .gov and other harder to come by endings
  • Links to other sources that are trustworthy

Discuss: Have students share their algorithms for determining trustworthiness.

Prompt: How do you think search engines actually determine which websites you are looking for when you search?

Activity 2 (30 minutes)

Search Engine Optimization

Remarks

Different search engines use different algorithms to determine which websites will be most relevant and trustworthy for a particular search. Places like Google work hard to keep their actual algorithms secret because search engines compete for business. However, there are tools called "Search Engine Optimizers" that help web developers analyze how their website will generally be viewed by search engines. Let's try out Search Engine Optimizers for the websites we just looked at.

Transition: Have students transition to Code Studio.

Set Up: Students will be continuing to use their website list from earlier in class and their rankings of those websites. Make sure they still have those materials available as they head onto Code Studio. They will run those same websites through the Search Engine Optimizer(SEO) linked in Code Studio and compare the relative scores from the SEO with the rankings they created.

Wrap Up (10 minutes)

Update HTML Elements List

Set Up: Have students take out their Web Development Practices - Project Guide.

Have students update their HTML Elements table on page 2 of their Web Development Practices - Project Guide packet with the image element.

Journal: Human versus Computer Searching

Discussion Goal

What can you do that a computer can't?

  • Look at the overall style of a page and see how nice it looks

What can computers do that you can't?

  • Keep track of huge numbers of pages
  • Process information on those pages quickly

Setup: Students take our their journals.

Prompt: In Unit 1, we looked at the differences between how computers solve problems and how humans solve problems. What are the differences between the way search engines work and how humans search for resources?

View on Code Studio

The Internet - Web Development: Lesson 14 - Sources and Search Engines

Background

This lesson gives students a deeper understanding of how search engines work by having them take some time to design their own algorithms for determining the relevance and trustworthiness of a website. A video about how search works will help students see how some of the real world algorithms for searching work. Motivated by the desire to have their website found, students will update their websites to make them easier to find in searching.

Vocabulary

  • Algorithm - A precise sequence of instructions for processes that can be executed by a computer.
  • Relevant - closely connected or appropriate to the matter at hand.
  • Search Engine - A program that searches for and identifies items in a database that correspond to keywords or characters specified by the user, used especially for finding particular sites on the World Wide Web.
  • Search Engine Optimization - The process of maximizing the number of visitors to a particular website by ensuring that the site appears high on the list of results returned by a search engine.
  • Search Engine Optimizer - A tool that analyzes a website on different qualities that lead to a higher rank on different search engines.
  • Trustworthy - able to be relied on as honest or truthful.

New Blocks

Resources

View on Code Studio

Search Engine Optimizer (SEO)

Search Engine Optimization is the process of maximizing the number of visitors to a particular website by ensuring that the site appears high on the list of results returned by a search engine. A Search Engine Optimizer is a tool that analyzes a website on different qualities that lead to a higher rank on different search engines.

Do This

  • Open the SEO tool linked below in another tab
  • Try each of the websites on your list on the SEO:
    • Look at the score each website receives
    • Does your ranking generally correlate to the SEO scores?
  • Take a look at how the SEO is rating websites:
    • Look through the different sections of the rating
    • What factors does the SEO use to score websites?
    • Are there new factors you could use in your algorithm that you had not thought of before?
View on Code Studio

Video: How do Search Engines work?

Video: Have students watch the video about How Search Works on Google individually or as a class.

View on Code Studio

How Search Works

View on Code Studio

Student Instructions

Personal Website: Search Engine Optimization

You are going to update your website to optimize for finding it on a search engine. It is important to know that your website it might not be easy to find on a search engine. This might be partially a result of improvements you could make to your website. However since your website is hosted by Code.org and does not have a descriptive URL it might be harder to find.

Do This

  • Run your website through the SEO
  • Write down the issues it highlights with your website
  • We will learn how to fix some of those issues in the next couple levels however some may be things you want to investigate on your own later such as Social Media presence.
View on Code Studio

Student Instructions

Search Engine Optimization: Title

One piece of metadata that should be included in every web page you create is the website title. Although you may put an

element on your page content with the title of your website, the computer does not necessarily know that is the title as there may be multiple

tags on your page. To make clear to the computer what the title is the element is added as metadata in the element. Every page on your website needs it own title.

Example:

<head>
    <title> My Website Title</title>
</head>

This element is not displayed anywhere on the page but the browser may use it to put a name in the tab of your web browser or display it when someone searches for your website. In fact titles are very important to search engines because titles are often a primary piece of information looked at by users to decide which websites fulfill their needs.

Sometimes search engines will still generate their own title for your page based on the user search and what the algorithm of the search engine thinks is best for supporting what the user is looking for.

Guidelines for Creating Good Titles

Since titles are so important you will want to make sure you have good titles for all the pages of your website. Here are a couple practices for making good titles.

Make your title: Descriptive: Make sure your title explains what someone will find on that page. Concise: Keep your title short. 5 words or less. * Individual: Don't use the same title for multiple pages.

Do This

  • Add a element to each web page on your website
View on Code Studio

Student Instructions

Search Engine Optimization: Description

Another important piece of meta data used by search engines is the description. The description is added using the element. It has two attributes, the name and the content. The content is where the actual description goes. Every page should have its own description.

<head> 
    <meta name="description" content="Your meta description goes here " />
</head>

Just like the title tag this will not show up physically on the page but will be used by search engines to display information about your page. Sometimes the description will also be used when you share the link on social media platforms.

Just like titles the search engine might decide it knows best and generate a description for the page that is different than the one you provided.

What goes in a description?

A good description will follow these guidelines:

  • Descriptive: Unique description of what someone will find on this page
  • Keywords: Uses keywords in full sentence descriptions which someone might use to search for your page
  • Short: Less than 150 characters
  • Avoid Special Characters: Don't use special characters such as ‘”<>{}
  • Enticing: It makes someone want to look at your web page.

Do This

  • Add descriptions to each web page on your website using the tag
  • Test it out!
    • Open SEO
    • Re-load the results for your page to use the most updated version
    • Under the section there is a preview of the Google Search results.

Remember that the search engine might still decide to use something else as your description. It is not a big deal and it is still important to have a description.

View on Code Studio

Student Instructions

Search Engine Optimization: Viewport

Your website can be used on many different devices. Those devices have different screen sizes. Viewport tells the browser how to load your website depending on the size of the browser. To get the browser to display your web page at the width of the device you can use the element with the attributes below. The element should go inside the element with all the other meta data.

<meta name="viewport" content="width=device-width, initial-scale=1">

Do This

  • Set the viewport of your website using the above code.
View on Code Studio

Student Instructions

Search Engine Optimization: Final

In the past levels you added metadata to your website to improve your search engine optimization. Go back to your list of issues the Search Engine Optimizer identified and see if there are any others you can solve.

Do This

  • Check to make sure you have completed the checklist below
  • Continue to optimize your site for better search engine results
  • Take a screenshot of your home page and save it somewhere on your computer so you can find it later (Need help with how to screenshot? Check out this website .)

Checklist

  • Every web page has metadata for title, description and viewport to improve search engine optimization.

Standards Alignment

View full course alignment