about this tutorial
Goal
The objective of this tutorial is to teach you how to optimize a website for search engines.
Lessons
This tutorial will teach users the functionality and how to properly use the following in Search Engine Optimization:
SEO Basics
Content Quality
Web Crawlers
Google Webmaster
Prerequisite
For this tutorial, you will need to know all the basic fundamentals of HTML and CSS. If you don’t remember or feel you are ready, please review the pervious website here.
what is search engine optimization?
All web developers know what a search engine is, but, not all aspiring developers may know how search engines work. Search engines, like Google, use an algorithmic system to find keywords, such as the title of a webpage, the order of content or an external link. Search engines rely on a webpage's organization and a site’s text to help find the best possible match results. Although, search engines can only understand proper page structure in clear and detailed terms, this is when all developers need to use Search Engine Optimization (SEO).
Search Engine Optimization (SEO) means that as you are building a website, you need to utilize consistent and well-defined content with specific descriptions. Here, you will learn about the SEO process with appropriate page titles and using meta tag. Also, you will learn how to help SEO ‘crawlers’. After you learn about SEO, you will sign up for Google Webmaster Tool. Understanding and using this process will make your website suitable for Search Engine Optimization (SEO).
seo basics
Page Titles
Think back to when you learned the basics of HTML. You know that the title tag has three functions. It displays the webpage’s title in the browser tab and on your favorites bar, as well as in the search engine results. However, many sites have generic, non-descriptive titles that don’t utilize SEO. In order to optimize titles, you must make each webpage title more informative. For instance, go to amazon.com, you will notice that the title in the tab says “Amazon.com: Online Shopping for Electronics, Apparel, Computers, Books, DVDs & more.” This detail tells the search engine what type of content is on the webpage. It does not just say Amazon.com.
Example:
<title>www.Amazon.com: Online Shopping for Electronics, Apparel, Computers, Books, DVDs & more</title>
Descriptive Meta tags
Again, looking back to HTML basics, you know that meta tags gives metadata information to browsers. Up to this point, you may have just used it for encoding and for declaring authorship of the webpage. However, you can use meta tags to create a short descriptive paragraphs within the webpage’s content. You can also add informative keywords. This will allow the search engine to display a summary and/or keywords in the results. You need to use the name and content attributes for the two specific attribute values. These attributes are the following:
Description: gives search engines a summary of the webpage’s content
Keywords: gives search engines a list of keywords for the webpage’s content
Example:
Description
<meta content="Online shopping from the earth's biggest selection of books, magazines, music, DVDs, videos, electronics, computers, software, apparel & accessories, shoes, jewelry, tools & hardware, housewares, furniture, sporting goods, beauty & personal care, broadband & dsl, gourmet food & just about anything else." name="description">
Keywords
<meta content="Amazon, Amazon.com, Books, Online Shopping, Book Store, Magazine, Subscription, Music, CDs, DVDs, Videos, Electronics, Video Games, Computers, Cell Phones, Toys, Games, Apparel, Accessories, Shoes, Jewelry, Watches, Office Products, Sports & Outdoors, Sporting Goods, Baby Products, Health, Personal Care, Beauty, Home, Garden, Bed & Bath, Furniture, Tools, Hardware, Vacuums, Outdoor Living, Automotive Parts, Pet Supplies, Broadband, DSL" name="keywords">
URL
It is standard to have specific URLs for every webpage. For Search Engine Optimization, you need to make sure the web addresses of every webpage are distinctive from each other. This will help search engines as well as the user to find the link to your site.
content quality
All websites need to have unique and original content to be successful. It is also critical to have a clear theme, descriptive articles, titles, navigation and specific keywords. This will help users to trust your site and can help establish it's preeminence. It also assists with Search Engine Optimization. As search engine reads your site’s content, the more unique and original the content, the better chance your site will be at the top of search results.
To create quality content, do the following:
Create a clear and consistent theme for the site
Use legible and descriptive text
Do not have grammatical errors, text in images, or duplicated pervious content
Always update your website with new and distinctive content
Utilize social media and blogs to increase traffic
Keep the loading time of the site to a minimum
Make the site easy to navigate and accessible for users
Use a hierarchical organization by separating the content with headings, but don’t go overbroad with them. (Remember: h1 is the most important and h6 is the least.)
Use backlinks to content
Anchor Text
Anchor Texts are hyperlinked words in the paragraph. These will help users and search engines to know what specific webpage the link leads to. The best types of Anchor Texts are descriptive and brief. They assist search engines to better understand the content and give your site a boost in its search results. The worst types of Anchor Texts are generic and muddled, which hurt in search results.
Create clear and precise text.
Make the anchor text part of an explanatory phase
Do not use non-descriptive text
Do not have more than one anchor text with the same URL, only the first anchor text will be recognized by search engines
Internal links can be used as well
Do not have the URL address display in the text
Do not have a lot of keywords
Stylize anchor text by changing the color or underline, as long it stands out clearly
Here are two examples. One is the correct way and the other is the wrong way
Poor anchor text:
For the latest news around the world, click here.
Good anchor text:
For the latest news around the world, go to CNN.com
Images
Every search engines reads everything in HTML, this includes the images on your site. You need to use the alternative text (alt) attribute for all images, but make sure they actually describe the images. Also, you can integrate a site map like this image sitemap from Google Webmaster, which gives more information on images. To optimize images, the following should be remembered:
Better description alt text
Image size
Good file naming
Avoiding the use of external links for images
No long text
Example:
Here are two examples of the correct way and wrong way
Poor image optimization:
img src="tesla_model_s.jpg" alt="Tesla Car"/>
Good image optimization:
img src="tesla_model_s.jpg" alt="Tesla Model S"/>
web crawlers
Web Crawlers
Search engines employ a bot program nicknamed Web Crawlers; they work by systematically scanning the World Wide Web for a match the site with the user’s requests. Web Crawlers look for and gather the following website information: first, they look at the website address; second, the title of the webpage; third, all keywords and description in the meta tags; then finally, the entire content of the webpage and links.
robots.txt.
If you want to block Web Crawlers from searching specific pages, content, and/or information, you will need to use a file called robots.txt. This will prohibit the Web Crawlers from accessing the information and hen redirect them to pages you display. To incorporate this prohibition, you must upload the robots.txt file to the site root directory. The code of the file itself is broken down like this:
User-agent *: relates to all robots
Disallow /: will block crawlers from indexing the page or information
Example:
User-agent: *
Disallow: /images/
Disallow: /search
You can use a robots.txt generator like Google Webmaster.
See more on robots.txt below:
Robots.txt (Robots File) Explained - SEO Video Tutorial
“nofollow”
If you want to mention another website link but you do not want to be associated with that website, add a rel attribute with “nofollow” value in the <a> tag.
Example:
Do not badsite.com, they like to spamm
To block all links, use the following:
Example:
<meta name="robots" content="nofollow">
Summary
Search Engine Optimization (SEO) allows web developers the ability to have their website rank high in search engine results.
If you want or need to see alternate explanations and tutorials of Search Engine Optimization (SEO), check out these links and videos:
practice
Throughout this tutorial, you were given links to Google Webmaster Tools; it will be a good idea to use this application in future. Google Webmaster is a free web application that will assist developers in integrating SEO on their websites. Your assignment is to create a Google Webmaster account. Use the following easy steps to complete the sign-up.
Go to the Google Webmaster Tools site
If you already have a Google account, simply sign-in with your username and password. If you do not have a Google account, create an Google account.
Now you have Google Webmaster Tools account.