WordPress.org

Ready to get started?Download WordPress

Forums

PHP code for h1 optimisation with logo (15 posts)

  1. frenchtouchmusic
    Member
    Posted 1 year ago #

    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.

  2. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    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.

  3. CPC Mike
    Member
    Posted 1 year ago #

    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;
    }
  4. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

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

  5. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    @Cedar Point - but according to Google Webmaster Tools, that not ideal either...

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

  6. frenchtouchmusic
    Member
    Posted 1 year ago #

    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?

  7. CPC Mike
    Member
    Posted 1 year ago #

    @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.

  8. CPC Mike
    Member
    Posted 1 year ago #

    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.

  9. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    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...

  10. frenchtouchmusic
    Member
    Posted 1 year ago #

    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!

  11. Demetrius Pop
    Member
    Posted 1 year ago #

    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; }

  12. CPC Mike
    Member
    Posted 1 year ago #

    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.

  13. frenchtouchmusic
    Member
    Posted 1 year ago #

    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

  14. Demetrius Pop
    Member
    Posted 1 year ago #

    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.

  15. Demetrius Pop
    Member
    Posted 1 year ago #

    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;
    }

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags