2

So, the position of my site title and logo have been moving around on different pages.

I was pulling my hair out until I compared the html outputs of the pages where the logo moves and it appears that on some pages my site name div is given an h1 tag and on other pages it doesn't have and is just in a regular div. Two of my pages have the h1 tags, but I just learned that this should only be the front page.

I had played with wrangling the positions with CSS but I want to know what is causing this change in my markup, so I can squash this CSS bug for good. Any ideas why this happens? and or suggestions on what to do? Here's the markup with what's close to what I want: Site name with no h1 tag Here's my site with the mystery h1 tags site name no h1 tag.

For clarification, I'm using a bartik subtheme, basically just added a css overrides CSS file. Here is my page.tpl.php

My question is 1) why did some pages have the h1, not just the front page; and 2) how do I stick an h1 tag on all the pages?

    ?>
<div id="page-wrapper"><div id="page">

  <div id="header" class="<?php print $secondary_menu ? 'with-secondary-menu': 'without-secondary-menu'; ?>"><div class="section clearfix">

    <?php if ($logo): ?>
      <a href="<?php print $front_page; ?>" title="<?php print t('Home'); ?>" rel="home" id="logo">
        <img src="<?php print $logo; ?>" alt="<?php print t('Home'); ?>" />
      </a>
    <?php endif; ?>

    <?php if ($site_name || $site_slogan): ?>
      <div id="name-and-slogan"<?php if ($hide_site_name && $hide_site_slogan) { print ' class="element-invisible"'; } ?>>

        <?php if ($site_name): ?>
          <?php if ($title): ?>
            <div id="site-name"<?php if ($hide_site_name) { print ' class="element-invisible"'; } ?>>
              <strong>
                <a href="<?php print $front_page; ?>" title="<?php print t('Home'); ?>" rel="home"><span><?php print $site_name; ?></span></a>
              </strong>
            </div>
          <?php else: /* Use h1 when the content title is empty */ ?>
            <h1 id="site-name"<?php if ($hide_site_name) { print ' class="element-invisible"'; } ?>>
              <a href="<?php print $front_page; ?>" title="<?php print t('Home'); ?>" rel="home"><span><?php print $site_name; ?></span></a>
            </h1>
          <?php endif; ?>
        <?php endif; ?>

        <?php if ($site_slogan): ?>
          <div id="site-slogan"<?php if ($hide_site_slogan) { print ' class="element-invisible"'; } ?>>
            <?php print $site_slogan; ?>
          </div>
        <?php endif; ?>

      </div> <!-- /#name-and-slogan -->
    <?php endif; ?>

    <?php print render($page['header']); ?>

    <?php if ($main_menu): ?>
      <div id="main-menu" class="navigation">
        <?php print theme('links__system_main_menu', array(
          'links' => $main_menu,
          'attributes' => array(
            'id' => 'main-menu-links',
            'class' => array('links', 'clearfix'),
          ),
          'heading' => array(
            'text' => t('Main menu'),
            'level' => 'h2',
            'class' => array('element-invisible'),
          ),
        )); ?>
      </div> <!-- /#main-menu -->
    <?php endif; ?>

    <?php if ($secondary_menu): ?>
      <div id="secondary-menu" class="navigation">
        <?php print theme('links__system_secondary_menu', array(
          'links' => $secondary_menu,
          'attributes' => array(
            'id' => 'secondary-menu-links',
            'class' => array('links', 'inline', 'clearfix'),
          ),
          'heading' => array(
            'text' => t('Secondary menu'),
            'level' => 'h2',
            'class' => array('element-invisible'),
          ),
        )); ?>
      </div> <!-- /#secondary-menu -->
    <?php endif; ?>

  </div></div> <!-- /.section, /#header -->

  <?php if ($messages): ?>
    <div id="messages"><div class="section clearfix">
      <?php print $messages; ?>
    </div></div> <!-- /.section, /#messages -->
  <?php endif; ?>

  <?php if ($page['featured']): ?>
    <div id="featured"><div class="section clearfix">
      <?php print render($page['featured']); ?>
    </div></div> <!-- /.section, /#featured -->
  <?php endif; ?>

  <div id="main-wrapper" class="clearfix"><div id="main" class="clearfix">

    <?php if ($breadcrumb): ?>
      <div id="breadcrumb"><?php print $breadcrumb; ?></div>
    <?php endif; ?>

    <?php if ($page['sidebar_first']): ?>
      <div id="sidebar-first" class="column sidebar"><div class="section">
        <?php print render($page['sidebar_first']); ?>
      </div></div> <!-- /.section, /#sidebar-first -->
    <?php endif; ?>

    <div id="content" class="column"><div class="section">
      <?php if ($page['highlighted']): ?><div id="highlighted"><?php print render($page['highlighted']); ?></div><?php endif; ?>
      <a id="main-content"></a>
      <?php print render($title_prefix); ?>
      <?php if ($title): ?>
        <h1 class="title" id="page-title">
          <?php print $title; ?>
        </h1>
      <?php endif; ?>
      <?php print render($title_suffix); ?>
      <?php if ($tabs): ?>
        <div class="tabs">
          <?php print render($tabs); ?>
        </div>
      <?php endif; ?>
      <?php print render($page['help']); ?>
      <?php if ($action_links): ?>
        <ul class="action-links">
          <?php print render($action_links); ?>
        </ul>
      <?php endif; ?>
      <?php print render($page['content']); ?>
      <?php print $feed_icons; ?>

    </div></div> <!-- /.section, /#content -->

    <?php if ($page['sidebar_second']): ?>
      <div id="sidebar-second" class="column sidebar"><div class="section">
        <?php print render($page['sidebar_second']); ?>
      </div></div> <!-- /.section, /#sidebar-second -->
    <?php endif; ?>

  </div></div> <!-- /#main, /#main-wrapper -->

  <?php if ($page['triptych_first'] || $page['triptych_middle'] || $page['triptych_last']): ?>
    <div id="triptych-wrapper"><div id="triptych" class="clearfix">
      <?php print render($page['triptych_first']); ?>
      <?php print render($page['triptych_middle']); ?>
      <?php print render($page['triptych_last']); ?>
    </div></div> <!-- /#triptych, /#triptych-wrapper -->
  <?php endif; ?>

  <div id="footer-wrapper"><div class="section">

    <?php if ($page['footer_firstcolumn'] || $page['footer_secondcolumn'] || $page['footer_thirdcolumn'] || $page['footer_fourthcolumn']): ?>
      <div id="footer-columns" class="clearfix">
        <?php print render($page['footer_firstcolumn']); ?>
        <?php print render($page['footer_secondcolumn']); ?>
        <?php print render($page['footer_thirdcolumn']); ?>
        <?php print render($page['footer_fourthcolumn']); ?>
      </div> <!-- /#footer-columns -->
    <?php endif; ?>

    <?php if ($page['footer']): ?>
      <div id="footer" class="clearfix">
        <?php print render($page['footer']); ?>
      </div> <!-- /#footer -->
    <?php endif; ?>

  </div></div> <!-- /.section, /#footer-wrapper -->

</div></div> <!-- /#page, /#page-wrapper -->
5
  • Just out of curiosity, can you show us your page.tpl.php file(s)?
    – TerryCB
    Commented Apr 27, 2015 at 6:13
  • Hi Terry, pasted it into the post. Nothing changed from the bartik defaults in there.
    – nizz0k
    Commented Apr 27, 2015 at 6:18
  • I don't really get the problem. Set up the templates how ever you want them, but it is a good idea to have an H1 on every page for SEO. If elements are moving use the inspector to find out why (check margin, padding etc.) I think this is a more generate HTML / CSS question that anything Drupal specific.
    – Felix Eve
    Commented Apr 27, 2015 at 6:54
  • Right. It is Bartik's default markup. If there's no H1 specified, as it happens on the frontpage regularly, especially when using views, it will be displayed in header / logo. It is how Bartik works, but not all Drupal themes do that :)
    – designarti
    Commented Apr 27, 2015 at 7:27
  • So, the issue is that because of the h1 tags, it moves the location of my site name div up and down. The issue I'm learning is that my first two pages have the h1 tags, and the rest do not. I don't know why the second page has an h1. I'd like for the markup to be consistent and I don't want to write CSS that just targets the non-front pages. So, how to I stick an h1 on the site name on every page?
    – nizz0k
    Commented Apr 27, 2015 at 8:06

1 Answer 1

2

The rationale here is that for SEO best practices, every page should have a single H1 tag (OK so that's not strictly true with HTML5 but it was when Bartik was conceived). When a page has no title set there would otherwise not be a H1 tag which is often the case on the homepage.

To get around this you can do one of two things...

1. Prevent the H! from being applied to the site name

Change the following

<?php if ($site_name): ?>
  <?php if ($title): ?>
    <div id="site-name"<?php if ($hide_site_name) { print ' class="element-invisible"'; } ?>>
      <strong>
        <a href="<?php print $front_page; ?>" title="<?php print t('Home'); ?>" rel="home"><span><?php print $site_name; ?></span></a>
      </strong>
    </div>
  <?php else: /* Use h1 when the content title is empty */ ?>
    <h1 id="site-name"<?php if ($hide_site_name) { print ' class="element-invisible"'; } ?>>
      <a href="<?php print $front_page; ?>" title="<?php print t('Home'); ?>" rel="home"><span><?php print $site_name; ?></span></a>
    </h1>
  <?php endif; ?>
<?php endif; ?>

To...

<?php if ($site_name): ?>
  <div id="site-name"<?php if ($hide_site_name) { print ' class="element-invisible"'; } ?>>
    <strong>
      <a href="<?php print $front_page; ?>" title="<?php print t('Home'); ?>" rel="home"><span><?php print $site_name; ?></span></a>
    </strong>
  </div>
<?php endif; ?>

2. Don't style the site name based on it's tag type

Do all of you styling for the site name based on the "#site-name" selector, including resetting any default H1 styling.

--- Edit ---

Just seen that you were looking at having the H1 on the site name on all pages. In that case you can change the code in the template mentioned above to:

<?php if ($site_name): ?>
  <h1 id="site-name"<?php if ($hide_site_name) { print ' class="element-invisible"'; } ?>>
    <a href="<?php print $front_page; ?>" title="<?php print t('Home'); ?>" rel="home"><span><?php print $site_name; ?></span></a>
  </h1>
<?php endif; ?>

However, this will cause you to have two H1 tags on most pages which while not technically invalid anymore if you're using an HTML5 doctype (which if you're using Bartik you're probably not), it will have the effect of diluting you keywords, i.e. if you have a page about a given subject, instead of having the H1 tag telling search engines that the page is all about that subject, it will tell them that the page is really about your site name and contains a section about that subject and it won't rank as highly for that subject.

1
  • So, thanks guys, now I'm researching zen vs omega and learning sass...always something new to learn.
    – nizz0k
    Commented May 4, 2015 at 0:56

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.