The HTML title tag defines the name of a web page and should be used to describe content of that page in a concise way. Thus, what is placed between the opening and closing HTML title tag is extremely important for both usability and Search Engine Optimization (SEO). In this post I will discuss proven guidelines that you can use to create the ultimate title tag: one that is both human and search engine friendly – a title that will help in driving quality traffic to your web site.

Why is the title tag important?

The title tag is important because its content is used by:

• Web browsers: To label the web browser’s tab(s) (Older browsers used to display the title of the web page in the browser’s window title)

Web browsers display the page name in their tab by retrieving the contents of the title tag of the web site being viewed
• Search engines: As the clickable headline for listings on Search Engine Result Pages (SERPs)

The main search engines show the title tag as the clickable link to a web site in their SERPs
• Search engines: To determine the topic of the web page. Search Engine spiders or crawlers analyze the content of the page title and then translate the page topic.
• Social bookmarking sites and Web browsers: To assign a default value to bookmarked web sites

Some social media and social bookmarking web sites such as Digg and Facebook automatically retrieve the contents of the title tag when the user submits a URL
• Users: to
  • Identify the web sites that are likely to contain the information they are searching for within the list of web sites on a SERP
  • Locate the tab in their web browser which contains the site they want to view
  • Find the web site they have bookmarked in their browser
  • Determine whether a web site that others have bookmarked in a social bookmarking web site is worth checking out

There is an overlap between usability and Search Engine Optimization as to what techniques can be applied in order to optimize the title of a web page. Thus, I have compiled the following list of guidelines which, if adhered to, will make your web pages both useful and SEO-friendly

The Do’s

1. Place your keywords at the beginning: Search engines assign more importance to the first word in the title tag than to the second one and so forth. From a usability perspective, since users understand just the first 11 characters of links, then it is important to make the most out of these characters by placing the most important content there.
2. Use keyphrases instead of keywords: If your page title contains a phrase instead of a keyword, then it is more likely that you will attain a higher ranking in search engines for specific user searches. Thus, for example if you have a company that makes toys, then you will rank better if your web page title contains more specific keyphrases rather than just “toys”.
3. Use modifiers: In SEO, modifiers are words like “best”, “offers”, “buy”, “cheap” and “reviews”. Users tend to include modifiers in when searching and subsequently when scanning the web pages on a SERP.
4. Use numbers: This is purely a usability tip. Users do not typically search for the “50 best button designs for inspiration” but they would rather click on it in a SERP rather than a title that reads “best button design inspiration”. I would dare to add more – they would even prefer to click on it rather than one that reads “best button design inspiration – 50 excellent examples”. Numbers convey meaning to users as to what they should expect to find on a web page and they also serve to attract their attention especially if they are at the beginning of the title.

The 2nd and 3rd web sites listed in the above SERP are more likely to be clicked on by a user searching for inspiration. This is due to the use of numbers and the cleverly worded title.
5. Separate your keywords with hyphens (-) or pipes (|): Both hyphens and pipes will make it easier for your user to scan the content of your title tag. From an SEO perspective, hyphens have the added advantage that they will enable you to rank for different keywords while listing them only once. For example, if you are a web designer, then the keyphrase “web-design” will associate you with search queries for “web design” and “webdesign”. From a usability perspective, this is very useful since you are not restricting the user to type in a specific phrase to reach related content.
6. Include Acronyms: Unlike synonyms, there is still some disagreement as on whether search engines interpret the meaning of acronyms. Even if they do, it would be difficult if not impossible for both search engines and users to deduce page content from an acronym alone. This is because acronyms can be interpreted differently like for example “AAA” can be interpreted as American Automobile Association, Access All Areas, Anti Aircraft Artillery and another 190 ways . Still, users may search for the acronym directly (as in the case of SEO). So, if your page content is about something that can be converted to an acronym, it is best to include both the acronym and the full keywords. Acronyms are the only text that should be written in capital case in the title tag. For normal text, use title case or proper case as these are easier to scan and look more professional.
7. Each page on your site should have a unique page title: Placing specific keywords in the title tag for each page based on the content of the page will make your individual pages easier to categorize for search engines. Moreover it easier for the user to decide which page to click on in the SERP when presented with a number of pages from your site.

In this screenshot, 3 different pages from the same site have shown up in the SERP. This site has the same contents in the title tag of each page. Notice how difficult it will be for the user to know which link to click
8. Best title naming convention for the homepage: The first word in the homepage title should be the name of the web site. It should then be followed by the tagline which is a short description of what the web site is about. Never start the title of the homepage with generic words such as “The” or “Welcome” as they would make it more difficult for a user to locate your site. Moreover, if users opt to bookmark it, your site will be indexed under “T”or “W” respectively whereas the user will try and find it using the first character of your company’s name.

A whopping 822 million web sites contain the words"Welcome to the website of" in their homepage title tag. For the majority of them, these words are the first words. Imagine how difficult it will be for users to locate them in a SERP or among their bookmarks
9. Best title naming convention for other pages: Start the title with the keywords or most prominent information-carrying words that describe what the page contains. These should be followed by the company name at the end of the title. The reason why the company name is placed at the end of the title is that if a user accesses an inner page via it’s home page, then he/she already knows which site they are on. If they access it via a web search, then they are more interested in the specific content of that page. They would still be able to identify who owns the site via the site ID (such as the logo).

The Don’ts

10. Do not make the content in the title tag longer than 69 characters: This is because Google, Bing and Ask only show the first 69 characters as the title of web pages in their SERPs whilst Yahoo! shows 72 (source). Still, this does not necessarily mean you have to try and use all 69 characters at your disposal. Whilst more keywords may enable you to show up in more searches, your users will find it more difficult to scan longer page titles. Additionally, because of keyword density , keywords in your title will be more relevant for search engines if your title contains less characters.

Notice how the important keyword "Wales" has been replaced by ellipses in the Google SERP as opposed to the same web page in the Yahoo! SERP. This is because Yahoo! displays more characters in its SERP. In this case, this problem could have easily been resolved through the removal of the useless words "Welcome to the website of" from the title tag.
11. Do not place too many keywords: From an SEO perspective, this constitutes a practice known as keyword stuffing in order to attain better search rankings. Not only will this technique not work but, major search engines such as Google will penalize you for it. From a usability perspective, even if your page manages to show up on a SERP, it will be unlikely that a user clicks on it for the simple reason that it will look like you have a web page that discusses a little of everything. So, keyword stuffing make your page title look amateurish and will show little value to the user.
12. Do not use stop words: Stop words are words that are ignored by search engines and (sometimes) users. These include words such as “by”, “it” and “as”. There are quite a number of stop words so it is worth checking them out when optimizing your title tag. From a usability perspective, I recommend that you do this process carefully. Be judgemental and only remove useless words that do not help the user in identifying your page content. Remember that some users will still include stop words in their search queries.
13. Do not use a lot of commas: Whilst commas may look good for the user to scan the content of your page title, using a lot of them may cause search engines to penalize you since they interpret it as keyword stuffing. Thus it is advisable to separate your keywords using the hyphen (-), pipe (|) or underscore (_) symbols. Yes, underscore. Whilst I find the underscore symbol as not very usable, I included it since surprisingly, some “experts” seem to have forgotten that search engines have been treating underscores like hyphens since 2007!
14. Do not use special characters: Search engines tend to ignore special characters. For example Google ignores punctuation symbols and other special characters. On the other hand, special characters may be used to attract the user’s attention, although I personally think that such strategy will backfire since it decreases the site’s credibility. Thus it is best to avoid them as they do not add real value to the user or SEO.
15. Do not overuse synonyms: It is true that users may use “buy” to mean “purchase” and vice versa so you may be inclined to place them both in your title. Unfortunately, this will cost you the wastage of valuable characters in your title tag. Luckily, search engines such as Google (since 2008) recognise more and more synonyms. So, my advice is to include synonyms only if you think that users may equally search for the different keywords. Otherwise, stick to the most common keyword.

Conclusion

I think that by now you should have a better idea of the importance of the title tag and how to optimize it for both usability and SEO. My final word of advice is that what you would have achieved at this point is a step forward towards making your web pages easier to find and more usable in terms of scannability. However, as the saying goes, “content is king”. As search engine algorithms evolve, they are able to better detect the content of your pages and they will penalize you in rankings if the content is not of sufficient quality to match the user’s search query. Moreover, if your web page still manages to rank and the user clicks on it because you have a good title, he or she will not hesitate to close the browser tab if they do not see good content within the first 10-20 seconds of scanning its content. Bottom line is this – Write quality content and then, based on what you write you can optimize the title of that page using the guidelines explained above.

Social media -- and more specifically Facebook -- is a huge driver of traffic to websites nowadays, so it's increasingly important that sites are optimized for sharing on the social network. To determine what information will be shown when a site is shared, Facebook first checks for the existence of special meta tags that follow the Open Graph protocol.
These tags provide information to Facebook about the page's title, preview image, url, description, in addition to numerous other properties, which will in turn be used when Facebook users do various actions like sharing a website, posting a link on a friend's wall, or clicking the "like" button on a website.
Additionally, these tags tell Facebook who the administrators are for the website, in turn giving them the ability to make changes to the app on Facebook, moderate Facebook plugins like Comments, and access Insights for the site.
One tip before we go through setting up the tags -- a page you will find to be invaluable as you set up Facebook open graph tags is the URL Linter tool. This page gives you the ability to see a preview what a page will look like when shared, circumventing the need to irritate your friends by constantly sharing pages that you are testing.
Additionally, when a website is shared, Facebook caches the properties for the page for 24 hours. This means that any changes we make to the tags won't be reflected for a day unless we have a way to force Facebook to re-cache the page. Fortunately, every time we add a url into the linter the page properties are re-scraped and updated.
Lastly, the linter will tell you any errors that have been made when setting up the tags and offer suggestions on how to fix them.
Now that you have a brief background on what the open graphs tags are used for, let's do a quick run-though of what each tag is and how they can be set up in Hifi.

og:title

In the photo above, we can see that the part outlined is where the og:title tag will be shown. Unless the home page is being shared, we will want the title to match what we are already using in the meta title tag, On the home page we will only want to include the site title, since we do need the title of "Home" or "Home Page" to be included.

{% if this.type == "home" %}
     <meta property="og:title" content="{{ hifi.settings.title }}">
{% elseif this.meta.title %}
     <meta property="og:title" content="{{ this.meta.title }}">
{% else %}
     <meta property="og:title" content="{{ this.title }}">
{% endif %}

og:type

Next up is og:type, which won't show up in the preview, but tells Facebook what type of website we are sharing. For example, a website for a political candidate may be designated as "politician" and a non-profit could be designated as "non_profit". The full list of options can be found here.
In Hifi, the code will first check to see if the Hifi page type is a post and if it is, will set the og:type as "article". If it isn't, we will want to use the type of website that we found by looking at the list linked above. In this example, I have the og:type set to "website".

{% if this.type == "post" %}
    <meta property="og:type" content="article">
{% else %}
    <meta property="og:type" content="website">
{% endif %}

og:url

Now we have og:url, which tells Facebook what the url is of the page we are sharing. Even if you redirect one to the other, Facebook differentiates between www and non-www, so make sure that this is accurate so that the wrong url isn't shared and Insights are accurate. Additionally, the url will show in the preview box.

<meta property="og:url" content="http://{{ hifi.url.host }}{{ hifi.url.path }}">

og:image

The og:image tag is used to tell Facebook what image to use in the preview. Facebook requires this to be larger than 50px by 50px and encourages it to be larger than 200px by 200px and have a square shape. Since this is what will be important in catching people's eyes as they browse a feed, be sure to spend some extra time customizing this.
In the Hifi theme, we will first check to see if we are on the homepage. If so, I have it set to check for an image called "logo.png", but this can (and should) be customized to a specific preview image that would catch someone's eye. For example, this is an image we used on a microsite that was launched a few months ago.
If we aren't on the home, the code will check to see if an image was uploaded to the media section of the page. If so, it will crop and resize the first image to a 300px by 300px square. If there isn't any media, Facebook will give the option to select a preview image from the images on the page.
Lastly, remember that the image must use an absolute path in order to work correctly.

{% if this.type == "home" %}
     <meta property="og:image" content="{{ hifi.url.images }}logo.png">
{% else %}
    {% if this.media %}
        {% set photo as this.media[0] %}
        <meta property="og:image" content="{{ photo.url|imagesize({ width:300, height:300, crop:true }) }}">
{% endif %}

og:site_name

The og:site_name tag is used to tell Facebook what the name of the site is that the url is shared from.

<meta property="og:site_name" content="{{ hifi.settings.title }}">

og:description

For the code, we will first check to see if a meta description has been set for the page. If there isn't, we will move on a check to see if there is an excerpt set. Lastly, since something is better than nothing, the code will truncate the content to 160 characters and add an ellipsis at the end. The amount of characters displayed varies depending on where the page preview is on Facebook, so it's best to keep it shorter and have more important information near the beginning. Facebook suggests keeping the description to one or two sentences.

{% if this.meta.description %}
     <meta property="og:description" content="{{ this.meta.description }}">
{% elseif this.excerpt %}
    <meta property="og:description" content="{{ this.excerpt|striptags }}">
{% else %}
    <meta property="og:description" content="{{ this.content|striptags|truncate(160,'...') }}">
{% endif %}

fb:admin and fb:app_id

Finally, we have fb:admin and fb:app_id. While these tags technically aren't part of the Open Graph Protocol, they are important and necessary to tell Facebook who the admins are for the site. Admin privileges allow access to the Insights for the site in addition to other on-site actions, like moderating a Facebook Comment Box plugin.
Assigning admin privileges can be done two ways:

1. Assigned directly by adding the user's Facebook id number in the fb:admin tag (multiple ids should be comma-separated)
2. Creating a new Facebook app and adding the user as an admin to the app.

Which approach you will want to take is up to you, but on a smaller site you will find that setting up a separate app for the site is overkill and simply adding fb:admin is adequate. Alternatively, one thing to keep in mind is that the user ids will be visible in the page source, so instead assign admin access through an app if privacy of admins is important.

<meta property="fb:admins" content="">
<meta property="fb:app_id" content="">

Optional tags

In addition to the tags above, there are a wide range of additional optional open graph tags that can be used if they fit the content of your site. To learn more about these, visit Facebook's page on Open Graph.

Full Code

<!-- facebook og tags -->
{% if this.type == "home" %}
<meta property="og:title" content="{{ hifi.settings.title }}">
{% elseif this.meta.title %}
<meta property="og:title" content="{{ this.meta.title }}">
{% else %}
<meta property="og:title" content="{{ this.title }}">
{% endif %}
{% if this.type == "post" %}
<meta property="og:type" content="article">
{% else %}
<meta property="og:type" content="website">
{% endif %}
<meta property="og:url" content="http://{{ hifi.url.host }}{{ hifi.url.path }}">
{% if this.type == "home" %}
<meta property="og:image" content="{{ hifi.url.images }}logo.png">
{% else %}
{% if this.media %}
{% set photo as this.media[0] %}
<meta property="og:image" content="{{ photo.url|imagesize({ width:300, height:300, crop:true }) }}">
{% endif %}
<meta property="og:site_name" content="{{ hifi.settings.title }}">
{% if this.meta.description %}
<meta property="og:description" content="{{ this.meta.description }}">
{% elseif this.excerpt %}
<meta property="og:description" content="{{ this.excerpt|striptags }}">
{% else %}
<meta property="og:description" content="{{ this.content|striptags|truncate(160,'...') }}">
{% endif %}
{#
<!-- uncomment these after the ids are added -- doing before can cause a scraping error --> 
<meta property="fb:admins" content="">
<meta property="fb:app_id" content="">
#}

Basic HTML Meta Tags

<meta charset='UTF-8'>
<meta name='keywords' content='your, tags'>
<meta name='description' content='150 words'>
<meta name='subject' content='your website's subject'>
<meta name='copyright' content='company name'>
<meta name='language' content='ES'>
<meta name='robots' content='index,follow'>
<meta name='revised' content='Sunday, July 18th, 2010, 5:15 pm'>
<meta name='abstract' content=''>
<meta name='topic' content=''>
<meta name='summary' content=''>
<meta name='Classification' content='Business'>
<meta name='author' content='name, email@hotmail.com'>
<meta name='designer' content=''>
<meta name='reply-to' content='email@hotmail.com'>
<meta name='owner' content=''>
<meta name='url' content='http://www.websiteaddrress.com'>
<meta name='identifier-URL' content='http://www.websiteaddress.com'>
<meta name='directory' content='submission'>
<meta name='pagename' content='jQuery Tools, Tutorials and Resources - O'Reilly Media'>
<meta name='category' content=''>
<meta name='coverage' content='Worldwide'>
<meta name='distribution' content='Global'>
<meta name='rating' content='General'>
<meta name='revisit-after' content='7 days'>
<meta name='subtitle' content='This is my subtitle'>
<meta name='target' content='all'>
<meta name='HandheldFriendly' content='True'>
<meta name='MobileOptimized' content='320'>
<meta name='date' content='Sep. 27, 2010'>
<meta name='search_date' content='2010-09-27'>
<meta name='DC.title' content='Unstoppable Robot Ninja'>
<meta name='ResourceLoaderDynamicStyles' content=''>
<meta name='medium' content='blog'>
<meta name='syndication-source' content='https://mashable.com/2008/12/24/free-brand-monitoring-tools/'>
<meta name='original-source' content='https://mashable.com/2008/12/24/free-brand-monitoring-tools/'>
<meta name='verify-v1' content='dV1r/ZJJdDEI++fKJ6iDEl6o+TMNtSu0kv18ONeqM0I='>
<meta name='y_key' content='1e39c508e0d87750'>
<meta name='pageKey' content='guest-home'>
<meta itemprop='name' content='jQTouch'>
<meta http-equiv='Expires' content='0'>
<meta http-equiv='Pragma' content='no-cache'>
<meta http-equiv='Cache-Control' content='no-cache'>
<meta http-equiv='imagetoolbar' content='no'>
<meta http-equiv='x-dns-prefetch-control' content='off'>

OpenGraph Meta Tags

<meta name='og:title' content='The Rock'>
<meta name='og:type' content='movie'>
<meta name='og:url' content='http://www.imdb.com/title/tt0117500/'>
<meta name='og:image' content='http://ia.media-imdb.com/rock.jpg'>
<meta name='og:site_name' content='IMDb'>
<meta name='og:description' content='A group of U.S. Marines, under command of...'>

<meta name='fb:page_id' content='43929265776'>
<meta name='application-name' content='foursquare'>
<meta name='og:email' content='me@example.com'>
<meta name='og:phone_number' content='650-123-4567'>
<meta name='og:fax_number' content='+1-415-123-4567'>

<meta name='og:latitude' content='37.416343'>
<meta name='og:longitude' content='-122.153013'>
<meta name='og:street-address' content='1601 S California Ave'>
<meta name='og:locality' content='Palo Alto'>
<meta name='og:region' content='CA'>
<meta name='og:postal-code' content='94304'>
<meta name='og:country-name' content='USA'>

<meta property='fb:admins' content='987654321'>
<meta property='og:type' content='game.achievement'>
<meta property='og:points' content='POINTS_FOR_ACHIEVEMENT'>

<meta property='og:video' content='http://example.com/awesome.swf'>
<meta property='og:video:height' content='640'>
<meta property='og:video:width' content='385'>
<meta property='og:video:type' content='application/x-shockwave-flash'>
<meta property='og:video' content='http://example.com/html5.mp4'>
<meta property='og:video:type' content='video/mp4'>
<meta property='og:video' content='http://example.com/fallback.vid'>
<meta property='og:video:type' content='text/html'>

<meta property='og:audio' content='http://example.com/amazing.mp3'>
<meta property='og:audio:title' content='Amazing Song'>
<meta property='og:audio:artist' content='Amazing Band'>
<meta property='og:audio:album' content='Amazing Album'>
<meta property='og:audio:type' content='application/mp3'>

Create Custom Meta Tags

Use custom meta tags to store data that you need in Javascript, instead of hard-coding that data into your Javascript. I store my Google Analytics code in meta tags. Here's some examples:

<meta name='google-analytics' content='1-AHFKALJ'>
<meta name='disqus' content='abcdefg'>
<meta name='uservoice' content='asdfasdf'>
<meta name='mixpanel' content='asdfasdf'>

Company/Service Meta Tags

ClaimID

<meta name='microid' content='mailto+http:sha1:e6058ed7fca4a1921cq91d7f1f3b8736cd3cc1g7'>
<meta name='readability-verification' content='E7aEHvVQpWc8VHDqKvaB2Z58hek2EAv2HuLuegv7'>
<meta name='google-site-verification' content='4SMIedO1X4IkYrYuhEC2VuovdQM36Xxb0btUjElqQyg'>
<meta name='ICBM' content='40.746990, -73.980537'>
<meta name='generator' content='WordPress 3.3.1'>
<meta name='norton-safeweb-site-verification' content='tz8iotmk-pkhui406y41y5bfmfxdwmaa4a-yc0hm6r0fga7s6j0j27qmgqkmc7oovihzghbzhbdjk-uiyrz438nxsjdbj3fggwgl8oq2nf4ko8gi7j4z7t78kegbidl4'>

Apple Meta Tags

<meta name="apple-mobile-web-app-title" content="My App"> <!-- New in iOS6 -->
<meta name='apple-mobile-web-app-capable' content='yes'>
<meta name='apple-touch-fullscreen' content='yes'>
<meta name='apple-mobile-web-app-status-bar-style' content='black'>
<meta name='format-detection' content='telephone=no'>
<meta name='viewport' content='width=device-width; content='width = 320; initial-scale=1.0; maximum-scale=1.0; user-scalable=yes; target-densitydpi=160dpi'>

<link href='/apple-touch-icon.png' rel='apple-touch-icon' type='image/png'>
<link href='touch-icon-ipad.png' rel='apple-touch-icon' sizes='72x72'>
<link href='touch-icon-iphone4.png' rel='apple-touch-icon' sizes='114x114'>
<link href='/startup.png' rel='apple-touch-startup-image'>

<link href='http://github.com/images/touch-icon-iphone4.png' sizes='114x114' rel='apple-touch-icon-precomposed'>
<link href='http://github.com/images/touch-icon-ipad.png' sizes='72x72' rel='apple-touch-icon-precomposed'>
<link href='http://github.com/images/apple-touch-icon-57x57.png' sizes='57x57' rel='apple-touch-icon-precomposed'>

Internet Explorer Meta Tags

<meta http-equiv='Page-Enter' content='RevealTrans(Duration=2.0,Transition=2)'>
<meta http-equiv='Page-Exit' content='RevealTrans(Duration=3.0,Transition=12)'>
<meta name='mssmarttagspreventparsing' content='true'>
<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible"/>
<meta name='msapplication-starturl' content='http://blog.reybango.com/about/'>
<meta name='msapplication-window' content='width=800;height=600'>
<meta name='msapplication-navbutton-color' content='red'>
<meta name='application-name' content='Rey Bango Front-end Developer'>
<meta name='msapplication-tooltip' content='Launch Rey Bango's Blog'>
<meta name='msapplication-task' content='name=About;action-uri=/about/;icon-uri=/images/about.ico'>
<meta name='msapplication-task' content='name=The Big List;action-uri=/the-big-list-of-javascript-css-and-html-development-tools-libraries-projects-and-books/;icon-uri=/images/list_links.ico'>
<meta name='msapplication-task' content='name=jQuery Posts;action-uri=/category/jquery/;icon-uri=/images/jquery.ico'>
<meta name='msapplication-task' content='name=Start Developing;action-uri=/category/javascript/;icon-uri=/images/script.ico'>
<meta name='msvalidate.01' content='6E3AD52DC176461A3C81DD6E98003BC9'>
<meta http-equiv='cleartype' content='on'>

TweetMeme Meta Tags

<meta name='tweetmeme-title' content='Retweet Button Explained'>

Blog Catalog Meta Tags

<meta name='blogcatalog'>

Rails Meta Tags

<meta name='csrf-param' content='authenticity_token'>
<meta name='csrf-token' content='/bZVwvomkAnwAI1Qd37lFeewvpOIiackk9121fFwWwc='>

HTML Link Tags

<link rel='alternate' type='application/rss+xml' title='RSS' href='http://feeds.feedburner.com/martini'>
<link rel='alternate' type='application/atom+xml' title='Atom 0.3' href='https://example.com/feed.atom'>
<link rel='shortcut icon' type='image/ico' href='/favicon.ico'>
<link rel='fluid-icon' type='image/png' href='/fluid-icon.png'>
<link rel='me' type='text/html' href='http://google.com/profiles/thenextweb'>
<link rel='shortlink' href='http://blog.unto.net/?p=353'>
<link rel='archives' title='May 2003' href='http://blog.unto.net/2003/05/'>
<link rel='index' title='DeWitt Clinton' href='http://blog.unto.net/'>
<link rel='start' title='Pattern Recognition 1' href='http://blog.unto.net/photos/pattern_recognition_1_about/'>
<link rel='bookmark'title='Styleguide' href='http://paulrobertlloyd.com/about/styleguide/'>
<link rel='search' href='/search.xml' type='application/opensearchdescription+xml' title='Viatropos'>

<link rel='self' type='application/atom+xml' href='http://www.syfyportal.com/atomFeed.php?page=3'>
<link rel='first' href='http://www.syfyportal.com/atomFeed.php'>
<link rel='next' href='http://www.syfyportal.com/atomFeed.php?page=4'>
<link rel='previous' href='http://www.syfyportal.com/atomFeed.php?page=2'>
<link rel='last' href='http://www.syfyportal.com/atomFeed.php?page=147'>

<link rel='canonical' href='http://smallbiztrends.com/2010/06/9-things-to-do-before-entering-social-media.html'>
<link rel='EditURI' type='application/rsd+xml' title='RSD' href='http://smallbiztrends.com/xmlrpc.php?rsd'>
<link rel='pingback' href='http://smallbiztrends.com/xmlrpc.php'>
<link rel='stylesheet' media='only screen and (max-device-width: 480px)' href='http://wordpress.org/style/iphone.css' type='text/css'>
<link rel='wlwmanifest' href='http://www.example.com/wp-includes/wlwmanifest.xml' type='application/wlwmanifest+xml'>

1. Title Tag

Near the very top of a web site’s source code you’ll find various meta tags — the standard ones being the Title, Description and Keyword tags. The title tag is technically not a meta tag, though it is commonly associated with them. The title tag plays such a large role in the indexing of your web site, that it is considered the most important of the three.

A page title is the first thing a search engine will look at when determining just what the particular page is about. It is also the first thing potential visitors will see when looking at your search engine listing.

It’s important to include a keyword or two in the title tag — but don’t go overboard – you don’t want to do what’s known as “keyword stuffing” which does nothing but make your web site look like spam. Most people will include either the company name, or title of the particular page here, as well.

2. Meta Tags

There are two primary meta tags in terms of SEO — the description and the keyword tag. It’s debatable whether the search engines use the description tag as far as ranking your results. However it is one of the more important tags because it is listed in your search result — it is what users read when your link comes up and what makes them decide whether or not to click on your link.

Be sure to include a few relevant keywords in this tag, but don’t stuff it with keywords either. The description tag should read like a sentence — not a keyword list.

Due to “keyword stuffing” many search engines now completely disregard the keyword tag. It is no longer nearly as important as it was years ago, however it doesn’t hurt to include them in your source code.

When creating your keyword list, you’ll want to think of the specific terms people will type in when searching for a site like yours. Just don’t go overboard — too many duplicates are not a good thing (as in “web designer” “web designers” “custom web designer” “html web designer” “your state here web designer” – you get the idea). Those are all basically the same, so pick one or two variations at the most and move onto the next keyword.

3. Proper Use of Heading Tags

This is a very important element to consider when writing out your site copy. Use of heading tags helps users, web browsers and search engines alike know where the major key points of your copy are.

Your main page title should use the <h1> tag — this shows what your page is about. Use of additional tags, such as <h2> and <h3> are equally important by helping to break down your copy. For one, you’ll see a visual break in the text. But as far as the search engines are concerned, it will automatically know what your topics are on a page. The various heading tags give a priority to the content and help index your site properly.

4. Alt Attributes on Images

Putting alt attributes on your images actually serves two purposes. In terms of SEO, putting a brief yet descriptive alt attribute along with your image, places additional relevant text to your source code that the search engines can see when indexing your site. The more relevant text on your page the better chance you have of achieving higher search engine rankings.

In addition, including image alt attributes help the visually impaired who access web sites using a screen reader. They can’t see the image, but with a descriptive alt attribute, they will be able to know what your image is.

5. Title Attributes on Links

Including title attributes on links is another important step that any good web site will have. That’s the little “tool tip” that pops up when you place your mouse over a link. These are especially important for image links, but equally useful for text links.

As a note, you should use descriptive text for your links. “Click here” doesn’t really tell a person – or more importantly, the search engines — what the link is. At the very least put a title tag that will explain that “Click Here” really means “Web Design Portfolio” for example. Better yet – make the main link text something like “View my web design portfolio” — this will give some value to the link showing that the resulting page is relevant to searches for portfolio’s.

6. XML Sitemap

My last post referenced the sitemaps used by web visitors to help them navigate through your site themselves. However, there’s another version — XML sitemaps — that are used by the search engines in order to index through your site, as well.

This list of ALL pages / posts / etc. of your site also includes information such as the date the page was last modified, as well as a priority number of what you feel the most important pages of your sites are. All elements that help the search engines properly find and link to all content of your site.

7. Relevant Content

Having content relevant to your main page or site topic is perhaps the most important SEO aspect of a page. You can put all the keywords you want in the meta tags and alt image tags, etc — but if the actual readable text on the page is not relevant to the target keywords, it ends up basically being a futile attempt.

While it is important to include as many keywords in your page copy as possible, it is equally as important for it to read well and make sense. I’m sure we’ve all seen keyword stuffed pages written by SEO companies that honestly don’t make much sense from the reader’s point of view.

When creating your site copy, just write naturally, explaining whatever information you’re discussing. The key is to make it relevant, and to have it make sense to the reader. Even if you trick the search engines into thinking your page is great — when a potential customer arrives at the site and can’t make heads or tails of your information and it just feels spammy to them — you can bet they’ll be clicking on the next web site within a matter of seconds.

8. Link Building

We’ve probably all heard of Google Page Rank — it seems to be every web site owner’s dream to have as high a page rank as possible. While the algorithm for determining page rank encompasses many elements, and is constantly changing, one item is the number of links pointing to your web site.

Now, you’ll want to steer clear of link farms and other spammy attempts at getting links to your site. However there are many reputable and niche directory sites that you can use to submit your web site, or specific blog articles to.

With genuine content — especially if you have a blog — you’ll be able to generate links with other web sites and blogs, as well. It’s somewhat of a give and take, in that if you link out to other sites, you’ll find sites linking back to you  — and hopefully see your page rank going up, as well!

9. Social Media

Although technically not SEO, Social Media is such a growing factor in getting your web site noticed, that it’s an important element to include in your plan.

Social media ranges from social networks like Twitter, Facebook and LinkedIn — to social bookmarking sites such as Delicious, Digg, StumbleUpon and many more. There is a lot of relationship building involved, but as you build your own networks and build quality content on your web site or blog, you’ll see traffic to your web site increasing, as well.

As with any relationship, it is a give and take. Don’t just expect to join a site like Twitter for the pure sake of pushing your content. That just won’t fly — your true intentions will stick out like a sore thumb and do nothing but turn people off.

Even if you are on the site purely for networking reasons, the key is to make friends. Help out members of your network if they ask for a “retweet” or Digg, give helpful advice if asked, etc. You’ll see the same in return.

If you write a great post and have built meaningful relationships with peers in your  niche, you’ll often find that friends will submit your posts and give you votes on the social bookmarking sites. The more votes you receive, the more likely your post is to be noticed by others and shared around, often resulting in additional link backs from other blogs, etc.

10. A Few SEO Don’ts — Flash and Splash

Along with any list of Do’s come the Don’ts. As far as SEO is concerned, two of these items are splash pages (often consisting of a flash animation) and all flash web sites.

Yes, flash is pretty! Full flash web sites can actually be amazing to look at — their own bit of interactive artwork. But unfortunately the search engines don’t get along well with Flash. Although there is talk of possible advancement in this area, for the most part the search engines cannot read Flash.

All that great content that you wrote for your site will not be seen by the search engines if it’s embedded into a Flash web site. As far as the search engines are concerned, your all flash web site might as well be invisible. And if the search engines can’t see your site content, a good chunk of potential customers will miss out on what you have to offer, too.

Equally as “pointless” are splash pages. Once very popular, the splash page should no longer be an important feature of any site. While splash pages used to serve as an introduction into a web site (often with a flash animation), it is no longer seen as helpful, and often times might actually annoy visitors.

For one — it’s an extra click to get into your content. Worse is when you don’t give a “skip intro” option or set of links into your main site content — because you’re essentially forcing your visitors to sit through the full animation. If you’re lucky, this will only annoy them… if not — they’ll just leave without giving your main web site a shot. And without an html link pointing into your site, the search engines have no way to continue either (unless you made use of a sitemap.xml file — but still…)

A good alternative to both issues is to make use of a flash header. There’s no problem to include a flash animation at the top of your main site, or as a feature within the content area, etc. Because this is an addition to your web site, as opposed to a full separate element.