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
-
Rel=next and rel=prev meta tags
Hi,
Web Design | | RocoClothing
We have recently implemented the rel=next and rel=prev meta tags on the
category pages of our website. Currently for example if on page 2 we have the following: href="http://www.rococlothing.co.uk/boys/boys-suits/" />
href="http://www.rococlothing.co.uk/boys/boys-suits/?p=1" />
href="http://www.rococlothing.co.uk/boys/boys-suits/?p=3" /> For each page we are using the same canonical tag which is the url for
the 1st page in the category.
Is this the correct way to impletment it or should the canonical tag for
page 2 be as follows: href="http://www.rococlothing.co.uk/boys/boys-suits/?p=2" /> I have also seen some companies ommiting the canonical tag on pages
after page 1 and just using the prev and nexts. Could anyone advise as to what the ideal implementation would be for this? Regards
Patrick0 -
WordPress Category page title h1 or h2
Hi friends, I know this is a minor technical change, but we are in an extremely competitive market and I don't want to have any points against us. On our WordPress Category pages i.e. http://www.domain.com/category/�tegory-title%/ I looked at the code behind the the Title of the category page, which is "Browsing: %Category Title%" The code is an h2. I look at the posts in the category archive below, and those are also h2's. The theme preview is here and you can click on Entertainment - Reviews to see exactly what I'm referring to - http://themeforest.net/item/smartmag-responsive-retina-wordpress-magazine/full_screen_preview/6652608 I changed the code for the "Browsing: %Category Title%" to h1, which I believe is more consistent and standard formatting. 1. Is this a correct technical on-page optimization? 2. Would it be beneficial to remove "Browsing"?
Web Design | | JustinMurray0 -
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 -
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 -
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 -
H1 image replacement question
Working with content folks on a new section of our website. Developed a new logo for this section of the site, and they want to incorporate the style of it into all of the page headings. The only way to pull this off is to use images for H1's. (Without getting into unnecessary detail, they have to be images - too precise to try text over background images.) I made everyone aware of the importance of H1 text for SEO purposes, but they really want these images. When I first attempted SEO back in 2003, I recall doing a site using CSS image replacement along these lines: Widget Page #example {
Web Design | | c2g
background: url(../images/example.gif) no-repeat;
text-indent: -5000px;
} That was nearly 10 years ago, and they definitely ranked for the H1s at the time which led me to believe it worked. Anyone know if this is considered an acceptable practice today? I read some other threads about enclosing the image in tags and relying on the ALT text, but that doesn't seem to be a good option.0 -
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 -
Java-script slider & H1 tags
If you have a java-script slider on the homepage, each slide has an H1 tag heading, which of the H1 tags would google most likely consider? all of them or just the first one?
Web Design | | GraphicMail0