As I understand, pages should have only 1 h1 tag as per Google (http://stackoverflow.com/questions/503925/is-it-alright-to-use-multiple-...), but I notice you put the site name in an h1 tag.

Also, the bootstrap example does not use h1 for site name: http://getbootstrap.com/2.3.2/components.html#navbar

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

markhalliwell’s picture

Title: Why is site name in an h1 tag in addition to page header? » Change navbar "site name" from H1 to a.brand
Category: support » bug
Issue tags: +needs backport to 7.x-2.x

Agreed, this is bad practice. In regards to "why" it's this way, who knows. It's probably just legacy code that I haven't really paid attention to since being brought on board.

heylookalive’s picture

Status: Active » Needs review
FileSize
1.72 KB

Found 10 free minutes, find attached a patch.

I've moved the code up a bit in line with bootstrap docs, also making use of ".navbar-left" and also ".navbar-btn" to get the vertical alignment right, not sure if we should create our own class to do this but it looks about right with that class.

markhalliwell’s picture

Version: 7.x-3.x-dev » 7.x-2.x-dev
Status: Needs review » Active
Issue tags: -needs backport to 7.x-2.x

Thanks @heylookalive!

Committed 94919c0 to 7.x-3.x.
Committed 71c271e to 7.x-3.x.

Needs backport to 7.x-2.x now.

albertomota’s picture

Status: Active » Needs review
FileSize
12.38 KB

Backported, patch attached.

imadalin’s picture

Matt talks in his video about multiple H1 on same page, about the people abusing of it in the content.

To have it in the main section of the page template is 100% not important for SEO, the thing that you need to really take care is how you use headings in your content.

I see that many people confuse this.

An example of logical map of using Headings based on Google's articles on their blogs:

<header>H1 - site title</header>

<main><article>
<header - for article>H1 - article title</header>
// Content
H2 - some important stuff in article
// Content related to this H2
H2 - another important stuff with other subjects
H3 - smaller important, inherits from previous H2
// Content
H3 - other stuff with same importance like previous H3
// Content
etc.
<footer - for article>H2 - some title
// Content - can be some related stuff, like links to something, be creative...
</footer>
</main>

<aside>
H2 - title of something that has lower importance then the MAIN article area, but relates
// Content -- should be used on related stuff with the MAIN content on the page (like a block with related articles etc.)
</aside>

<section>
H2 - another part of the page, related and may be common on all pages of the site
// Content -- should be used for blocks that don't have related stuff with the article (like a Facebook widget, an Ad etc.)
</section>

<footer>
somthing here...
</footer>

Try to think on lists and definition lists same time, it is the same logical algorithm behind Headings importance.

Now, most people will have different opinions, but this is mine and I know it works.

andregriffin’s picture

Yes, I believe this is a remnant from my Framework theme HTML5 outline inclusions. H1 use was redefined in the HTML5 spec, but I don't know how much that took hold. Bootstrap example pages seem to ignore HTML5 structural markup, so maybe it's best to go by Bootstrap convention first? I'd need to do more research on current usage trends I guess.

markhalliwell’s picture

Status: Needs review » Needs work

Reviewing #4:

  1. +++ b/bootstrap_subtheme/less/overrides.less
    @@ -116,12 +116,27 @@ body {
     // Branding.
     .navbar .logo {
    -  margin-top: 5px;
    -  margin-right: 10px;
    +  margin-right: -15px;
    +  padding-left: 15px;
    +  padding-right: 15px;
    +  padding-top: 5px;
    +  @media @tablet, @normal, @wide {
    +    margin-right: 0;
    +    padding-left: 0;
    +  }
    +
     }
    -#site-name {
    -  line-height: 1;
    -  margin: 0;
    +.navbar .name {
    +  font-size: 20px;
    +  float: left;
    +  padding-top: 12px;
    +  padding-right: 20px;
    +  color: @navbarLinkColor;
    +  font-weight: 200;
    +  &:hover{
    +    text-decoration: none;
    +    color: @navbarLinkColorHover;
    +  }
     }
    

    Is there a reason this all this is added?

  2. +++ b/bootstrap_subtheme/less/overrides.less
    index ec33ece..1e5bf97 100644
    --- a/css/overrides.css
    

    Don't include the compiled CSS please, this is done as a maintainer GK (gate-keeper) commit.

markhalliwell’s picture

Version: 7.x-2.x-dev » 7.x-3.0-beta1
Issue summary: View changes
Status: Needs work » Closed (fixed)

We are no longer working on the 7.x-2.x branch. If people need this solution they can apply the patch manually.

markhalliwell’s picture

Version: 7.x-3.0-beta1 » 7.x-3.0-rc1

Wrong version this was introduced in.