Teach Yourself VISUALLY Search Engine Optimization (2013)
Chapter 5. Building On-Page SEO
The On-page search engine optimization (SEO) process includes the methods you apply to website pages and files to make them search engine optimized and apply to help search crawlers index them more efficiently, which in turn displays them in a higher position in the search result pages. Subsequently, these methods can increase your website’s traffic and ranking in search engines.
Build an HTML Document
Add a Page Title Meta Tag
Add a Page Description Meta Tag
Add a Page Keyword Meta Tag
Add Author and Copyright Meta Tags
Save an HTML Document
Optimize Image Filenames and Alt Attributes
Optimize Website Content
Build an HTML Document
On-page search engine optimization (SEO) techniques are applied to the code in web pages, filenames, and content. To apply On-page optimization, you need to have a basic understanding of HTML (Hypertext Markup Language), which is the programming language used to create web pages. HTML uses commands called tags to tell the browser how to display content. For example, you need to add Meta tags to the <head> tags in HTML documents. These Metadata tags provide information to search engines about your page. You can start building HTML documents using text editors such as TextEdit for the Mac and Notepad for Windows.
Build an HTML Document
Click the Finder icon (
).
Note: For Windows users, you can click Start, click All Programs, click Accessories, and then click Notepad.
The Finder window opens.
Click Applications.
The installed applications appear.
Click TextEdit.app.
The text editor opens.
Type <! DOCTYPE html> to define the document as an HTML file.
Press 
.
Type the opening <html> tag to open all the HTML files.
Press
Type the opening <head> tag.
Press .
Type </head> to close the <head> tag.
Press .
Type the opening <body> tag.
Press .
Type the text Hello World!.
Press .
Type the closing </body> tag.
Press .
Type the closing </html> to indicate the end of the HTML document.
TIPS
Can I use a text editor to view existing HTML code?
Yes, you can view the codes for existing HTML documents by simply opening them in your text editor application. When you open an HTML document, you see the code in the browser by right-clicking the page and clicking View Source. Viewing the code for existing web pages shows you how code should flow and how SEO techniques have been applied.
What are the WYSIWYG HTML editors?
WYSIWYG is an acronym for What You See Is What You Get. It describes HTML editors that allow you to use commands and icons to build web pages without having to write the code manually.
Add a Page Title Meta Tag
Title is the most important meta tag and appears at the top of your web page code, directly after the <head> tag. Search crawlers index the Title meta tag and display it in the search results. You can view a website’s Title meta tag by opening the website in the web browser; the title appears at the top of the browser or tab. Thus, the title should be descriptive of the page’s content and include the important optimized keywords. The title should be less than 70 characters; otherwise Google will omit the extra characters from the search results.
Add a Page Title Meta Tag
Click after the end of the <head> tag.
Press .
Type the opening <title> tag.
Type the text My Website Title.
Type the closing </title> tag.
Add a Page Description Meta Tag
Description is another meta tag that you add at the top of the web page, inside the <head> tag. The Description meta tag provides a brief summary of the webpage and its content. Search crawlers use this tag to get information about the page content and display it in the search results. Unlike with the Title tag, you can use a greater number of characters to describe your website. The character limit for the site description is 155 characters. Make sure to use optimized keywords that represent the website content.
Add a Page Description Meta Tag
Click after the end of the </title> tag.
Press .
Type <meta name="description".
Press 
.
Type content="Page Description">, replacing Page Description with your website description.
Add a Page Keyword Meta Tag
The Keyword meta tag includes individual keywords separated by commas. Similar to the description and title tags, the search engine crawlers use the Keyword meta tag information to index the website and display it in the search results. The keywords should be descriptive and optimized to ensure that the search engine displays the website when users search for these specific keywords. Limit your number of keywords to around 2 to 5 percent of your content. Overloading your web page with keywords is considered stuffing, and it may negatively affect your Google rank. Some search engines overlook the Keyword tag, but it is still useful in others.
Add a Page Keyword Meta Tag
Click after the Description meta tag.
Press .
Type <meta name="keywords".
Press .
Type content="Keyword1, Keyword2, Keyword3">, replacing Keyword1, Keyword2, and Keyword3 with your website optimized keywords.
Add Author and Copyright Meta Tags
The Author and Copyright meta tags are optional and are not as important as the Title, Description, and Keyword meta tags. However, they do make your web page look professional. The Author meta tag includes information about the web page’s creator, or webmaster, as well as contact information, an e-mail, and the company name. The Copyright meta tag defines website copyrights and ownership. You can use it to include information such as a trademarked name.
Add Author and Copyright Meta Tags
Add the Author Meta Tag
Click after the Keywords meta tag.
Press .
Type <meta name="author".
Press .
Type content="Website author name">, replacing Website author name with your website-optimized keywords.
Add the Copyright Meta Tag
Click after the Author meta tag.
Press .
Type <meta name="copyright".
Press .
Type content="2012">, replacing 2012 with your website copyright information.
Save an HTML Document
You can save the HTML code that you write in any text editor or HTML editor using an .html or .htm format. Both formats are web browser compatible. The way you name the HTML document is important in SEO. The name should be descriptive, short, and represent the website structure. For example, you can name the contact page Contactus.html. The main web page is usually named index.html or default.html. When you create your web page names, use only letters, numbers, hyphens (-), periods (.), and underscores (_). Also, make sure to avoid using spaces or special characters in the filename.
Save an HTML Document
Click File in the TextEdit application.
The File menu opens.
Click Save.
The Save As dialog box appears.
Navigate to the location where you want to save the file.
Type the name of the file, index.html, in the Save As field.
Click Save.
An alert message appears.
Click Use .html to save your document as an HTML file.
TIPS
What makes the HTML code search engine optimized?
When the search engine crawlers crawl websites, they read the HTML source code for every web page on the website. So, it is important to keep your code clear and organized. For example, you need to make sure to add the meta tags at the top of the website and avoid using complex codes and unwanted tags.
What is the different between .html and .htm?
In the early Windows versions, the file extensions were limited to three characters, making .htm the default extension for HTML files. Nowadays, this limitation no longer exists. There are still some applications that use .htm as the default format for HTML documents, .html has become universal and is recommended.
Optimize Image Filenames and Alt Attributes
Images should be optimized for the search engines. While the search engine crawlers do not see the images, they can crawl the image tag (<img>) in the HTML code. The image filenames should reflect the image content. The alt attribute is an image tag value that describes the image for the search engine. The caption attribute appears under the images and describes them for the search engine as well. title is another image tag attribute. While it is not mandatory in SEO, it is still important to build a professional image tag in your HTML code.
Optimize Image Filenames and Alt Attributes
Add the Image File
Click after the <body> tag.
Press .
Type <p><img src="/image_name.jpg" />, replacing the image_name.jpg with your image filename.
Note: The previous steps upload the images to the website’s root folder. See the Tips section for more details.
Add the Image Title Attribute
Click after <p><img src="/image_name.jpg".
Press .
Type title="image title", replacing image title with your image’s title name.
Add the Image Alt Attribute
Click after title="image title".
Press .
Type alt="image description", replacing image title with description text for your image.
Add the Image Caption
Click after the alt="image description"/>.
Press .
Type <br/> to create a new line on the web page.
Type image information, replacing image information with information text about the image.
Type the paragraph closing tag </p>.
TIPS
How do I upload images to the server?
You upload images to the website server using FTP (File Transfer Protocol). It allows you to upload images and files to a server and display them by typing the server’s URL or image path in your browser.
What are the best image formats to use?
Web browsers support various formats, such as JPG, PNG, and GIF. JPG is the most commonly used format. It maintains good quality, and the file size is smaller. PNG is suitable for images that include transparent parts. The images are good quality; however, the file sizes are larger than JPGs. GIF supports both still image and animated sequence. It has a low color range support of only 256 colors.
Optimize Your Website Content
The search engine crawls your website for the content mainly to retrieve the information users are looking for when they type a search keyword in the search field. Therefore, your website content should be optimized to ensure optimal engine indexing. Optimizing website content is twofold. First you optimize the content itself using keyword density, content formatting, and the content itself. Second you optimize the HTML and CSS (Cascading Style Sheets) code that you use to format the content display. The content loading speed is another important factor to consider.
Develop CSS and HTML Clean Code
When you develop the webpage HTML and CSS, you have to consider that the search engine will crawl this code. Therefore, it should be well organized and clean, so the crawler can easily index your web page content without encountering any errors that would affect the indexing process. You can check for website errors using website validation service sites such as http://validator.w3.org. You can use this website to check your web page for errors, and then return to the code and fix them.
Improve the Content Loading Time
One of the important steps in the SEO process is the web page content loading time. Fast–loading websites let users access content more easily and faster than slow loading websites. Additionally, the crawlers will be able to crawl more pages from your website in a shorter time and index them faster. Optimizing the loading time includes using small image file sizes, avoiding code complexities, and implementing JavaScript. You can check your website’s loading time using http://tools.pingdom.com/fpt.
Set Keyword Density
The search engine determines the relativity of the content through keywords within the content. If your content includes the right density of keywords, that is the percent of times your keyword appears on a page relative to all the words on a page, the content has a greater chance of displaying in the search engine pages when a user types related search keywords in the search engine’s search field. The placement of the keywords should be natural and not affect the quality of the content. The optimal keyword density varies, but generally 2 to 5 percent is a good range. It is important to check the keyword density for each of your website pages. This helps you identify how well the content is optimized for search engines. You can use many tools to check the density of a specific keyword on your website page; one example iswww.gorank.com/analyze.php.
Use Internal Links
Internal links refer to the links on your web page and links to other relative content within the same website. For example, you can use a keyword in an article as a link to a related article on the same website. These links are very important because the greater the number of internal links you have, the higher your website rank. The internal links play an important role in increasing page views because website visitors click internal links to view other pages on the website. Also, you can add internal links to a web page by mentioning related topics. There are different web tools that help you check the internal links, such as www.google.com/webmasters/tools and www.seochat.com/seo-tools/site-link-analyzer. Unlike the Google Webmaster Tools, SEO Chat lets you check website internal links without creating a website account.