Is it best to use H1 or H2 tags for your main headings

poksa Banned

Messages:: 314

Likes Received:: 7

Best Answers:: 0

Trophy Points:: 0

#21

In SEO we still give importance for H1 tags... but we can proved if it's important or not through Test, so we can find our own answers to this faq.

poksa, Jul 25, 2007 IP

on-on Peon

Messages:: 95

Likes Received:: 11

Best Answers:: 0

Trophy Points:: 0

#22

I can't imagine why Google would suddenly stop ignoring correctly structured semantic content. That doesn't make any sense.

on-on, Jul 25, 2007 IP

uca Well-Known Member

Messages:: 2,242

Likes Received:: 69

Best Answers:: 0

Trophy Points:: 155

#23

Now that I think about it again, I remember a rumour, something like 3 years ago, about SEs devalueing h1s in favour of H2s because spammers were abusing their use.

But it was never proven, so...h1!

uca, Jul 25, 2007 IP

trichnosis Prominent Member

Messages:: 13,785

Likes Received:: 333

Best Answers:: 0

Trophy Points:: 300

#24

what is your information sourse for this? i dont think that google is ignoring h1 tag

trichnosis, Jul 25, 2007 IP

Dan Schulz Peon

Messages:: 6,032

Likes Received:: 436

Best Answers:: 0

Trophy Points:: 0

#25

It's not. Headings are used to identify the topic of a page, or a portion of a page. The problem is that so many people abuse headings (multiple H1 per page for example, or stuffing so many keywords into them that it devalues the keywords in them) that it's not even funny. Aside from the examples I gave above, another favorite "misuse" of mine is using the H1 for the site title (which it should never be used for).

Here's the basic rule regarding headings. H1 is for the page title, not the site title. H2-H6 are to be used as appropriate to identify the major sections of the page. If you have only one nested H2 or H3 for example, chances are very good that you don't need it (use at least two, or none at all).

I'm not saying this just from a search-engine's perspective (and when you think about it, a search engine has no real perspective, it just gobbles up your text like Goldilocks ate up Baby Bear's porridge), but also from a semantic perspective. HTML elements should be used for the job they were intended for. Headings, for example, as I already said, are to be used to mark up an identify the various sections of a Web page's CONTENT (meaning no heading for the menu, footer, and so forth). Paragraphs should be marked up as paragraphs using the P element, lists (including menus) should be marked up as such.

Another blatant myth is the SEO "content first" philosophy. While it's true that having your content near the top can help you rank well in the search engines, you shouldn't sacrifice your site's usability to people with screen readers, mobile devices, aural devices or users of text-based browsers either. As long as the menu and header are short enough (and don't have enough keywords to not only dilute their value but also to gag a maggot) then your page content will be fine.

Also make sure that your HTML, CSS and (any) JavaScript are separated in external files that link to the Web page (in other words, always keep your stylesheets and scripts in external files).

If you want an example of what I mean, feel free to study the example I've provided below (bear in mind the CSS is embedded for demonstration purposes only - this example was geared towards designers, not search engines).


<!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" xml:lang="en" lang="en">
<head>
	<title>Sample Two Column Layout</title>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<meta http-equiv="imagetoolbar" content="no" />
	<meta name="keywords" content="Keywords go here" />
	<meta name="description" content="A description of this page goes here." />
	<style type="text/css" media="screen,projection">
	
	/* let's start by declaring everything that needs to be applied globally first, before we get to the various classes and IDs */

	* {																			/* this is the universal selector - use it to set ONLY the margins and padding */
		margin: 0;
		padding: 0;
	}

	body {
		background: #EEE;
		color: #000;
		font: normal 85%/140% tahoma, verdana, arial, helvetica, sans-serif;	/* most people who use %s for text sizes prefer 100%/120% but I've found that 85%/140% works better for people with large monitors with high .dpi settings */
		letter-spacing: 1px;
	}

	h1, h2, h3, h4, h5, h6 {
		font-family: georgia, garamond, "times new roman", times, serif;
		font-weight: bold;
	}
	
	h1 {
		background: #FFF;
		color: inherit;
		font-size: 1.75em;
		line-height: 1.8em;
		text-indent: 10px;
	}

	h2 {
		border-bottom: 1px solid #000;
		font-size: 1.5em;
		line-height: 1.55em;
	}

	h3 {
		font-size: 1.05em;
		line-height: 1.1em;
	}

	h4 {
		font-size: 0.95em;
		line-height: 1em;
	}

	h5 {
		font-size: 0.85em;
		line-height: 0.9em;
	}

	h6 {
		font-size: 0.75em;
		line-height: 0.8em;
	}

	img {
		border: 0;																/* this squashes a Firefox bug */
		vertical-align: bottom;													/* this squashes an Internet Explorer bug */
	}

	table {																		/* I'd like to have all the browsers on the same page with regard to tables - this does it */
		border-collapse: collapse;
		empty-cells: show;
		table-layout: fixed;
	}

	/* ok, now with that out of the way, let's deal with the layout */

	#header {
		background: #FCF;
		color: inherit;
		height: 80px;
		overflow: hidden;														/* use this to close a gap in IE */
	}

	#menu {
		float: left;															/* everything after this will wrap around the list */
		list-style: none;
		margin: 0 0.5em 0.5em 0;												/* right and bottom margins are helpful */
		width: 10em;															/* whenever you float something, give it a width */
	}
		#menu li {
			margin-bottom: 2px;													/* I like to leave some space between the list items */
		}
			#menu li a {
				background: #CFC;
				border-top: 1px solid #CCF;										
				border-right: 1px solid #000;
				border-bottom: 1px solid #000;
				border-left: 1px solid #CCF;
				color: #000;
				display: block;													/* lets you click on the whole area, not just the text */
				padding: 0.25em 0;												/* if you set padding on here, do not set the left and right when the width has been set to 100% */
				text-decoration: none;
				text-indent: 0.5em;												/* instead of padding, set the text indent instead :) */
				width: 100%;													/* the display block technique will not work in IE unless a width is set */
			}

			#menu li a:hover {													/* aside from changing the background color, all this does is reverse the button effect created by the border colors */
				background: #FCC;
				border-top: 1px solid #000;
				border-right: 1px solid #CCF;
				border-bottom: 1px solid #CCF;
				border-left: 1px solid #000;
				color: inherit;
			}
		
		#content {
			margin-left: 10.5em;												/* makes room on the left side for the menu to create some white space underneath */
		}
			#content .section {													/* this gets styled instead of the #content selector (background, colors, padding, etc...) */
				background: #FFD;
				color: inherit;
				margin: 0.5em 0;
				padding: 0 10px;
			}
				#content .section p {
					padding: 0.25em 0;
				}

		#footer {
			background: #8EF;
			clear: left;														/* since the footer was floated to the left, it gets cleared from the left; floats have two values - left and right; clear has three: left, right, both */
			color: inherit;
			padding: 0.5em 0;
			text-align: center;
		}

	</style>
</head>
<body>
<div id="header">
	<img src="#" width="250" height="80" alt="Web Site Title" title="" />		<!-- the empty title attribute is required since IE treats alt="" as title="" -->
</div>
<ul id="menu">
	<li><a href="#">Menu Link</a></li>
	<li><a href="#">Menu Link</a></li>
	<li><a href="#">Menu Link</a></li>
	<li><a href="#">Menu Link</a></li>
	<li><a href="#">Menu Link</a></li>
	<li><a href="#">Menu Link</a></li>
	<li><a href="#">Menu Link</a></li>
</ul>
<div id="content">
	<h1>Web Page Title</h1>
	<div class="section">
		<h2>Section Title</h2>
		<p>
			Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In quis erat. Nulla
			auctor consectetuer erat. Sed est tellus, laoreet et, faucibus et, cursus ut,
			lectus. Nulla scelerisque, mi vel commodo consequat, turpis ligula congue ligula,
			eget pellentesque turpis augue quis diam. Nulla facilisi. Etiam commodo quam in
			metus. Etiam nec nisi ac nisl molestie fermentum. Donec ligula ipsum, venenatis in,
			egestas vel, commodo bibendum, est.
		</p>
		<p>
			Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In quis erat. Nulla
			auctor consectetuer erat. Sed est tellus, laoreet et, faucibus et, cursus ut,
			lectus. Nulla scelerisque, mi vel commodo consequat, turpis ligula congue ligula,
			eget pellentesque turpis augue quis diam. Nulla facilisi. Etiam commodo quam in
			metus. Etiam nec nisi ac nisl molestie fermentum. Donec ligula ipsum, venenatis in,
			egestas vel, commodo bibendum, est.
		</p>
	</div>
	<div class="section">
		<h2>Section Title</h2>
		<p>
			Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In quis erat. Nulla
			auctor consectetuer erat. Sed est tellus, laoreet et, faucibus et, cursus ut,
			lectus. Nulla scelerisque, mi vel commodo consequat, turpis ligula congue ligula,
			eget pellentesque turpis augue quis diam. Nulla facilisi. Etiam commodo quam in
			metus. Etiam nec nisi ac nisl molestie fermentum. Donec ligula ipsum, venenatis in,
			egestas vel, commodo bibendum, est.
		</p>
		<p>
			Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In quis erat. Nulla
			auctor consectetuer erat. Sed est tellus, laoreet et, faucibus et, cursus ut,
			lectus. Nulla scelerisque, mi vel commodo consequat, turpis ligula congue ligula,
			eget pellentesque turpis augue quis diam. Nulla facilisi. Etiam commodo quam in
			metus. Etiam nec nisi ac nisl molestie fermentum. Donec ligula ipsum, venenatis in,
			egestas vel, commodo bibendum, est.
		</p>
	</div>
</div>
<div id="footer">
	Copyright &copy; 2006-2007, The Monster Under The Bed. All Rights to Scare Unsuspecting
	Children Reserved.
</div>
</body>
</html>

Code (markup):

Dan Schulz, Jul 25, 2007 IP

gloveless Peon

Messages:: 46

Likes Received:: 0

Best Answers:: 0

Trophy Points:: 0

#26

Thanks for the feedback. I actually read this about a month ago on DP. I can't remember but if I find the thread I'll post it here.

So... <h1> sounds like it's still the winner as it was originally meant to be.

gloveless, Jul 25, 2007 IP

kampoo Peon

Messages:: 79

Likes Received:: 0

Best Answers:: 0

Trophy Points:: 0

#27

All word of your pages is important factor.
Then I think it isn't different

kampoo, Jul 25, 2007 IP

Log in or Sign up

Advertising (learn more)

Is it best to use H1 or H2 tags for your main headings

poksa Banned

on-on Peon

uca Well-Known Member

trichnosis Prominent Member

Dan Schulz Peon

gloveless Peon

kampoo Peon

Log in or Sign up

Advertising (learn more)

Is it best to use H1 or H2 tags for your main headings

poksa Banned

on-on Peon

uca Well-Known Member

trichnosis Prominent Member

Dan Schulz Peon

gloveless Peon

kampoo Peon

Useful Searches