As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.
Closed 10 years ago.
There are <meta> tags and other things you can place in the <head> of your HTML document. What <meta> tags etc. and best practices do you make use of in your HTML document to make it more accessible, searchable, optimized etc.
In my case:
Title (should do [Section Name - Site Name] for better SEO)
Meta tag for Content-type, description, and keywords
Link to stylesheet(s) (don't forget to specify the media="").
<script> tag that links to external javascript files.
All tags should follow the W3C's standard. The W3C site has a more technical and detailed section about the HTML <head> section.
Do your users a favor and make their IE engine switch to Chrome one when Chrome Frame is installed :)
<meta http-equiv="X-UA-Compatible" content="chrome=1">
You'll want to put SCRIPT elements at the end of the page before the close of the BODY element. See http://developer.yahoo.com/performance/rules.html#js_bottom for details.
Besides the usual doctype, title, etc, I will try and provide you with some things I have learned and implemented that might be of assistance to you.
Firstly, remember that the title, for best user experience should have the most relevant sub section first. This is because it is usually displayed in the title bar/tab list/bookmark name. Consider this page title...
Stack Overflow - HTML head best practices
becomes Stack Overflow... (munched to save room in tab bar/bookmark list)
Now if you had 5 Stackoverflow tabs open (as I often do :P) then how would the user know which one is which?
Also note with CSS the cascading nature... So the order of these will matter. Same with Javascript, any dependencies on other external sites must be allowed for. I put mine in the head and havn't noticed a performance decrease. I put them there because it to me looks more tidy and logical. Though some other people will recommend putting the <script src=""> links in just before </body> so the browser won't temporarily stall... Just use whatever works best for your site.
Also a Meta tag of 'rating' with 'general' let's Net Filtering software know your site is safe for viewers of all ages (as long as it is, of course!)
I also use..
<link rel="start" href="/" title="Home" />
to let the browser know where the home of my site is. And for any browser prefetching systems, though I believe these are yet to be implemented by browsers without assistance of plugins.
Also consider the 'next' and 'prev' <link rel=""> if your pages are in a sequence of sorts.
First, make sure the < !DOCTYPE is the verry first element of the document, i.e. no space, tab or corrupted BOM marker.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!-- declare all page rendering and programmatic related tags -->
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<!-- Care about IE ? -->
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<!-- globalise scripting and styling content language -->
<meta name="Content-Type-Script" content="text/javascript" />
<meta name="Content-Type-Style" content="text/css" />
<!-- title tag is MANDATORY -->
<title>Short and relevant, about 64 characters/spaces</title>
<!-- declare all CACHE controll -->
<meta name="ROBOTS" content="NOINDEX, NOFOLLOW" />
<meta name="revisit-after" content="7 days" />
<!-- declare all content description tags -->
<meta http-equiv="PICS-Label" content='(PICS-1.1 "http://www.gcf.org/v2.5" labels on "1994.11.05T08:15-0500" until "1995.12.31T23:59-0000" for "http://w3.org/PICS/Overview.html" ratings (suds 0.5 density 0 color/hue 1))'>
<!-- language specific keywords -->
<meta name="keywords" lang="en-us" content="vacation, Greece, sunshine" />
<!-- For french example -->
<meta name="keywords" lang="fr" content="vacances, Grèce, soleil" />
<meta name="description" content="about 255 characters/spaces WORDS relevant to the content of the actual page" />
<meta name="Abstract" content="about 96 characters/spaces PARAGRAPH describing the actual page content within your site" />
<!-- declare all situationnal and external relativity related tags -->
<link rel="DC.identifier" type="text/plain" href="http://www.ietf.org/rfc/rfc1866.txt" />
<link rel="start" href="/" title="Home" />
<link rel="prev" href="../" title="Parent section" />
<!-- declare all page rendering cascading style sheets in order of incidence -->
<link rel="stylesheet" type="text/css" href="globaly-used.css" />
<link rel="stylesheet" type="text/css" href="specificly-used.css" />
<!-- declare all page rendering specific cascading style i.e. IE only, hacks etc -->
<link rel="stylesheet" type="text/css" href="more-specificly-used.css" />
<link rel="stylesheet" type="text/css" href="i-love-ie.css" />
<!-- not relevent to subject, declare all javascripts AFTER css linking -->
</head>
<body>
</body>
</html>
I didn't see this mentioned: the <base> tag, if specified, should be the first element in <head>. (The base URI of the document is assumed to be . before/if not specified.)
IMHO, the two most important child tags of <head> are <title> and the Content Type meta tag. Search engines actively look at <title>. Whereas the other meta tags are often ignored. As a multi-lingual web user - I cannot stress more the importance of adding the Content Type tag because without it, the browser needs to autodetect the character set of the web page and this operation is often flaky. The result ends up being that various characters are not rendered correctly to the user or sometimes none at all in the case of Japanese or Chinese.
Here is an snippet of some of the header code from a current project of mine:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Reports Blah Blah</title>
<meta name="ROBOTS" content="NOINDEX, NOFOLLOW" />
<meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8" />
...
</head>
There is a related question here that may help add some light regarding the order of the tags.
Generally my pages include the following:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>...</title>
<meta name="Description" ...>
<meta name="Keywords" ...>
<meta name="Copyright" ...>
<meta name="Author" ...>
<meta name="Language" ...>
<style type="text/css" ...>
DocType is important to enforce strict rendering (No quirks mode) by the browser. You may want to use XHTML instead - as long as there is one there. I add Copyright and Author purely because I design and create the pages for other companies. Description is for SEO, and Language is for the browser (if it supports it).
I don't believe it makes to much of a difference which meta tag comes first, or whether the title should be above. What counts in most cases is that it exists on the page, and has the correct content.
As far as I'm aware, most search engines ignore any "keywords" or "description" meta tags, instead preferring to read the content of the document.
Getting the page title right however, is of extreme importance.
Title, meta tags for keywords, content-type (if not explicitly set by the web server), and any CSS to be applied to the page.
Declaring the CSS up front allows the browser to lay out the page more efficiently (see http://developer.yahoo.com/performance/rules.html#css_top).
I would add an important note: if you're using IE's meta X-UA-Compatible tag to switch rendering modes for Interet Explorer, you must insert it as the first item in HEAD:
<head>
<meta http-equiv="X-UA-Compatible" content="IE=7" />
<title>Page title</title>
...etc
</head>
In addition to the answers above I use the Dublin Core initiative meta-tags.
They are very useful for actual content/papers etc.
<meta name="DC.abstract" content="Document abstract" />
<meta name="DC.audience" content="Target audience" />
etc.
Related
I'm pretty new to coding and I wanted to try out creating a website on my own. I'm just not too sure about how to use meta tags. Can I put all the attributes I want to use in one tag, are multiple required or does the amount depend on which attributes I plan to use?
I've read a little of the documentation here: https://www.w3.org/TR/2014/REC-html5-20141028/document-metadata.html#the-meta-element, and a couple questions on this site but I still don't have a clear understanding of how many to use.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Home</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link type="text/css" rel="stylesheet" href="standard-theme.css" />
</head>
I just want a clear understanding of how many meta tags should be used in my document. Any help is greatly appreciated.
Meta tags describe the meta of your page
It tells the browser, screen readers and search engines how to interpret your page, what kind of information to expect and how it should work on mobile phones, among other things.
Mozilla has some good documentation about the <meta /> tag. Have a lookt at the possible properties and their values to get a better understanding.
Some interesting things to note:
Multiple meta tags can be used.
The charset property declares the character encoding of the page
The name property can be used together with the content property.
Each meta tag describes a separate meta property of the page. Most meta properties are identified by the name=<propertyName> part, which you can NOT pass multiple times.
Common examples:
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="theme-color" content="#000000" />
<meta name="description" content="This page contains information about X and Y" />
<meta> tag gives the specific information about the html document. You have to use multiple tags describe each metadata you use in the document depending on the requirement.
ex: page description, keywords, author of the document, last modified, etc
<meta> has multiple uses and you can find more information on W3Schools here
I´m researching about HTML5 and have maybe a stupid doubt:
Can I close the tags? Will this affect the functionality?
Examples:
HTML5
<!DOCTYPE html>
// Is the same <!DOCTYPE html /> ?
<html lang="en">
// Is the same <html lang="en" /> ?
<meta charset =" utf-8">
Is the same <meta charset =" utf-8" /> ?
I ask this because in ALL the books I read show tags without closing slash. I understand the "new manner", the lack of need, etc, etc, etc. I just want to know if the use of closed tags could be a problem or goes against the standard.
In HTML5 you can still close the tags as in XML. The change that was made in HTML5 was that it is now valid to not close single element tags such as <input>, <meta>, etc., but it's completely optional.
<!-- valid -->
<meta charset="utf-8"/>
<!-- also valid -->
<meta charset="utf-8">
Please clarify what is the difference between <meta name="title"> tag and <title></title> tag.
<title>Page title</title>
<meta name="title" content="Page title">
If both are used, which is most prioritised?
I observed some sites that have both <meta name="title"> and <title></title> tags and both are the same, which is expected, please confirm?
If we didn't use <meta name="title"> tag title, would I have any problem regarding SEO?
<head>
<title>Stackoverflow</title>
<meta name="description" content="free source">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
</head>
<title> is a required element on any HTML page to be valid markup, and will be what is displayed as the page title in your browser's tab/window title. For instance, try inputting the following markup into the W3C Markup Validator (via "Direct Input"):
<!DOCTYPE html>
<html>
<head></head>
<body></body>
</html>
This will produce an error that there is no instance of <title> in <head>.
The <meta name="title" content="page-title"> element is just that -- metadata about your page, that any client browser or web crawler can use or not use as it wants. Whether it is used or not will depend on the crawler/client in question, as none of them are required to look for or not look for it.
So in short, you should have a <title> element if you want valid markup. The <meta> tag is going to depend on whether you want to provide for crawlers/clients, and you'd probably have to check documentation for if a particular crawler uses it.
The first is to display page name.
<title> This will be displayed in the title bar of your Browser. </title>
Second is for crawling.
<meta name="title" content="Whatever you type in here will be displayed on search engines.">
The <title> tag will actually display the page name at the top of the page. The <meta> tag, while used for crawling, could be omitted and the page still should crawl over the <title> tag. I think you could just stick with the <title> tag if you wanted.
I have noticed that for some blog sites google will use
<meta name="description"
for a general description of the site.
So, if you have a blog site where the home page also shows the latest blog post you don't want the site description to be the same as the blog post name defined in
So I'd try meta description for an overview and
<title>
for specific content.
I use a bunch of semantic markup on my site, from schema.org, Dublin Core, OGP, FBML, data-vocabulary. But since I use HTML5, the W3C-validator doesn't like all of XMLNS markups, like
xmlns:schema="http://schema.org/"
xmlns:dcterms="http://purl.org/dc/terms/"
xmlns:og="http://ogp.me/ns/book#"
xmlns:fb="http://www.facebook.com/2008/fbml"
xmlns:v="http://rdf.data-vocabulary.org/#"
The question is: if I don't use XMLNS (or prefix:dcterms etc), would search engines still understand the semantic of the site? Yes, Google Rich Snippets testing tool still shows all of markups … But the question still remains.
Such markup is used:
<html>
<head>
<meta property="og:title" content="Book-Title" />
<meta name="dcterms.title" lang="de-DE" content="Book-Title"/>
</head>
<body>
<div itemscope itemtype="http://schema.org/Book">
<h2 itemprop="name">Book-Title</h2>
</div>
</body>
</html>
You are using three different ways to specify metadata here:
meta-name
Your use of Dublin Core in <meta name="dcterms.title" lang="de-DE" content="Book-Title"/> is fine as it is, because you use a registered HTML5 name value here.
Microdata with schema.org vocabulary
Your use of Microdata with the schema.org vocabulary is fine as it is, because you specify the full URI:
<div itemscope itemtype="http://schema.org/Book">
<h2 itemprop="name">Book-Title</h2>
</div>
RDFa with OGP vocabulary
With <meta property="og:title" content="Book-Title" /> you are using the RDFa syntax (because of the property attribute), therefore you’d need to specify the URI, as og is a prefix here.
You could use a full URI instead of the prefix, e.g.:
<meta property="http://ogp.me/ns#title" content="Book-Title" />
You could specify the prefix in the html or head element with the prefix attribute:
<head prefix="og: http://ogp.me/ns#">
<meta property="og:title" content="Book-Title" />
</head>
Or you may use the meta-name instead of RDFa (in the same way you used the Dublin Core dcterms.title), because og:title is a registered HTML5 name value (depends on your use case if you may want to stop using RDFa here):
<meta name="og:title" content="Book-Title" />
I am using DreamWeaver to code xHtml docs. in the program the code is valid but when I upload it in the inspect element I see double <head> tags and when I right-click to see the source file it seems o.k.
Is it because I'm using dreamweaver? what can be wrong?
the first error is : "Extra <html> encountered. Migrating attributes back to the original <html> element and ignoring the tag." - in line 3
The code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="the content of my doc" />
<meta name="description" content="this is an example document" />
<link rel="alternate" type="application/rss+xml" title="rss feeds" href="linkto/xml/feeds.xml" />
<!-- scripts -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<title>The Title</title>
</head>
<body>
<!-- content -->
</body>
</html>
Thank you very much.
No problem in Chromium 5.0.307.9 (Developer Build 39052) under Linux. I can't test it in Safari now.
EDIT: Proposed test case had nothing to do with this problem, neither could see any extra <head> tags. However, I looked at the Developer Tools of Safari and Chrome under Windows and Firebug in Firefox and all three rendered the DOM incorrectly. Just have a look at this picture and see that the first <link> tag has jumped into the body.
This problem also has nothing to do with Javascript because when turning off Javascript the result is the same, even more clear when comparing with the source code. Strange I didn't notice this under Linux.
The Developer Tools of the WebKit browsers give an even clearer picture (also notice the jQuery error message). I suspect the Unicode Byte-Order Mark (BOM) at the beginning of the file causing the problem: as you can see the BOM is moved to the <body> of the document, perhaps dragging several elements in the <head> with it. But also the unclosed <link> elements, as shown by the W3C validator, might give some issues, although browsers usually handle this without any problems. First get rid of the BOM in your file and see if the problem persists.
And I see another error: those tags beginning with <meta ... are called meta tags, not "meat tags". ;-)
You should have a title element what you write between
the <title></title> tags will been displayed in top bar of your browser
Just make sure your
</head>
tag has the slash in the actual file you're working on. That's an easy typo.
To remove BOM from your document, you can use this php function:
function removeBOM($str=""){
if(substr($str, 0,3) == pack("CCC",0xef,0xbb,0xbf)) {
$str=substr($str, 3);
}
return $str;}