The Moz Q&A Forum

    • Forum
    • Questions
    • My Q&A
    • Users
    • Ask the Community

    Welcome to the Q&A Forum

    Browse the forum for helpful insights and fresh discussions about all things SEO.

    1. SEO and Digital Marketing Q&A Forum
    2. Categories
    3. Web Design
    4. H1 image replacement question

    H1 image replacement question

    Web Design
    6 2 4.0k
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as question
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • c2g
      c2g last edited by

      Working with content folks on a new section of our website. Developed a new logo for this section of the site, and they want to incorporate the style of it into all of the page headings. The only way to pull this off is to use images for H1's. (Without getting into unnecessary detail, they have to be images - too precise to try text over background images.)

      I made everyone aware of the importance of H1 text for SEO purposes, but they really want these images.

      When I first attempted SEO back in 2003, I recall doing a site using CSS image replacement along these lines:

      Widget Page

      #example {
          background: url(../images/example.gif) no-repeat;
          text-indent: -5000px;
           }

      That was nearly 10 years ago, and they definitely ranked for the H1s at the time which led me to believe it worked.

      Anyone know if this is considered an acceptable practice today? I read some other threads about enclosing the image in

      tags and relying on the ALT text, but that doesn't seem to be a good option.

      1 Reply Last reply Reply Quote 0
      • jgower
        jgower last edited by

        Why do they have to be H1?

        Anyway...Matt Cutts says no CSS hiding!

        http://www.youtube.com/watch?v=fBLvn_WkDJ4

        c2g 1 Reply Last reply Reply Quote 1
        • c2g
          c2g @jgower last edited by

          This post is deleted!
          jgower c2g 3 Replies Last reply Reply Quote 0
          • jgower
            jgower @c2g last edited by

            I get it, just not sure that it's 'ok' to do...anytime you're hiding something, it cant be good right? 🙂  Anyway, I'd do something like:

             <code>#  <img< span="">src="whatever.jpg"  alt="whatever"  /></img<></code> 
            

            That should work right?  At least, I think it's your best bet.  I will say that I do have competitors that do what you are wanting to do and some are higher than me in rankings, so...your call, but I wouldn't.

            1 Reply Last reply Reply Quote 1
            • c2g
              c2g @c2g last edited by

              Yeah, seems like either of these options would work. Yours seems like the safe route.

              For my method, it's easy to see how someone could use it just to stuff the actual H1 with keywords that have nothing to do with the image and then move them off-screen. My content people's argument was that if we do it and our text in the image matches exactly what we're pushing off-screen, then we should have nothing to worry about.

              My only fear would be that some algorithm sees a margin-left set to some large negative number and assumes it's black hat.

              1 Reply Last reply Reply Quote 0
              • jgower
                jgower @c2g last edited by

                Yeah, and we have no idea what's at play.  I mean, if we look around the net and see who is abusing with CSS hiding and who isn't my guess is that 95% of people abuse it...and if I'm Google I'm going to go ahead and put it an automatic point deduction somehow based on how many of those I see, then hope that people who manually rate these sites 'undo' the auto deduction.  At least, that's what would make the most sense.

                I wouldn't risk it, but that's just me.  I'm sure the alt tag in the h1 would do just fine and doesn't 'hide' anything...Although...you could certainly abuse that as well since it's mostly hidden, lol.  Just use a flippin google fonts or a cufon font replacement and make it as close to what you want as possible.  The less images the better! 🙂  My competitor could easily make their h1 image into text and it would probably look even better than the image they use.

                1 Reply Last reply Reply Quote 0
                • 1 / 1
                • First post
                  Last post
                • How to find out that none of the images on my site violates copyrights? Is there any tool that can do this without having to check manually image by image?
                  EGOL
                  EGOL
                  1
                  6
                  120

                • To Genesis or not to Genesis that is the question
                  aap82
                  aap82
                  0
                  11
                  1.4k

                • Schema question
                  esiow2013
                  esiow2013
                  0
                  3
                  182

                • Using H1 in a carousel
                  NaescentAdam
                  NaescentAdam
                  0
                  2
                  2.2k

                • H1 tag optimization question
                  pmann79
                  pmann79
                  0
                  4
                  427

                • Question for a developer out there...
                  KeriMorgret
                  KeriMorgret
                  0
                  7
                  426

                • Another Panda question
                  SparkplugDigital
                  SparkplugDigital
                  0
                  2
                  665

                • Image Maps vs. Normal Images
                  RyanPurkey
                  RyanPurkey
                  0
                  2
                  880

                Get started with Moz Pro!

                Unlock the power of advanced SEO tools and data-driven insights.

                Start my free trial
                Products
                • Moz Pro
                • Moz Local
                • Moz API
                • Moz Data
                • STAT
                • Product Updates
                Moz Solutions
                • SMB Solutions
                • Agency Solutions
                • Enterprise Solutions
                • Digital Marketers
                Free SEO Tools
                • Domain Authority Checker
                • Link Explorer
                • Keyword Explorer
                • Competitive Research
                • Brand Authority Checker
                • Local Citation Checker
                • MozBar Extension
                • MozCast
                Resources
                • Blog
                • SEO Learning Center
                • Help Hub
                • Beginner's Guide to SEO
                • How-to Guides
                • Moz Academy
                • API Docs
                About Moz
                • About
                • Team
                • Careers
                • Contact
                Why Moz
                • Case Studies
                • Testimonials
                Get Involved
                • Become an Affiliate
                • MozCon
                • Webinars
                • Practical Marketer Series
                • MozPod
                Connect with us

                Contact the Help team

                Join our newsletter
                Moz logo
                © 2021 - 2026 SEOMoz, Inc., a Ziff Davis company. All rights reserved. Moz is a registered trademark of SEOMoz, Inc.
                • Accessibility
                • Terms of Use
                • Privacy