HTML Useful HTML Meta Tags

by

Note the keywords “HTTP-EQUIV”, “Name” and “Content” are case-insensitive. Their values are also case-insensitive.

Tag Name

Example(s)

Description

Author

<META NAME=“AUTHOR” CONTENT=“Tex Texin”>

The author’s name.

 

cache-control

<META HTTP-EQUIV=“CACHE-CONTROL” CONTENT=“NO-CACHE”>

HTTP 1.1. Allowed values = PUBLIC | PRIVATE | NO-CACHE | NO-STORE.
Public – may be cached in public shared caches
Private – may only be cached in private cache
no-Cache – may not be cached
no-Store – may be cached but not archived

The directive CACHE-CONTROL:NO-CACHE indicates cached information should not be used and instead requests should be forwarded to the origin server. This directive has the same semantics as the PRAGMA:NO-CACHE.
Clients SHOULD include both PRAGMA:NO-CACHE and CACHE-CONTROL:NO-CACHE when a no-cache request is sent to a server not known to be HTTP/1.1 compliant.
Also see EXPIRES.
Note: It may be better to specify cache commands in HTTP than in META statements, where they can influence more than the browser, but proxies and other intermediaries that may cache information.

 

Content-Language

<META HTTP-EQUIV=“CONTENT-LANGUAGE”
CONTENT=“en-US,fr”>

Declares the primary natural language(s) of the document. May be used by search engines to categorize by language.

 

CONTENT-TYPE

<META HTTP-EQUIV=“CONTENT-TYPE”
CONTENT=“text/html; charset=UTF-8”>

The HTTP content type may be extended to give the character set. It is recommended to always use this tag and to specify the charset.

 

Copyright

<META NAME=“COPYRIGHT” CONTENT=“&copy; 2004 Tex Texin”>

A copyright statement.

 

DESCRIPTION

<META NAME=“DESCRIPTION”
CONTENT=“…summary of web page…”>

The text can be used when printing a summary of the document. The text should not contain any formatting information. Used by some search engines to describe your document. Particularly important if your document has very little text, is a frameset, or has extensive scripts at the top.

 

EXPIRES

<META HTTP-EQUIV=“EXPIRES”
CONTENT=“Mon, 22 Jul 2002 11:12:01 GMT”>

The date and time after which the document should be considered expired. An illegal EXPIRES date, e.g. “0”, is interpreted as “now”. Setting EXPIRES to 0 may thus be used to force a modification check at each visit.
Web robots may delete expired documents from a search engine, or schedule a revisit.

HTTP 1.1 (RFC 2068) specifies that all HTTP date/time stamps MUST be generated in Greenwich Mean Time (GMT) and in RFC 1123 format.
RFC 1123 format = wkday “,” SP date SP time SP “GMT”

wkday = (Mon, Tue, Wed, Thu, Fri, Sat, Sun)
date = 2DIGIT SP month SP 4DIGIT ; day month year (e.g., 02 Jun 1982)
time = 2DIGIT “:” 2DIGIT “:” 2DIGIT ; 00:00:00 – 23:59:59
month = (Jan, Feb, Mar, Apr, May, Jun, Jul, Aug, Sep, Oct, Nov, Dec)

 

Keywords

<META NAME=“KEYWORDS”
CONTENT=“sex, drugs, rock & roll”>

The keywords are used by some search engines to index your document in addition to words from the title and document body. Typically used for synonyms and alternates of title words. Consider adding frequent misspellings. e.g. heirarchy, hierarchy.

 

PRAGMA NO-CACHE

<META HTTP-EQUIV=“PRAGMA” CONTENT=“NO-CACHE”>

This directive indicates cached information should not be used and instead requests should be forwarded to the origin server. This directive has the same semantics as the CACHE-CONTROL:NO-CACHE directive and is provided for backwards compatibility with HTTP/1.0.
Clients SHOULD include both PRAGMA:NO-CACHE and CACHE-CONTROL:NO-CACHE when a no-cache request is sent to a server not known to be HTTP/1.1 compliant.
HTTP/1.1 clients SHOULD NOT send the PRAGMA request-header. HTTP/1.1 caches SHOULD treat “PRAGMA:NO-CACHE” as if the client had sent “CACHE-CONTROL:NO-CACHE”.
Also see EXPIRES.

 

Refresh

<META HTTP-EQUIV=“REFRESH”
CONTENT=“15;URL=http://www.I18nGuy.com/index.html”>

Specifies a delay in seconds before the browser automatically reloads the document. Optionally, specifies an alternative URL to load, making this command useful for redirecting browsers to other pages.

 

ROBOTS

<META NAME=“ROBOTS” CONTENT=“ALL”>

<META NAME=“ROBOTS” CONTENT=“INDEX,NOFOLLOW”>

<META NAME=“ROBOTS” CONTENT=“NOINDEX,FOLLOW”>

<META NAME=“ROBOTS” CONTENT=“NONE”>

CONTENT=“ALL | NONE | NOINDEX | INDEX| NOFOLLOW | FOLLOW | NOARCHIVE”
default = empty = “ALL”
“NONE” = “NOINDEX, NOFOLLOW”

The CONTENT field is a comma separated list:
INDEX: search engine robots should include this page.
FOLLOW: robots should follow links from this page to other pages.
NOINDEX: links can be explored, although the page is not indexed.
NOFOLLOW: the page can be indexed, but no links are explored.
NONE: robots can ignore the page.
NOARCHIVE: Google uses this to prevent archiving of the page. See http://www.google.com/bot.html

 

GOOGLEBOT

<META NAME=“GOOGLEBOT” CONTENT=“NOARCHIVE”>

In addition to the ROBOTS META Command above, Google supports a GOOGLEBOT command. With it, you can tell Google that you do not want the page archived, but allow other search engines to do so. If you specify this command, Google will not save the page and the page will be unavailable via its cache.
See Google’s FAQ.

HTML META TAG의 사용시 유의 사항

by

http://searchenginewatch.com/article/2067564/How-To-Use-HTML-Meta-Tags

에서 참조

Want top search engine rankings? Just add meta tags and your website will magically rise to the top, right? Wrong. Meta tags are one piece in a large algorithmic puzzle that major search engines look at when deciding which results are relevant to show users who have typed in a search query.

While there is still some debate about which meta tags remain useful and important to search engines, meta tags definitely aren’t a magic solution to gaining rankings in Google, Bing, Yahoo, or elsewhere – so let’s kill that myth right at the outset. However, meta tags help tell search engines and users what your site is about, and when meta tags are implemented incorrectly, the negative impact can be substantial and heartbreaking.

Let’s look at what meta tags are, what meta tags matter, and how to avoid mistakes when implementing meta tags on your website

HTML meta tags are officially page data tags that lie between the open and closing head tags in the HTML code of a document.

The text in these tags is not displayed, but parsable and tells the browsers (or other web services) specific information about the page. Simply, it “explains” the page so a browser can understand it.

Here’s a code example of meta tags:

< head>
< title>Not a Meta Tag, but required anyway < /title>
< meta name=“description” content=“Awesome Description Here”>
< meta http-equiv=“content-type” content=“text/html;charset=UTF-8”>
< /head>

For more on the history of meta tags, see our post “Death of a Meta Tag”.

The Title Tag

Although the title tag appears in the head block of the page, it isn’t actually a meta tag. What’s the difference? The title tag is a required page “element” according to the W3C. Meta tags are optional page descriptors.

To learn more about best practices for title tag element, our post “How to Write Title Tags For Search Engine Optimization” tells you everything you need to know.

The Description Meta Tag

This is what the description tag looks like:

< meta name=“description” content=“Awesome Description Here”>

Ideally, your description should be no longer than 155 characters (including spaces). However, check the search engine results page (SERP) of choice to confirm this. Some are longer and some are shorter. This is only a rule of thumb, not a definite “best practice” anymore.

The “description” meta tag helps websites in three important ways:

  • “Description” tells the search engine what your page or site is about: For the search engine to understand what your page is about, you need to write a good description. When Google’s algorithm decides a description is badly written or inaccurate, it will replace that description with its own version of what is on the page. Wouldn’t you prefer to describe your site to potential customers or visitors using your own words rather than leaving it in Google’s artificial hands? Look at this example and judge for yourself:

serp-good-bad-meta-description

  • “Description” helps with click through rates to your site: Writing a good description not only helps keep Google from rewriting it, but also helps you get good more people clicking through to your site. A well-written description not only tells users what is on your page, but also entices them to visit your site. A description is what shows up here in the search engine results. It is like good window dressing. Sites with poor descriptions will get less click throughs and the search engines will demote your site in favor of other sites.
  • “Description” helps with site rankings: The common belief (based on what Google said in 2009) is that nothing in the description will help you get rankings. However, I have seen evidence to the contrary. Is it heavily weighted? No, but if you want some value on a secondary keyword (say an –ing –ed or –s), use it here.

Two other quick notes on meta description tags:

  • Empty Descriptions: Can a description be empty? Yes. When it is empty Google and Bing will fill it in for you. In fact, sometimes (e.g., for blogs) you may prefer Google’s or Bing’s version. (Personally though, I always fill it in whenever possible, preferring my version to theirs, but if you have a small staff, this isn’t always practical.)
  • Quotes: Don’t use full quotation marks (“”) in your description. It will likely cut off your description. Use single quotes to avoid this issue.

The Keywords Meta Tag

A long time ago in a galaxy far, far away, the “keywords” meta tag was a critical element for early search engines. Much like the dinosaurs, this tag is a fossil from ancient search engine times.

The only search engine that looks at the keywords anymore is Microsoft’s Bing – and they use it to help detect spam. To avoid hurting your site, your best option is to never add this tag.

Or, if that’s too radical for you to stomach, at least make sure you haven’t stuffed 300 keywords in the hopes of higher search rankings. It won’t work. Sorry.

If you already have keyword meta tags on your website, but they aren’t spammy, there’s no reason to spend the next week hurriedly taking them out. It’s OK to leave them for now – just take them out as you’re able, to reduce page weight and load times.

Other Meta Tags

There are many other meta tags, but none are really considered useful nowadays. Many of the tags that we used did things like:

  • Told the spider when to come back
    < meta name=“revisit-after” content=“30 days”>
  • Told the browser the distribution
    < meta name=“distribution” content=“web”>
  • Told the page to refresh
    < meta http-equiv=“refresh” content=“30”>
  • Told the page to redirect/refresh
    < meta http-equiv=“refresh” content=“x_seconds; url=http://www.yourhost.com/pagetosendto.html”>

We don’t use these anymore, either because there are better ways (such as schema tagging or server side methods) or because the engines they used to work on are no longer in existence or Google has explicitly told us they are not great ideas (such as redirects at the page level).

NOTE: Schema tagging and rich data snippets are single-handedly the most important (and somewhat quietly announced) change to how your site interacts with the search engines and the search spiders. Learn it. Know it. Implement it.

Robots Meta Tag

The robots tag is still one of the most important tags. Not so much for the proper implementation, but the improper.

The robots meta tag lets you specify that a particular page should not be indexed by a search engine or if you do or do not want links on the page followed.

Believe it or not, it is still common for a site to be deindexed because someone accidentally added a noindex tag to the entire site. Understanding this tag is vitally important.

Here are the four implementations of the Robots Meta Tag and what they mean.

< META NAME=“ROBOTS” CONTENT=“NOINDEX, NOFOLLOW”>

  • This means: “Do not Index this page. Do not follow the links on the page.” Your page will drop OUT of the search index AND your links to other pages will not be followed. This will break the link path on your site from this page to other pages.

    This tag is most often used when a site is in development. A developer will noindex/nofollow the pages of the site to keep them from being picked up by the search engines, then forget to remove the tag. When launching your new website, do not trust it has been removed. DOUBLE CHECK!

< META NAME=“ROBOTS” CONTENT=“INDEX, NOFOLLOW”>

  • This means: “Do Index this page. Do not follow the links on the page.” Your page WILL be in the index AND your links to other pages will not be followed. This will break the link path on your site from this page to other pages.

< META NAME=“ROBOTS” CONTENT=“NOINDEX, FOLLOW”>

  • This means: “Do not Index this page. Do follow the links on the page.” Your page will drop OUT of the index BUT your links to other pages will be followed. This will NOT break the link path on your site from this page to other pages.

< META NAME=“ROBOTS” CONTENT=“INDEX, FOLLOW”>

  • This means: “Do Index this page. Do follow the links on the page.” This means your page WILL be in the index AND your links to other pages will be followed. This will NOT break the link path on your site from this page to other pages.

NOTE: The robots tag may be ignored by less scrupulous spiders.

The Charset Tag

Finally, all sites must validate charset. In the U.S., that is the UTF-8 tag. Just make sure this is on your page if you’re delivering HTML using English characters.

< meta http-equiv=“Content-Type” content=“text/html; charset=UTF-8”>

Conclusion

While meta tags aren’t the magical solution that you may have heard, they still play an important role in helping your site get found in search engines. Enjoy your metas!

Below are some additional resources to help you on your path to search engine optimization

HTML META TAG의 사용시 유의 사항

by

http://searchenginewatch.com/article/2067564/How-To-Use-HTML-Meta-Tags

에서 참조

Want top search engine rankings? Just add meta tags and your website will magically rise to the top, right? Wrong. Meta tags are one piece in a large algorithmic puzzle that major search engines look at when deciding which results are relevant to show users who have typed in a search query.

While there is still some debate about which meta tags remain useful and important to search engines, meta tags definitely aren’t a magic solution to gaining rankings in Google, Bing, Yahoo, or elsewhere – so let’s kill that myth right at the outset. However, meta tags help tell search engines and users what your site is about, and when meta tags are implemented incorrectly, the negative impact can be substantial and heartbreaking.

Let’s look at what meta tags are, what meta tags matter, and how to avoid mistakes when implementing meta tags on your website

HTML meta tags are officially page data tags that lie between the open and closing head tags in the HTML code of a document.

The text in these tags is not displayed, but parsable and tells the browsers (or other web services) specific information about the page. Simply, it “explains” the page so a browser can understand it.

Here’s a code example of meta tags:

< head>
< title>Not a Meta Tag, but required anyway < /title>
< meta name=“description” content=“Awesome Description Here”>
< meta http-equiv=“content-type” content=“text/html;charset=UTF-8”>
< /head>

For more on the history of meta tags, see our post “Death of a Meta Tag”.

The Title Tag

Although the title tag appears in the head block of the page, it isn’t actually a meta tag. What’s the difference? The title tag is a required page “element” according to the W3C. Meta tags are optional page descriptors.

To learn more about best practices for title tag element, our post “How to Write Title Tags For Search Engine Optimization” tells you everything you need to know.

The Description Meta Tag

This is what the description tag looks like:

< meta name=“description” content=“Awesome Description Here”>

Ideally, your description should be no longer than 155 characters (including spaces). However, check the search engine results page (SERP) of choice to confirm this. Some are longer and some are shorter. This is only a rule of thumb, not a definite “best practice” anymore.

The “description” meta tag helps websites in three important ways:

  • “Description” tells the search engine what your page or site is about: For the search engine to understand what your page is about, you need to write a good description. When Google’s algorithm decides a description is badly written or inaccurate, it will replace that description with its own version of what is on the page. Wouldn’t you prefer to describe your site to potential customers or visitors using your own words rather than leaving it in Google’s artificial hands? Look at this example and judge for yourself:

serp-good-bad-meta-description

  • “Description” helps with click through rates to your site: Writing a good description not only helps keep Google from rewriting it, but also helps you get good more people clicking through to your site. A well-written description not only tells users what is on your page, but also entices them to visit your site. A description is what shows up here in the search engine results. It is like good window dressing. Sites with poor descriptions will get less click throughs and the search engines will demote your site in favor of other sites.
  • “Description” helps with site rankings: The common belief (based on what Google said in 2009) is that nothing in the description will help you get rankings. However, I have seen evidence to the contrary. Is it heavily weighted? No, but if you want some value on a secondary keyword (say an –ing –ed or –s), use it here.

Two other quick notes on meta description tags:

  • Empty Descriptions: Can a description be empty? Yes. When it is empty Google and Bing will fill it in for you. In fact, sometimes (e.g., for blogs) you may prefer Google’s or Bing’s version. (Personally though, I always fill it in whenever possible, preferring my version to theirs, but if you have a small staff, this isn’t always practical.)
  • Quotes: Don’t use full quotation marks (“”) in your description. It will likely cut off your description. Use single quotes to avoid this issue.

The Keywords Meta Tag

A long time ago in a galaxy far, far away, the “keywords” meta tag was a critical element for early search engines. Much like the dinosaurs, this tag is a fossil from ancient search engine times.

The only search engine that looks at the keywords anymore is Microsoft’s Bing – and they use it to help detect spam. To avoid hurting your site, your best option is to never add this tag.

Or, if that’s too radical for you to stomach, at least make sure you haven’t stuffed 300 keywords in the hopes of higher search rankings. It won’t work. Sorry.

If you already have keyword meta tags on your website, but they aren’t spammy, there’s no reason to spend the next week hurriedly taking them out. It’s OK to leave them for now – just take them out as you’re able, to reduce page weight and load times.

Other Meta Tags

There are many other meta tags, but none are really considered useful nowadays. Many of the tags that we used did things like:

  • Told the spider when to come back
    < meta name=“revisit-after” content=“30 days”>
  • Told the browser the distribution
    < meta name=“distribution” content=“web”>
  • Told the page to refresh
    < meta http-equiv=“refresh” content=“30”>
  • Told the page to redirect/refresh
    < meta http-equiv=“refresh” content=“x_seconds; url=http://www.yourhost.com/pagetosendto.html”>

We don’t use these anymore, either because there are better ways (such as schema tagging or server side methods) or because the engines they used to work on are no longer in existence or Google has explicitly told us they are not great ideas (such as redirects at the page level).

NOTE: Schema tagging and rich data snippets are single-handedly the most important (and somewhat quietly announced) change to how your site interacts with the search engines and the search spiders. Learn it. Know it. Implement it.

Robots Meta Tag

The robots tag is still one of the most important tags. Not so much for the proper implementation, but the improper.

The robots meta tag lets you specify that a particular page should not be indexed by a search engine or if you do or do not want links on the page followed.

Believe it or not, it is still common for a site to be deindexed because someone accidentally added a noindex tag to the entire site. Understanding this tag is vitally important.

Here are the four implementations of the Robots Meta Tag and what they mean.

< META NAME=“ROBOTS” CONTENT=“NOINDEX, NOFOLLOW”>

  • This means: “Do not Index this page. Do not follow the links on the page.” Your page will drop OUT of the search index AND your links to other pages will not be followed. This will break the link path on your site from this page to other pages.

    This tag is most often used when a site is in development. A developer will noindex/nofollow the pages of the site to keep them from being picked up by the search engines, then forget to remove the tag. When launching your new website, do not trust it has been removed. DOUBLE CHECK!

< META NAME=“ROBOTS” CONTENT=“INDEX, NOFOLLOW”>

  • This means: “Do Index this page. Do not follow the links on the page.” Your page WILL be in the index AND your links to other pages will not be followed. This will break the link path on your site from this page to other pages.

< META NAME=“ROBOTS” CONTENT=“NOINDEX, FOLLOW”>

  • This means: “Do not Index this page. Do follow the links on the page.” Your page will drop OUT of the index BUT your links to other pages will be followed. This will NOT break the link path on your site from this page to other pages.

< META NAME=“ROBOTS” CONTENT=“INDEX, FOLLOW”>

  • This means: “Do Index this page. Do follow the links on the page.” This means your page WILL be in the index AND your links to other pages will be followed. This will NOT break the link path on your site from this page to other pages.

NOTE: The robots tag may be ignored by less scrupulous spiders.

The Charset Tag

Finally, all sites must validate charset. In the U.S., that is the UTF-8 tag. Just make sure this is on your page if you’re delivering HTML using English characters.

< meta http-equiv=“Content-Type” content=“text/html; charset=UTF-8”>

Conclusion

While meta tags aren’t the magical solution that you may have heard, they still play an important role in helping your site get found in search engines. Enjoy your metas!

Below are some additional resources to help you on your path to search engine optimization

CSS @import 와 < link > 의 사용 유의점

by

http://www.cssnewbie.com/css-import-rule/

에서 참조

Like most cool things in CSS, this one comes with a couple of caveats:

  • The @import rule isn’t recognized by the really old browsers out there… Netscape Navigator 4 skips over @imports entirely, and Internet Explorer 4 ignores them if you don’t use the (entirely optional, but generally used) parentheses. Of course, not too many people these days use either of these archaic browsers. And this problem can actually be useful if you’d like to hide some or all of your CSS from the browsers that can’t really support it.
  • Your @imports must come before all other content in your CSS. And I mean all of your content. Even putting comments before the @import tag will cause your imports to fail. So be sure to do your imports before you do anything else.
  • Internet Explorer (you knew it’d come up eventually) doesn’t deal well with specifying media types – it chokes. Basically, IE (versions 4-7) try to read the media type like it were part of the file name, causing the whole thing to come crashing down. As such, if you don’t want your CSS to have a default media type of “all,” you’re probably better off using a combination of the <link> tag and imports – specifying a media type in your link, and then importing the appropriate CSS within the file you’re linking to. I haven’t yet heard if IE8 suffers from this same problem (if you happen to know, please enlighten me in the comments!).

CSS @import 와 < link > 의 사용 유의점

by ⋅ Link

http://www.cssnewbie.com/css-import-rule/

에서 참조

Like most cool things in CSS, this one comes with a couple of caveats:

  • The @import rule isn’t recognized by the really old browsers out there… Netscape Navigator 4 skips over @imports entirely, and Internet Explorer 4 ignores them if you don’t use the (entirely optional, but generally used) parentheses. Of course, not too many people these days use either of these archaic browsers. And this problem can actually be useful if you’d like to hide some or all of your CSS from the browsers that can’t really support it.
  • Your @imports must come before all other content in your CSS. And I mean all of your content. Even putting comments before the @import tag will cause your imports to fail. So be sure to do your imports before you do anything else.
  • Internet Explorer (you knew it’d come up eventually) doesn’t deal well with specifying media types – it chokes. Basically, IE (versions 4-7) try to read the media type like it were part of the file name, causing the whole thing to come crashing down. As such, if you don’t want your CSS to have a default media type of “all,” you’re probably better off using a combination of the <link> tag and imports – specifying a media type in your link, and then importing the appropriate CSS within the file you’re linking to. I haven’t yet heard if IE8 suffers from this same problem (if you happen to know, please enlighten me in the comments!).