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
-
Okay to have additional attributes in canonical tag?
Hello! I'm helping a Client with a platform migration from an SEO standpoint. They are working to implement canonical tags, but I've noticed that each of the ones they are implementing are including a "data-rdm" attribute: data-rdm=""> I'm not sure the Client has a way to suppress this before the launch date. Do we think this will be an issue for Google?
Web Design | | PattyAMG1 -
How to avoid duplicate title tags?
I've got roughly 1200 location pages for a travel client. Since the business does the same thing at every location, the title tags and descriptions are almost identical except for the location name. I know Google likes tags and meta descriptions to be unique, but how many different ways can I write the same title in a 55 character limit? For example, here's how the titles look: Things to do in San Jose, CA | Company Name
Web Design | | Masbro
Things to do in Dallas, TX | Company Name
Things to do in Albuquerque, NM | Company Name **My question: Are 1200 title tags structured this way unique enough for Google? ** I have got the same problem with the meta descriptions, but I can vary those a bit more because i have more characters to work with. Thanks for your input,
Dino2 -
No cache meta tags - does it help Google get back and reindex faster?
I saw these meta tags on a site and am trying to figure out their benefit. These meta tags are on the home page, product pages, every page of the site. Will it cause search engine bots to come back and index pages faster? Will it cause slower page loading in browsers if nothing is cached? http-equiv="pragma" content="no-cache"/> http-equiv="cache-control" content="no-cache,no-store,must-revalidate"/> http-equiv="expires" content="0"/>
Web Design | | CFSSEO0 -
Title tag on Google starts with company name then :
Can someone help me and tell me why Google picks up and shows the title tag as for example: SEOmoz**: SEO Software. Simplified.** Then if you click through and look at the cache version of the page it shows the title tags as just SEO Software. Simplified. So without the SEOmoz: at the start. http://webcache.googleusercontent.com/search?q=cache%3Awww.seomoz.org%2F&aq=f&oq=cache%3Awww.seomoz.org%2F&aqs=chrome.0.57j58.3052&sourceid=chrome&ie=UTF-8 Its probably something really easy and I'm going to kick myself when someone tells me but I can't figure out why?
Web Design | | i3MEDIA1 -
Using More Info javascript:toggleDisplay tag for More info text
Is there any harm in using javascript so a user can "toggle" open or closed additional text on a website? For example, if a user wants to read more about something, they can click on "More Info" and the text would then appear. Google is able to read the text, because I chose a random 8 word section of the text within the More Info and pasted it into a Google Search and the website showed up in search results. Just wondering if using this technique would have any negative impact. Here's what the code would look like:
Web Design | | EEE3
<a <span="">title</a><a <span="">="Show Tables" href="</a><a class=" " target="_blank">javascript:toggleDisplay('table1')</a>">More Info style="display: none;" id="table1"> this is where the text would be, and from this section was where I grabbed text to search with in google. Then in the footer, here is the script needed so the more info will work: I am by no means an expert in coding/html/javascript. Thanks!0 -
Does Google follow links inside a <noscript>tag?</noscript>
I'm looking at making an embedable calculator and asking users to embed it to their website. I had the idea of using javascript to include the calculator which would also conatain a text link back to my site in order to gain some back links. If it's possible Google won't see the link (as they may not execute the javascript), is it safe to place the link in the <noscript>tag? If so, Will it be indexed and will Page Rank be passed?</span></p> <p>Thanks in advance for your answers. </p> <p>Anthony</p> <p><span style="color: #5e5e5e;"><br /></span></p></noscript>
Web Design | | BallyhooLtd0 -
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 -
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