Chapter13
- 1. Copyright © Terry Felke-Morris http://terrymorris.net
Web Development & Design
Foundations with HTML5
8th
Edition
CHAPTER 13
KEY CONCEPTS
1
- 2. Copyright © Terry Felke-Morris http://terrymorris.net
Learning Outcomes
In this chapter, you will learn how to:
◦Identify commonly used search engines and search indexes
◦Describe the components of a search engine
◦Design web pages that are friendly to search engines
◦Submit a website for inclusion in a search engine or search directory
◦Monitor a search engine listing
◦Describe other website promotion activities
◦Use the iframe element to create an inline frame
2
- 3. Copyright © Terry Felke-Morris http://terrymorris.net
Popular Search Engines
Market Share Survey Results for a Recent Month:
◦Google 70.8%
◦Bing 9.83%
◦Yahoo! 9.57%
◦Baidu 7.52%
Source:
http://www.netmarketshare.com/search-engine-market-share.aspx?
qprid=4&qpcustomd=0
3
- 4. Copyright © Terry Felke-Morris http://terrymorris.net
Search Index
(aka Search Directory)
Open Directory
http://www.dmoz.org
•A search directory maintains a hierarchical category of
topics and places web site listings into these categories.
•Search either by typing in a search term OR "drilling"
down into the hierarchy for relevant sites.
•Each site is reviewed by an editor before accepted into
a directory
4
- 5. Copyright © Terry Felke-Morris http://terrymorris.net
Search Engine
Components
Popular Search Engines:
◦Google http://www.google.com
◦Bing http://bing.com
Search engines use the following
components:
◦Robot or “spider”
◦Database (also used by search indexes)
◦Search form (also used by search indexes)
5
- 6. Copyright © Terry Felke-Morris http://terrymorris.net
Search Engine Robot
Also called a spider or bot
◦A computer program that follows hyperlinks and “walks” the Web --
accessing and documenting web pages.
◦Categorizes the pages and stores information in a database.
May access the following components of web pages:
◦title
◦meta tag keywords & meta tag description
◦text in headings
◦other text on the page
◦hyperlinks
See http://www.robotstxt.org
6
- 7. Copyright © Terry Felke-Morris http://terrymorris.net
Search Engine
Database
Database:
◦A collection of information organized so that its contents
can easily be accessed, managed, and updated.
Database Management Systems (DBMSs)
◦Configure and manage database
◦Oracle, MySQL, Microsoft SQL Server, IBM DB2
Search Engine Database
◦Contains information about web pages
7
- 8. Copyright © Terry Felke-Morris http://terrymorris.net
Search
Engine
Search Form
The part you are most familiar with!
The search form is the graphical user interface that allows a user to
request a word or phrase to search for.
The visitor to the search engine types words (called keywords)
related to their search into the text box.
When the form is submitted, the data typed into the text box is sent
to server-side processing that searches the database using the
keywords you have entered.
The search results (also called a result set) is a list that contains
information such as the URLs for web pages that meet your criteria.
8
- 9. Copyright © Terry Felke-Morris http://terrymorris.net
Search Engine Results Page
(SERP)
•A list of items that describe web pages matching the search terms.
• Each item contains a link to a page along with additional information
that might include the page title, a brief description, the first few lines
of text, the size of the page, and so on.
•The order the web page items are displayed in the SERP may
depend on:
• paid advertisements
• alphabetical order
• link popularity
•Each search engine has their own policy for ordering the search
results.
9
- 10. Copyright © Terry Felke-Morris http://terrymorris.net
Designing Web Pages for
Promotion
Keywords
◦Terms and phrases that people may use when searching for
your site.
◦Words or phrases that describe your web site or business.
◦Create a list of them
◦Include common misspellings
Description
◦What is special about your web site that would make someone
want to visit?
◦25-30 words -- inviting and interesting
◦Some search engines will display your description in the SERP
10
- 11. Copyright © Terry Felke-Morris http://terrymorris.net
Description meta tag
The meta element
◦ A stand-alone tag
◦ Placed in the head section
◦ Attributes:
name
content
<meta name=“description" content="value">
11
- 12. Copyright © Terry Felke-Morris http://terrymorris.net
Example: Description Meta
Tag
Example: “Acme Design”
<meta name="description" content="Acme Design, a
premier web consulting group that specializes in
E-commerce, website design, website development,
and website re-design.">
12
- 13. Copyright © Terry Felke-Morris http://terrymorris.net
Search Engine Optimization
(SEO)
•Determine keywords
•Page Title
• Include the company and/or website name
• Include selected keywords as approprite
•Heading tags
• Include keywords
•Text on page includes keywords
13
- 14. Copyright © Terry Felke-Morris http://terrymorris.net
Search Engine Optimization
(SEO) 2
Linking
◦ Provide text navigation hyperlinks
◦ Verify that all hyperlinks are functioning
Page Layout
◦ Use CSS for page layout
Images & Multimedia
◦ Configure meaningful alternate text
◦ Be aware that text and hyperlinks contained within
multimedia may not be accessed by search engine robots
14
- 15. Copyright © Terry Felke-Morris http://terrymorris.net
Search Engine Optimization
(SEO) 3
Valid Code
◦Validate HTML
◦Validate CSS
Content of Value
◦Follow Web Design Best Practices
◦Well-organized
◦Meaningful & useful to your target audience
15
- 16. Copyright © Terry Felke-Morris http://terrymorris.net
Listing in a Search Engine
•Wait until your site is finished
•Don’t submit “under construction” Web sites!
•Locate the “Add URL” or “Submit Your Site” page for a
search engine
•Follow the directions and fill out the form
•A robot from the search engine will visit your website and
index it
•Allow several weeks and test the search engine to see if
your site is listed
16
- 17. Copyright © Terry Felke-Morris http://terrymorris.net
Preferential
Placement
Offers vary:
◦ Example: Google’s AdWords
◦ http://www.google.com/adwords
Commonly used acronyms:
◦ CPC – Cost Per Click (PPC – Pay Per Click)
The price you are charged if you have signed up for a paid sponsor or ad program and
a visitor clicks on a link to your Web site.
◦ CPM – Cost Per Impressions
Your cost for every 1000 times that your ad is displayed on a web page (whether or
not the visitor clicks on your ad).
◦ CTR – Click Through Rate
The ratio of the number of times an ad is clicked on to the number of times an ad is
viewed.
For example if your ad was shown 100 times and 20 people clicked on it, your CTR
would be 20/100 or 20%.
17
- 18. Copyright © Terry Felke-Morris http://terrymorris.net
Mapping Your Site
HTML Site Map Web page
◦Used by visitors and accessed by search engines.
◦Example: http://webdevbasics.net/sitemap.html
XML Sitemap file
◦Accessed only by search engines
◦List of Web pages with URL, last date updated, frequency of update, and
priority indicators
◦See http://google.com/support/webmasters
18
- 19. Copyright © Terry Felke-Morris http://terrymorris.net
Checkpoint
1. Describe the three components of a search
engine.
2. Describe the purpose of the description meta
tag.
3. Is it beneficial for a business to pay for
preferential listing? Explain.
19
- 20. Copyright © Terry Felke-Morris http://terrymorris.net
Monitor Search Engine Listings
Web Analytics:
◦ "the measurement, collection, analysis and reporting of
Internet data for the purposes of understanding and optimizing
Web usage."
Analyze web site logs
20
- 21. Copyright © Terry Felke-Morris http://terrymorris.net
Link Popularity
Rating determined by a search engine based on the
number of sites that link to a particular website and the
quality
Checking Link Poplularity
◦Analyze your log file
◦Visit a link popularity checking service web site
◦http://linkpopularity.com
◦http://linkpopularitycheck.com
◦Visit search engines and check for yourself:
◦At Google type the following into the search box:
link:yourdomainname.com
21
- 22. Copyright © Terry Felke-Morris http://terrymorris.net
Social Media Optimization
•Creating content of value that is easily sharable
•Benefits:
• Increased brand awareness
• Increased inbound links
•Make sharing easy
• Social Bookmarking.
• http://addthis.com
• Twitter, Facebook, Pinterest, Digg, Reddit, LinkedIn,
YouTube, ….
22
- 23. Copyright © Terry Felke-Morris http://terrymorris.net
Other Site Promotion Activities
•QR (Quick Response) Codes
•Affiliate Programs
•Banner Ads
•Banner Exchange
•Reciprocal Link Agreements
•Newsletters
•“Sticky” Site Features
•Personal Recommendations
•Newsgroup and Listserv Postings
•Traditional Media Ads
•Leverage Existing Marketing Materials
23
- 24. Copyright © Terry Felke-Morris http://terrymorris.net
QR (Quick Response) Code
A two-dimensional barcode in a square pattern that is
readable by a smartphone camera scan application or a
QR barcode reader
Free online QR code generators:
◦ http://qrcode.kaywa.com
◦ http://www.qrstuff.com
◦ http://www.labeljoy.com/en/generate-qr-code.html
24
- 25. Copyright © Terry Felke-Morris http://terrymorris.net
Checkpoint
1. Are the results returned by various search
engines really different?
◦ Choose a place, music group, or movie to search
for.
◦ Enter the same search terms, such as “Door
County” into the following three search engines:
Google, Yahoo!, Bing.
◦ List the URLs of the top three sites returned by
each.
◦ Comment on your findings.
25
- 26. Copyright © Terry Felke-Morris http://terrymorris.net
Checkpoint
2. How can you determine if your web site
has been indexed by a search engine?
How can you determine which search
engines are being used to find your site?
3. List four web site promotion methods that
do not use search engines.
Which would be your first choice? Why?
26
- 27. Copyright © Terry Felke-Morris http://terrymorris.net
Inline Frame
•Also called a floating frame
•Embeds one web page within another in a scrolling area
•Configure with the iframe element
<iframe src="trillium.html" title="Trillium Wild Flower"
height="160" name="flower" width="350">
Description of the lovely Spring wild flower, the
<a href="trillium.html" target="_blank">Trillium</a>
</iframe>
27
- 28. Copyright © Terry Felke-Morris http://terrymorris.net
Use the iframe
element
to embed A
YouTube
Video
<iframe src="http://www.youtube.com/embed/VIDEO_ID"
width="640" height="385">
View the
<a href="http://www.youtube.com/watch?v=VIDEO_ID">YouTube
Video</a>
</iframe>
28
- 29. Copyright © Terry Felke-Morris http://terrymorris.net
Summary
This chapter introduced concepts related to promoting your
website.
Techniques for search engine optimization were discussed.
The activities involved in submitting websites to search engines
and search directories were discussed along with techniques for
making your website more useful to search engines.
The new trend of social media optimization was introduced.
Other web site promotion activities such as banner ads and QR
codes were also discussed.
You can help the marketing staff by creating websites that work
with search engines and directories by following the suggestions
in this chapter.
29