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
-
Homepage Slider How to Handle H1 and H2's
Working on a site with a slider on the homepage, I dislike them but owner wants to keep in place. Currently, the slider has 4 slides with different images but the same text, so the slider has 4 slides with 4 identical H2 tags and accompanying text. There is no H1 tag on the page at all. It seems to me that a better solution would be to change the first slide to be H1 (with the target keyword) and rework the text in the other slides as H2 tags to appeal to the user. This does mean that the H1 and H2 tags in the slider would be styled the same. Is this a sensible approach?
Web Design | | GrouchyKids1 -
Have Your Thoughts Changed Regarding Canonical Tag Best Practice for Pagination? - Google Ignoring rel= Next/Prev Tagging
Hi there, We have a good-sized eCommerce client that is gearing up for a relaunch. At this point, the staging site follows the previous best practice for pagination (self-referencing canonical tags on each page; rel=next & prev tags referencing the last and next page within the category). Knowing that Google does not support rel=next/prev tags, does that change your thoughts for how to set up canonical tags within a paginated product category? We have some categories that have 500-600 products so creating and canonicalizing to a 'view all' page is not ideal for us. That leaves us with the following options (feel it is worth noting that we are leaving rel=next / prev tags in place): Leave canonical tags as-is, page 2 of the product category will have a canonical tag referencing ?page=2 URL Reference Page 1 of product category on all pages within the category series, page 2 of product category would have canonical tag referencing page 1 (/category/) - this is admittedly what I am leaning toward. Any and all thoughts are appreciated! If this were in relation to an existing website that is not experiencing indexing issues, I wouldn't worry about these. Given we are launching a new site, now is the time to make such a change. Thank you! Joe
Web Design | | Joe_Stoffel1 -
Hi, I have a doubt. If we want to hide unwanted text in a web page its possible with "" tag. And my question "does a search engine crawl those text? help me.
I want to hide a lot of text behind my site page. I know its possible with that tag. But in what way a search engine looks at those text? Hidden or they are crawled and indexed.
Web Design | | FhyzicsBCPL0 -
Is the 'too many links' caused by the tags?
Hello Just got my seomoz report and decided I better start takiling things. Got a lot of 'too many links' on the report. I don't have control over website design and before I talk to designer I thought I should have a bit of an handle on what I am talking about. I've taken one page that has 483 links. Is this caused by the tags box and would it be a good idea to have it removed? http://commonwealthcontractors.com/uk-visas/tier-2-general-visas-formerly-uk-work-permits/ Regards Niamh
Web Design | | Niamh20 -
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 -
How important are tags on blogs?
Hi, I've always used tags on blogs, but I've noticed that some prominent and reputable blogs (e.g., SEOmoz blog, Problogger, Copyblogger) are no longer using tags at the end of each post. I'm curious about what is the reason for this - any ideas? Thanks in advance, Carolina
Web Design | | csmm0 -
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 -
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