SitePoint Sponsor |
|
User Tag List
Results 1 to 7 of 7
Thread: Headers and Images
-
Jan 4, 2008, 17:39 #1
- Join Date
- Feb 2006
- Posts
- 184
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Headers and Images
I've been doing a lot of CSS coding, and I've started to think about just how SEO friendly my code really is. I've come up with a few questions that I'd like to ask:
Question 1: Are images just as affective as text?
A lot of web sites use a logo image wrapped in an <h1> tag. Some use text and overlay the logo with a nested <span> tag.
How SEO friendly are images that properly use Title and Alt attributes? Are they just as affective as text? Or is text that much better to forgive the extra non-semantic <span> tag?
Question 2: How many <h1> tags can I use?
I've always been under the impression that you should use one single <h1> tag, period. In fact, most web sites I see use <h1> for the logo and leave it at that. However it's come to my attention that alistapart.com uses two when you view an article page (<h1> wrapped around the logo, and <h1> for the article header).
What is the actual appropriate use for <h1>? Is it acceptable to have two? Thoughts on using <h1> for the logo and nothing else?
Question 3: How should headers be nested?
I've seen header tags nested in two ways:
1) By page section. e.g. Logo uses <h1>, content uses <h2>, sidebar uses <h3>
Example:
Code:<h1>logo</h1> <div id="content"> <h2>content title</h2> ... <h2>content title</h2> ... </div> <div id="sidebar"> <h3>sidebar title</h3> ... <h3>sidebar title</h3> ... </div>
Example:
Code:<h1>logo</h1> <div id="content"> <h2>content title</h2> ... <h3>subsection title</h3> ... <h2>content title</h2> ... <h3>subsection title</h3> ... </div> <div id="sidebar"> <h2>sidebar title</h2> ... <h2>sidebar title</h2> ... </div>
Thanks for your time.
-
Jan 4, 2008, 20:38 #2
- Join Date
- May 2002
- Location
- Central WI, US
- Posts
- 262
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
A long time back Kevin Yank posted the following in an issue of the tech times I believe which should answer you're question nicely:
The Hard Facts about Heading StructureLast edited by Shyflower; Jan 5, 2008 at 07:30. Reason: Please don't repost copyrighted material. Just leave the link.
-
Jan 4, 2008, 23:00 #3
- Join Date
- Feb 2006
- Posts
- 184
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Nice find. Is there a link to this article?
-
Jan 5, 2008, 07:39 #4
- Join Date
- Oct 2003
- Location
- Winona, MN USA
- Posts
- 10,053
- Mentioned
- 142 Post(s)
- Tagged
- 2 Thread(s)
Hx tags are like outline headings. The H1 is the title tag of your topic (don't confuse this with the title element in your head information). H2 is a sub-topic, H3 begins a more detailed explanation of h2.
If you use Hx tags correctly, it can make writing a page a whole lot easier. Start out with your H-outline and then fill in your information.
On the web, Search Engines put pretty heavy weight on the H1 and then decrease the weight given to the other subheadings.Linda Jenkinson
"Say what you mean. Mean what you say. But don't say it mean." ~Unknown
-
Jan 5, 2008, 08:03 #5
- Join Date
- May 2006
- Location
- Aurora, Illinois
- Posts
- 15,476
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
The link is in the post. Anyway, to answer the questions...
Question 1: Are images just as affective as text?
A lot of web sites use a logo image wrapped in an <h1> tag. Some use text and overlay the logo with a nested <span> tag.
How SEO friendly are images that properly use Title and Alt attributes? Are they just as affective as text? Or is text that much better to forgive the extra non-semantic <span> tag?
Question 2: How many <h1> tags can I use?
I've always been under the impression that you should use one single <h1> tag, period. In fact, most web sites I see use <h1> for the logo and leave it at that. However it's come to my attention that alistapart.com uses two when you view an article page (<h1> wrapped around the logo, and <h1> for the article header).
What is the actual appropriate use for <h1>? Is it acceptable to have two? Thoughts on using <h1> for the logo and nothing else?The H1 heading element is used to denote the topmost heading of the page. In layman's terms, this would be the page title, and nothing more.
Question 3: How should headers be nested?
I've seen header tags nested in two ways:
1) By page section. e.g. Logo uses <h1>, content uses <h2>, sidebar uses <h3>
Code:<div id="content"> <div class="wrapper"> <h1>Page Title</h1> <p>Introductory paragraph</p> <h2>Section Heading</h2> <p>Page content...</p> <p>Page cotent...</p> <h2>Section Heading</h2> <p>Page content...</p> <h3>Section Subheading</h3> <p>Page content...</p> <p>Page content...</p> <h4>Section Sub-Subheading</h4> <p>Page content...</p> <p>Page content...</p> <h4>Section Sub-Subheading</h4> <p>Page content...</p> <h3>Section Subheading</h3> <p>Page content...</p> <p>Page content...</p> </div> </div> <div id="sidebar"> <!-- if your sidebar contains extra relevant information, then the same structure (starting with H2s and working your way down) would be appropriate; if it contains ads, I'd identify the sidebar as an ad block instead (change the ID to reflect this) and just slap the ads inside instead --> </div>
Of course, if you want to wrap the various main section headings (H2s) and their associated content in DIV containers, feel free to. (In fact, I should have done that in the first place, but each design is different, and has unique requirements.)Save the Internet - Use Opera | May my mother rest in peace: 1943-2009
Dan Schulz - Design Team Advisor | Follow me on Twitter
SitePoint References: HTML CSS JavaScript | Become A Guru
WordPress SEO Checklist | What WordPress Plugins Do You Use?
Web Standards Curriculum | Image Free Equal Height Columns
-
Jan 5, 2008, 16:05 #6
- Join Date
- Feb 2006
- Posts
- 184
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
In regards to H1:
One per page - and use it as the page title, not the site title/logo.
We'll use the official WordPress blog as an example: http://wordpress.org/development/
Since SitePoint has similar structure to a lot of heavy content web sites, we can use it as an example as well. If not the logo, what would you wrap in an H1 tag on the front page:
http://www.sitepoint.com/
-
Jan 5, 2008, 16:39 #7
- Join Date
- May 2006
- Location
- Aurora, Illinois
- Posts
- 15,476
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
For a blog, I'd use the H1 for an introductory heading, and then use the H2s for the post titles. Though unlike most blogs, I'd actually ADD other content to the front page.
As for SitePoint, I'd probably just say "screw it" and leave it alone until the next redesign. Afterall, "if it ain't broke, don't fix it" is a mantra for a reason. Especially given that a lot of people probably search for "SitePoint" specifically in a search engine.Save the Internet - Use Opera | May my mother rest in peace: 1943-2009
Dan Schulz - Design Team Advisor | Follow me on Twitter
SitePoint References: HTML CSS JavaScript | Become A Guru
WordPress SEO Checklist | What WordPress Plugins Do You Use?
Web Standards Curriculum | Image Free Equal Height Columns
Bookmarks