Creative/efficient ways to add H1 tag to index?

  • Resolved ggg377

    (@ggg377)


    11 years, 1 month ago

    Hi everyone,

    I can’t figure out a way to include an H1 tag in my index without messing something up. All my post titles are H2’s, I have a fixed header, which has a logo with a CSS hover in it. I figured I should try adding the H1 tag to the logo image, but then the H1 tag would appear on all pages on my site, causing duplicate H1 entries and I don’t want that to happen. I don’t want the solution to be frowned upon by search engines (for example, prohibited hiding etc). In a nutshell, I need the H1 tag only in my index (considering I have a fixed header) and it should be a valid technique.

    I couldn’t figure out something like this myself, so I decided to ask for help. If you have any ideas on this topic, please share them 🙂

    Additional materials

    an illustration of my layout: http://i.imgur.com/GTFBdUl.png
    index.php: http://pastebin.com/G5ZfZExa

    How the logo is currently implemented through header.php and style.css

    <div id="site-title"><a href="<?php bloginfo('url'); ?>"></a></div>
    #site-title {
margin: 7px 0 0 0; padding: 0;
width: 141px;
height: 31px;
float: left;
clear:both;
display: block;
}

#site-title a {
display: block;
width: 141px;
height: 31px;
    background-image: url('/barlogo.png');
}

#site-title a:hover {
display: block;
width: 141px;
height: 31px;
    background-image: url('/barlogohover.png');
}
Viewing 3 replies - 1 through 3 (of 3 total)
  • asarosenberg

    (@dotnordic)

    11 years, 1 month ago

    You can use WordPress function is_front_page() to print out some code only on the frontpage. Example

    <?php
if ( is_front_page() ) {?>
<h1>Header for frontpage</h1>
<?php
} else {
?>
<h2>Header for other pages</h2>
<?php
}?>
    Thread Starter ggg377

    (@ggg377)

    11 years, 1 month ago

    For general notice, I set up a sample site here: http://goldenred.web44.net

    Thanks for replying dotnordic. I think that’s a good suggestion and that’s probably how I’m going to approach this. I ran into some issues with coding. When I used the following code, the h1 text title shows up over the logo image:

    <?php
if ( is_front_page() ) {?>
<h1 id="primary-title"><a href="<?php bloginfo('url'); ?>">my title</a></h1>
<?php
} else {
?>
<h2 id="secondary-title"><a href="<?php bloginfo('url'); ?>">my title</a></h2>
<?php
}?>
    #primary-title {
margin: 7px 0 0 0; padding: 0;
width: 141px;
height: 31px;
float: left;
clear:both;
display: block;
}

#primary-title a {
display: block;
width: 141px;
height: 31px;
    background-image: url('http://goldenred.web44.net/wp-content/uploads/2013/02/yawn.jpg');
}

#primary-title a:hover {
display: block;
width: 141px;
height: 31px;
    background-image: url('http://goldenred.web44.net/wp-content/uploads/2013/02/yawnhover.jpg');
}

#secondary-title {
margin: 7px 0 0 0; padding: 0;
width: 141px;
height: 31px;
float: left;
clear:both;
display: block;
}

#secondary-title a {
display: block;
width: 141px;
height: 31px;
    background-image: url('http://goldenred.web44.net/wp-content/uploads/2013/02/yawn.jpg');
}

#secondary-title a:hover {
display: block;
width: 141px;
height: 31px;
    background-image: url('http://goldenred.web44.net/wp-content/uploads/2013/02/yawnhover.jpg');
}

    The CSS also seems kind of inefficient, because it uses the same code twice. I think it should be possible to do it without the h1 title (“my title” in the code snippet) showing though, I’ve seen it on many popular sites like yoast, hongkiat etc, just without the hover effect. If anyone has ideas on how to fix the code I would be glad to hear them.

    The problem is displayed in the sample site.

    Thread Starter ggg377

    (@ggg377)

    11 years, 1 month ago

    I’m going to mark this topic as resolved and start a new topic on my other issue later. It’s going to be impossible for me to get this issue solved, because the title doesn’t match the actual problem I developed at all.

    Most of all, the original goal of this thread was reached. Thanks, dotnordic.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Creative/efficient ways to add H1 tag to index?’ is closed to new replies.