Other tags inside an H1 tag
-
So I have a situation with the website I'm currently redesigning where the H1 titles are supposed to mix colors per the current brand strategy.
The branding crew is adamant that this has to be done so there is no use in saying "just don't do it".
To accomplish this I'm wrapping the words that need to be the other color in a .
Additionally, some pages have a "sub text" as part of the title, floated to the right and in a smaller font but with the same multi color treatment. I'm wondering if the sub text should be in an H2 and positioned to the right or if it would be beneficial to have the text in the H1 as well.
An example of what I'm talking about would be something like this: "Big Shoes for Big Guys - Nike Shoes"
In that, the "Big Shoes" and "Nike" would be one color and the "for Big Guys" and "Shoes" would be another. I can imagine having the "Nike Shoes" as part of the H1 would be a good idea in some respect but I'm not certain of that.
In order to make that happen I can only think of one way to do it:
-H1-
Big Shoes
-span- for Big Guys -/span-
-div- Nike
-span- Shoes -/span-
-/div-
-/H1-So that brings me back to the original concern, do search engines care about tags inside the H1?
The only other way to accomplish the color changes that I can think of would be to have a fairly large chunk of javascript setup to go through H1's to colorize them using the span tags. That is unless GoogleBot has started to execute javascript while crawling the sites now...
-
I tend to use this quite a lot; It does not harm Search Engines, what is important is that only inline elements are contained within an H1 tag, that is
span
is a perfectly valid element, however adiv
is not. In your case you should use multiple spans with separate class names.You should also consider splitting it into H1 / H2 depending on your site structure and navigation as it might make more sense in some cases.
-
It's fine to include tags withing an
, but including awithin an
goes against HTML conventions.
-
To answer your question, a span tag within a H1 tag will not have any negative effect, its quite normal to use markup to add visualize appearance, and a span tag is not "semantic" markup.
Once you are not splitting up the word, as is using
Nike
, I have read that the robots would read that as N "space" ike ... hence not the word nike
BTW, thats a very crude and unsemanctic way to style that phrase, why the div within the H1 tag
I would use a below, without having the benefit of seeing your website layout of course
Big Shoes for Big Guys
Nike Shoes
Then add your markup and styling within the the classes
If you need anymore help with the styling, give me a shout
Regards
John
Got a burning SEO question?
Subscribe to Moz Pro to gain full access to Q&A, answer questions, and ask your own.
Browse Questions
Explore more categories
-
Moz Tools
Chat with the community about the Moz tools.
-
SEO Tactics
Discuss the SEO process with fellow marketers
-
Community
Discuss industry events, jobs, and news!
-
Digital Marketing
Chat about tactics outside of SEO
-
Research & Trends
Dive into research and trends in the search industry.
-
Support
Connect on product support and feature requests.
Related Questions
-
H1 tag within on top nav but css class styled appear at bottom
Hi, Sorry the similar question could have been ask previously but I couldn't get an exact answer. Someone put a h1 tag on our homepage (which do not have before) and the is within the top nav. But it has a css style class in that h1 tag to make it appear at the bottom of the page so not everyone would be aware of that small h1 title. I personally do not think that's going to help with seo. However I want to know if this practice is going to be: beneficial, or not at all? or harmful instead? Thanks LM
Web Design | | LauraHT0 -
Auto - update of h1 to h2
Hi, I have recently inherited an ecommerce website and been tasked with improving SEO. I noticed a lot of pages were using several h1 tags and, with the help of my developer, used the css to overwrite the secondary headings as h2 tags. However, since doing so many of the pages have fallen 15-40 places in the SERPS. The h1 / h2 switch was the only update. Can anyone suggest why the pages would have fallen like this, and if it is a temporary measure likely to recover in time? Thanks to anyone in advance for your help...
Web Design | | DavidIainJeffrey0 -
Does using role="heading" instead of H1 in HTML code affects SEO?
Does using role="heading" instead of affect SEO? http://www.w3.org/WAI/GL/wiki/Headings_using_role%3Dheading
Web Design | | LNEseo0 -
Using H tags and its maximum Limits
hi..
Web Design | | funclub247
I want to Know what is a Maximum limit of using H tags in One Page : for Eg : I Know That I Can use Only One H1 Tag per Page, What about Other H tag Limit..
h1 - 1 time Maximum
h2 - ..?
h3 - ..?
h4 - ..?
h5 - ..?
h6 - ..?
h7 - ..?
.....
i want to target more than 30 key word using H tag as a header of the paragraph...1 -
How Important is Title Tag while viewing in browser's tab
Hi SEOmozer,I have a dumb/silly question. Ok, I know Title tags are important for SEO and users and it shows up in the SERP and all that. My question is that, using a weird CMS, I have the title tag implemented and it appear in the SERP the way I want it. However, the problem is that when I hover over the tab on the browser, it doesn't appear the same way it is in the SERP. Does that really matter that it appears differently? I checked the HTMl and this what I got<title>Example Keywordtitle><meta name="layout" content="main"/><meta name="description" content="Keyword 1 | Keyword 2 | Company Name"/>So whats within the "content" is showing in the SERP and what is in "title" tag is showing in the browser tab. Shouldn't they be the same?
Web Design | | TommyTan0 -
Header tags - big H1s after small H2s
Just spotted bigger H1s and small H2s on a website, in the newsroom. The smaller H2 = section heading (Newsroom), the larger H1 is a news headline. Might that cause me any search engine problems?
Web Design | | McTaggart0 -
Linking to an image with the keyword in the title and alt tags.
Hi guys, Just thought I'd ask for opinions about an ecommerce catalog I'm working on. I don't know if it's even worth worrying about, but here's the scenario. Let's say I'm linking to a category called 'Sale' using an image, I have the title tag of the link as 'Sale', the image title is also 'Sale' as well as the alt tag. The HTML looks like this: Sale The page itself is: http://www.fashionbasicsonline.com/catDisplay So my question is, do you think I'm stuffing the keyword in too many times there? It's CMS driven so I could have the alt tag as 'Sale Products' or one of the titles as 'Sale Catalog' perhaps, do you think there would be a benefit in doing that? Maybe it's microoptimisation and I should be looking at other low hanging fruit, but I'm just trying to come up with the best scenario. Would love to hear what you think. Cheers, Bruce p.s. Looking forward to meeting as many people as possible at MozCon next week 🙂
Web Design | | bruce_werdschinski0 -
How to Add canonical tags on .ASPX pages?
What is the proper way (or is it possible) to add canonical tags on website pages that end in .aspx? If you add a canonical tag to the Master Page it will put that exact canonical tag on every page, which is bad. Is there a different version of the tag to put on individual pages? And one to put on the home page without the Master Page error?
Web Design | | Ryan-Bradley0