Support » Fixing WordPress » PHP code for h1 optimisation with logo

  • I am trying to improve the SEO of my website http://www.frenchtouchmusic.com
    The h1 of the blog is an image and doesn’t have a html text. Here is the code that is in my header:

    <div class="logo">
            <?php if ($theme->get_option('themater_logo_source') == 'image') { ?>
               <h1><a href="<?php echo home_url(); ?>"><img src="<?php $theme->option('logo'); ?>" alt="<?php bloginfo('name'); ?>" title="<?php bloginfo('name'); ?>" /></a></h1>
            <?php } else { ?>
                <?php if($theme->display('French Touch Music - French House and Electronic Music News')) { ?>
                    <h1 class="site_title"><a href="<?php echo home_url(); ?>"><?php $theme->option('site_title'); ?></a></h1>
                <?php } ?> 
    
                <?php if($theme->display('site_description')) { ?>
                    <h2 class="site_description"><?php $theme->option('site_description'); ?></h2>
                <?php } ?>
            <?php } ?>
            </div><!-- .logo -->

    `

    How could I change the php code to keep the logo and get also a html h1?
    Cheers.

Viewing 14 replies - 1 through 14 (of 14 total)
  • Put the logo as background and keep the h1 text. Or put the h1 text someplace else on the page. There really is no way to optimize SEO if you use an image in place of h1 text.

    What I normally do is enable the site title and hide it out of the way with a text indent in CSS.

    .site-title{
    text-indent:-9999px;
    }

    But at the moment, the logo is not even visible…

    @cedar Point – but according to Google Webmaster Tools, that not ideal either…

    http://support.google.com/webmasters/bin/answer.py?hl=en&answer=66353

    Thread Starter frenchtouchmusic

    (@frenchtouchmusic)

    The logo is now visible!
    Sorry, I’m not a specialist of php. What code should I add to put the logo as background and keep the h1 text?
    @cedar: where should I add this code?

    @wpyogi – I’ve been dealing with this issue for years and is always in debate. I have found it to be the best way SEO-wise for my sites. There are several other ways including using overflow and padding, hiding the text in an image alt tag, and simply display:none. Google is generally not thrilled about any of them but, used sparingly, is not an issue in my experience.

    It would go into your CSS but I do suggest that you check the link that WPyogi posted above. There are always more ways to skin a cat.

    I totally agree with you — but as you posted secondly, better to avoid suggesting that hiding it that way is completely clean :). I also think people get hung up way too much on little details of SEO — when it’s really VERY complicated and in most cases no one thing like this is going to make it or break it. This is one of those places that Google’s algorithms are really kind of stupid in my book…I don’t think people should be penalized for using an artistic image as a header…

    Thread Starter frenchtouchmusic

    (@frenchtouchmusic)

    What are your recommendations in order to get a h1 for my website?
    Is it possible to get an h1 different from the logo maybe? What would be the code to add?

    Thanks for your help!

    this would be the html:
    <div id="bg-logo"><h1>Text</h1></div>
    this would be the css:
    #bg-logo { background: url ( 'file/path/to/images/your-image.png' ) left top no-repeat; }

    You need to go to Settings>General and enter your site title. It should now appear along with your logo. To hide it you need to enter the CSS I entered above or one of the options in the link WPyogi posted.

    Thread Starter frenchtouchmusic

    (@frenchtouchmusic)

    My site title was already included on Settings>General
    @cedar: I tried to include the indent code in CSS but it didn’t work. Maybe it was not at the right place?

    @demetrius: I tried your solution but I’m not sure what I need to erase before including these 2 codes. Culd you be more specific about what to erase, what to add and where please?

    Thank you

    All you should have to do is to add your image into your css style sheet. Open up your style sheet and find .logo
    then paste in:
    background: url ( 'file/path/to/images/your-image.png' ) left top no-repeat;

    You’ll have to make sure your file path is correct. It may be something like:
    ../images/your-image.png
    don’t forget the the two dots .. before the slash /
    like this:
    ../
    You may have to play with that a while to find the correct file path.

    A little more specific:
    It will look like this in your style sheet when you’re done:

    .logo {
                 background: url ( 'file/path/to/images/your-image.png' ) left top no-repeat;
    }
Viewing 14 replies - 1 through 14 (of 14 total)
  • The topic ‘PHP code for h1 optimisation with logo’ is closed to new replies.