Page 1 of 2 12 Last
  • Jump to page:
    #1
  1. No Profile Picture
    Registered User
    SEO Chat Explorer (0 - 99 posts)

    Join Date
    Dec 2015
    Posts
    18
    Rep Power
    0

    Multiple h1 tags, but only one visible at a time


    Hi,

    After discovering one of our client's sites has suddenly dropped in terms of speed scores, I realised I could rearrange the source code to reduce the amount of HTML code that was being rendered via php (it's a WordPress site).

    The problem is that this requires me to use the h1 tag twice, and only have one visible on certain screen sizes. My question is; will Google think I'm trying to manipulate the content of the page, or is it clever enough to realise that only the visible h1 tag is viable?

    Appreciate any input on this.

    Thanks
  2. #2
  3. Super Moderator
    SEO Chat Good Citizen (1000 - 1499 posts)

    Join Date
    May 2015
    Location
    United Kingdom
    Posts
    1,390
    Rep Power
    2207
    is it clever enough to realise that only the visible h1 tag is viable?
    That is the bit that worrys me, a lot of people used to try and hide content so Google could see it but the users couldn't so Google ranked the page better. This is an old blackhat technique, I would personally be very wary of doing anything like this.
    Always happy to help in private message. | Learn about my latest project Can You Get Automated Pages To Rank In Google?
    Useful Links: Useful SEO Tools | GTmetrix | FileOptimizer | Cloudflare
  4. #3
  5. Contributing User
    SEO Chat Explorer (0 - 99 posts)

    Join Date
    Sep 2016
    Posts
    36
    Rep Power
    139
    I would rather use two h1 tags than hiding one.
    Hiding content is old blackhat technique as Thomas said, so Google would penalize it pretty fast.
    While multiple h1 is not recommended but certainly not a penalty. Multiple h1 are only recommended for One-page websites, so if it is onepager you are lucky
  6. #4
  7. No Profile Picture
    Registered User
    SEO Chat Explorer (0 - 99 posts)

    Join Date
    Dec 2015
    Posts
    18
    Rep Power
    0
    Hi and thanks for getting back to me. This is a template to be used across quite a few pages on the site, so I really need to get it right. I should have mentioned in the original post that it's a responsive design thing. What is the best way to place the h1 tag in difference places? I've got a feeling it's going to be javascript but I really don't want to do that haha.
  8. #5
  9. Super Moderator
    SEO Chat Mastermind (5000+ posts)

    Join Date
    Mar 2004
    Location
    Gloucester (South West UK).
    Posts
    6,533
    Rep Power
    3520
    Are the 2 H1 tags identical?

    Why not use a single H1 and then use CSS 'media query' to position/style it depending on screen size?

    (Also if you use HTML5 you can have one <h1> tag per document section without it causing problems)

    Originally Posted by hera2000
    Multiple h1 are only recommended for One-page websites, so if it is onepager you are lucky
    I disagree with this; best practice (pre-html5) says single <h1> per page (irrespective of the number of pages).

    Comments on this post

    • garg.nina agrees
    ClickyB
    "The quality of the visitor is more important than the volume..." (Egol 22nd Feb 2008)
    [New to SEO/SeoChat?] [Canonical Problems?] [Forum Rules & Posting Guidelines]
  10. #6
  11. No Profile Picture
    Registered User
    SEO Chat Explorer (0 - 99 posts)

    Join Date
    Dec 2015
    Posts
    18
    Rep Power
    0
    The tags are identical (using WordPress the_title function), and I can't use media queries because they appear in completely different areas of the markup.
  12. #7
  13. No Profile Picture
    Registered User
    SEO Chat Explorer (0 - 99 posts)

    Join Date
    Dec 2015
    Posts
    18
    Rep Power
    0
    Full disclosure; I'm using bootstrap column ordering (col-md-push-9 e.g.), and the page is in two columns on large screens, which is where one of the h1 tags is visible lower down the markup, and it becomes a single column layout on smaller screens, where the other h1 tag is right at the top of the page.
  14. #8
  15. No Profile Picture
    Moderator
    SEO Chat Good Citizen (1000 - 1499 posts)

    Join Date
    Sep 2016
    Location
    USA
    Posts
    1,360
    Rep Power
    2484
    Originally Posted by ThomasHarvey
    That is the bit that worrys me, a lot of people used to try and hide content so Google could see it but the users couldn't so Google ranked the page better. This is an old blackhat technique, I would personally be very wary of doing anything like this.
    You are quite correct, when you try to hide it only from users but not from google. But if you think about Menu systems on sites, you hover your mouse and a drop down appears, Google is smart enough to know the difference between hiding content from users, and functional menu systems.

    You hide one and show the other depending on which device your visitor is using. Google will know the difference between a good user experience and trying to game their search engine. That is one reason I like media queries, it is obvious what you are trying to do even to Google.
  16. #9
  17. No Profile Picture
    Contributing User
    SEO Chat Explorer (0 - 99 posts)

    Join Date
    Aug 2016
    Location
    India
    Posts
    20
    Rep Power
    0
    H1 tag basically tells google about the topic that is being discussed on that webpage. So if you are using more more than one h1 tag, you are confusing google. ClickyB has provided here best possible solution.
  18. #10
  19. No Profile Picture
    Registered User
    SEO Chat Explorer (0 - 99 posts)

    Join Date
    Dec 2015
    Posts
    18
    Rep Power
    0
    I am using the hidden-* utility classes from Bootstrap to hide the h1 tag, so it is using media queries. Do you think Google will see this use of CSS and understand its a user experience thing? Lots of different opinions on this
  20. #11
  21. No Profile Picture
    Registered User
    SEO Chat Explorer (0 - 99 posts)

    Join Date
    Dec 2015
    Posts
    18
    Rep Power
    0
    Originally Posted by garg.nina
    H1 tag basically tells google about the topic that is being discussed on that webpage. So if you are using more more than one h1 tag, you are confusing google. ClickyB has provided here best possible solution.
    If I have to come up with an SEO-friendly way of doing this (assuming we come to the conclusion that the way I've currently got it ISN'T SEO-friendly), what would be the best way of managing this?
  22. #12
  23. Contributing User
    SEO Chat Adventurer (500 - 999 posts)

    Join Date
    Apr 2011
    Posts
    967
    Rep Power
    1550
    Originally Posted by Mr-Silly-Bear
    If I have to come up with an SEO-friendly way of doing this (assuming we come to the conclusion that the way I've currently got it ISN'T SEO-friendly), what would be the best way of managing this?
    ClickyB's answer is the best but if the h1 tag appears in completely different pages then potentially a Jquery Ajax load but check with Fetch as GoogleBot that it can see it....

    BUT I would first work harder to find a CSS media query solution
  24. #13
  25. No Profile Picture
    Moderator
    SEO Chat Good Citizen (1000 - 1499 posts)

    Join Date
    Sep 2016
    Location
    USA
    Posts
    1,360
    Rep Power
    2484
    Originally Posted by Mr-Silly-Bear
    If I have to come up with an SEO-friendly way of doing this (assuming we come to the conclusion that the way I've currently got it ISN'T SEO-friendly), what would be the best way of managing this?
    You have one of 3 choices as I see it.

    1. Believe that the Google algo understands that the Content is view-able on some devices and not others. Which means Google knows it's not hidden content, so using css to hide / display is OK !

    2. Change the specific h1 tag to an h2 tag and style it to appear as a h1 tag, because its ok to have multiple h2 tags per page, even pre-html5

    3. Make sure the page is HTML5 compliant 100% an follow the format correctly !

    <!DOCTYPE html>
    <html>
    <head>
    <title>Example use of H1 Tags</title>
    </head>
    <body>
    <div>
    <h1>How many h1 tags can a page have !</h1>
    </div>
    <article>
    <h1>The proper use of the h1 tag</h1>
    <h2>Why this is an article</h2>
    <p>Each article can have the use of all tags.</p>
    <p>This is an article on h1 thru h3 tags.</p>
    <h3>This would be a sub heading under "Why this is an article"</h3>
    <p>Any article may use each h tag.</p>
    <p>This is just an example of html5 document layout</p>
    <h2>Only 1 h1 per Article allowed !</h2>
    <p>The use of h2 and h3 tags follow pre html5.</p>
    <p>This is just anohter example of multiple h2 tags.</p>
    </article>
    <article>
    <h1>Article intended as a replacement for generic div tag</h1>
    <h2>Why the use of Article tags are important !</h2>
    <p>Again to re-iterate about article tags .</p>
    <p>We use them to allow the use of multiple H1 tags correctly and with no seo drawback.</p>
    </article>
    </body>
    </html>
  26. #14
  27. No Profile Picture
    Registered User
    SEO Chat Explorer (0 - 99 posts)

    Join Date
    Dec 2015
    Posts
    18
    Rep Power
    0
    Thanks all for he help. Appreciate the input. I'm going to see how the SEO rankings go for now, and if I see some noticeable dip I'll try a JavaScript method (I can't think of any way at the moment to use pure CSS to move the element around the screen as it would need to). If I remember I'll come back and make a comment as to what's happened
  28. #15
  29. No Profile Picture
    Moderator
    SEO Chat Good Citizen (1000 - 1499 posts)

    Join Date
    Sep 2016
    Location
    USA
    Posts
    1,360
    Rep Power
    2484
    Originally Posted by Mr-Silly-Bear
    (I can't think of any way at the moment to use pure CSS to move the element around the screen as it would need to).
    Css top property --

    Definition and Usage
    For absolutely positioned elements, the top property sets the top edge of an element to a unit above/below the top edge of its nearest positioned ancestor. Note: If an absolute positioned element has no positioned ancestors, it uses the document body, and moves along with page scrolling. Note: A "positioned" element is one whose position is anything except static.

    For relatively positioned elements, the top property sets the top edge of an element to a unit above/below its normal position.

    Note: If "position:static", the top property has no effect.

    positive numbers move the element down the page
    negative numbers move the element up the page


    Furthermore here is a working example of how to use it, go to this link and play with it and see how it works

    Tryit Editor v3.1

    W3Schools is not a completely useless website, it does have some good information !

    A simple solution to your problem, 1 line of code
Page 1 of 2 12 Last
  • Jump to page:

Similar Threads

  1. Links from h1 tags and multiple h1 tags. Case study
    By Sarunas in forum Google Optimization
    Replies: 6
    Last Post: Jul 18th, 2010, 10:34 PM
  2. Multiple H1 tags
    By joelo4387 in forum Google Optimization
    Replies: 5
    Last Post: Feb 1st, 2009, 08:42 PM
  3. Multiple H1 tags
    By deano6410 in forum Google Optimization
    Replies: 12
    Last Post: Nov 15th, 2005, 05:37 PM
  4. multiple meta tags?
    By bulldog in forum Google Optimization
    Replies: 4
    Last Post: May 16th, 2005, 04:00 PM
  5. Use of Multiple H1, H2, H3 tags on same page
    By thingyamabob in forum Google Optimization
    Replies: 3
    Last Post: Feb 24th, 2005, 12:18 PM

IMN logo majestic logo threadwatch logo seochat tools logo