Meta tags and More on the title element - HTML, CSS, WEBSITE DEVELOPMENT AND DESIGN (2015)


Chapter 10: Meta tags and More on the title element

Before we get into our CSS lessons finally in the next chapter there are a few more things that we need to go over. And they are the title element and meta tags. What are they? How do we use them, etc. You don't need to enter this code into your text editor. This is just here for learning purposes and then you'll know what to enter for your specific page or pages. For this example we're going to pretend that we're making a website for recipes. Below is some sample code that we will discuss:

<!doctype html>



<title>Best Easy To Make Dinners Recipes On A Budget</title>

<meta name="description" content="Amazing easy to make 30 minute recipes on a budget. Watch cooking videos and print out great recipes that your whole family will enjoy."/>

<meta name="keywords" content="quick recipes, great tasting, cooking, videos, family meals, 30 minute dinners"/>

<meta http-equiv="content-language" content="en-us"/>





®First let's get into a little more detail about the title element. As you probably remember this is not actually displayed on your web page. Actually everything you put into the head element is either instructions for the browser or information about your page that would help your page have better rankings in a search engine. The goal is to get your page displayed somewhere in the top results of a search engine. Now you know that the title element is displayed on the little tab that appears in the top left corner of the browser when a user visits your page. But the title is also what would become the actual link to your web page when someone searches for something similar to the content of you page. For example, If someone searched for "dinner recipes on a budget", This page might show up high in their search results. And if the title of your page interests them that's what they would click on to go to your site. So it's very important to have the title worded in a way that makes people want to visit your site. And you want to have good keywords right in the title of your page. In the example above the keywords to try to target what people would search for are dinner, recipes, and budget. You would want to take some time to figure out a good title and this is something that you would want on everyone of your pages in your website based on what content that page contains. So if you had a page about cheeseburgers you would word the title for that specific page to match what the page is about.

®<meta name="description" content="Two or three really descriptive sentences."/> This is the first meta tag that we're going to learn about. Meta tags contain meta data about a web page. And this meta tag is used for the description of the web page that you put it in. The description information that you enter in here is what the user would see when they do a search that would display under the click-able link to take them to your web page. So again you would want to add this to everyone of your pages with a description specific for that page. Because web browsers could display any of your pages contained in your website in the search results and not only your Homepage. So if someone searched for "cheeseburger recipes" and you had a page that was all about cheeseburger recipes, that might come up in the search results. Also when your wording a description about your web page it's a good idea to try to make two or three sentences that describe the pages content very well because the search engine will only display a few lines of text before it would cut it off mid sentence. Obviously if someone had a description that was 100 lines long that would take up a huge amount of space on the search engine page. So there is a limit to how much information can be displayed. Another thing to know here is that if you don't enter a meta description the web browser will add one for you. And basically what happens is it takes some text from the page that kind of relates to what the user searched for. Try to word your descriptions in a way that gives the viewer a lot of information in a small amount of words. Use keywords about the page here too. Search engine's use the title and the description to decide what pages will appear based on what the user searched for among other things.

®<meta name="keywords" content="keyword, keyword keywords, keyword"/> As you could probably tell this is the keywords meta tag. Now Google say they don't use this meta data anymore to find relevant web pages because people were abusing it by putting in keywords that had absolutely nothing to do with their web page. But other search engine's do. So it doesn't hurt to add this to all of your pages too. Anything that can help your search result rankings is a plus because think about, When you search for something you probably always choose one of the results on the first page. How often do you even go to the second page of the search results. The first page is where you want your page to pop up and getting ranked first, second, or third is a big deal too because the very first ranking in a search engine is clicked about 50% of the time and then the rest of the first page combined is somewhere around 49% of what the user chooses. As far as the keywords go, you should enter between 6 to 8 really descriptive words that refer to your page. You wouldn't want to add keywords in any of these meta tags that don't have anything to do with the content in you web page. And a keyword can be one word or even two or three words. You separate them by a coma. So content="quick recipes, great tasting, cooking, videos, family meals, 30 minute dinners"/> would be fine to enter.

®<meta http-equiv="content-language" content="en-us"/> This meta tag just specifies the language that the website was written in for the browser. So in the content attribute you would add the value of what language it was written in and what audience the website is intended for. And in this example the language code "en-us" tells the browser that this site was written in English as it is used in the united states. There are many different language codes that could be used. So this is something that you might want to look up if your page is going to be written in a different language other than English or if your page is made up of multiple languages. If your page is in English you can just add this meta tag with the language code "en-us" to your pages.

Take the time to make sure that you typed out all of your meta tags and title information correctly. If you leave out a " symbol or something like that your meta data might not show up on the search engine page. And as far as testing goes, you really can't view this data until you upload your website to a web host. A good rule to give yourself is to try to keep you title and your description under 65 character's each. And count the spaces as a character. Another thing that search engine's look for is links to your website. And what that is, Is other websites that have links on their pages that will take a user to your site. So having good relationships with other people that have similar websites is also very important. As your site becomes more popular, You should look for some good quality websites that are similar to the content that you have on yours and try to contact the creator to see if they will put a link to your website on their page and vice verse. Hopefully this chapter wasn't too boring. There was a lot to go over here and I wanted to give all of the important details so that you can get the best search ranking results with your website possible. These are the most common and important meta tags. You can do a little research if you want on meta tags because there are more but they are not used as often as the ones that we covered in this chapter.

Quiz Chapter 10

1.What is the main purpose of using meta tags in your HTML documents?

2.What are the most important places for you website's keywords?

3.How long should your title and description be?

4.All meta tags are embedded inside of what element?

5.Should you put meta tags on every one of your HTML pages? Why?

6.What is the language code for English as it is used in the United States?