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
-
Google tag manager on blocked beta site - will it phone home to Google and cause site to get indexed?
We want to develop a beta site, in a directory with the robots.txt blocking bots. We want to include the Google Tag Manager tags and event layer tracking code on this beta site. My question is that by including the Google Tag Manager code, that phones home to Google, will it cause Google to index this beta site when we don't want it indexed?
Web Design | | CFSSEO0 -
Nesting <a>tag for rel="nofollow"</a>
I just wanted to quickly run this past someone. I have some footer links I want set to nofollow: <map <span="" class="webkit-html-tag">name</map>="Map"><area <span="" class="webkit-html-tag">shape="rect" coords="10,39,73,101" href="URL" target="_blank" alt="some text"> should this be <map <span class="webkit-html-tag">name</map <span>="Map"><area <span class="webkit-html-tag">shape</area <span>="rect" coords="10,39,73,101 <a <span class="webkit-html-tag">href="URL" rel="nofollow" target="_blank" alt="some text"></a <span> Want to check before I advise. If this is not the way how can I fix?
Web Design | | MickEdwards0 -
Does meta "Expires" tag affect website cacheing or indexing?
One of our client has a meta expire tag across all pages of their website. Does that tag affect the website overall caching or indexing? Their website pages including home page is crawled every 10 days, however the website is popular high traffic websites, receiving 240,000 visits/month. Please advise what impact this tag will have on the website indexing and caching? Thanks Atomic Team
Web Design | | JamesDixon700 -
Does it do harm if you add a rel="canonical" tag on a page that doesn't need it?
If a page is clearly unique and there is obviously no canonical tag needed, does it hurt anything if one has been added?
Web Design | | jaychow0 -
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 -
Using H1 Headings - More than 1?
I've known about avoiding the use of more than 1 H1 Heading Tags, however, with HTML5 is this going to change... at least that's how I understand it. According to HTML5 Specs, Each 'section' can have an H1 heading, which at least theoretically means certain web pages that have multiple "sectioning elements" can have more than 1 H1 heading... true? False? What I'm looking for here is some insight into the ramifications HTML5 will have on the use of H1 tags. And would like to know how search engines currently handle this and are they anticipated to change as the HTML5 outline algorithm becomes widely supported? thanks in advance Kelly
Web Design | | KellysTutorials0 -
Canonical Tag
I've been helping someone out with their website, and I noticed the person who built the site made the canonical tags like this:
Web Design | | StandUpCubicles
href="http://www.example.com/" rel="canonical" /> I'm use to seeing it how seomoz does it: Does this matter? Is it ok to have it inverted? They also have another canonical tag in there like this:
var hs_canonical_url = "http\x3A\x2F\x2Fwww.example.com\x2Fhome" Any idea what that is? Could it be hurting the site?0 -
H1 Tag, necessary or not? Hidden or not?
Our new site design utilizes H1 tags on all pages except the home page. We couldn't find a way to work it into the design. That being said, what's the opinion on necessity? Do we need an H1? If we do the image replacement thing, will that be better for SEO than none at all? Our old site had one and once we changed it to the term we wanted to optimize for we made the top 10 in less than 60 days. We don't want to lose that placement. Thoughts? You input is very much appreciated.
Web Design | | BMDM0