Replace Header Text With Image
-
I have a static website that I would like to retheme. I have the mockup, and its spliced. The website holds nice rankings right now, and I want to keep them in place. The one thing that will change with this new design is the header will no longer be text, but instead an image. Is there a way to ensure googlebot still sees the H1 tag header exactly how it is now but use an image for the header instead?
I dont want any blackhat tricks that will get me banned. Just wondering if there is a simple way to have googlebot see the header as text (not ALT img txt) so the site does not appear to have changed at all. (It hasnt, I only am changing the graphics and colors of background, and header image for better branding.
-
To achieve a balance between visual aesthetics and search engine interoperability, you could use a Javascript font renderer like cufon: http://cufon.shoqolate.com/generate/ - which will give you nice anti-aliasing.
Look at Google Fonts too - http://www.google.com/webfonts#ChoosePlace:select
I would redesign & work towards getting a H1 on there rather than working backwards
-
Egol is correct.
your redesign has a cost, the desision is yours, what is more important, the HI or the design, only you know that.
-
You just need to make sure that the search engines will see your site exactly as visitors would see it. Don't try and hide anything. And I agree, try and keep the H1 tag.
And to answer your original question, the search engines have come a long way in terms of sophistication, but they still do not do so well with interpreting graphics, cookies, or javascript. Just good 'ole text.
-
I can leave the H1 tag in, I just dont know where to put it. Its my header, and the website now is VERY ugly. Maybe I will just put the H1 in there above the image, and then use a negative margin. Is that allowed?
-
You are going to use different html mark-up for the image and the h1.
They are not equivalent.
If you use the image you can add alt text but that is not going to be the same as H1 - less effective in my opinion.
If you can't get H1 into your site any other way then loss of the H1 will be part of the cost of your redesign.
If this was my site I would not give up H1 for an artsy image.
Got a burning SEO question?
Subscribe to Moz Pro to gain full access to Q&A, answer questions, and ask your own.
Browse Questions
Explore more categories
-
Moz Tools
Chat with the community about the Moz tools.
-
SEO Tactics
Discuss the SEO process with fellow marketers
-
Community
Discuss industry events, jobs, and news!
-
Digital Marketing
Chat about tactics outside of SEO
-
Research & Trends
Dive into research and trends in the search industry.
-
Support
Connect on product support and feature requests.
Related Questions
-
Google Showing wrong image in the SERPS
Hi Guys, In organic SERPS Google pulling incorrect product image, instead of product image its showing image from relevant products, Checked the structured data, og:image everything is set to the product image, not sure why google showing images from relevant product sidebar, any help, please?
Technical SEO | | SpartMoz0 -
Is Tag Manager a good option to insert text in websites?
Is Tag Manager a good option to insert text in websites? When a website doesn't have an administration panel adding text is a very big problem.
Technical SEO | | propertyshark0 -
Are image pages considered 'thin' content pages?
I am currently doing a site audit. The total number of pages on the website are around 400... 187 of them are image pages and coming up as 'zero' word count in Screaming Frog report. I needed to know if they will be considered 'thin' content by search engines? Should I include them as an issue? An answer would be most appreciated.
Technical SEO | | MTalhaImtiaz0 -
Using Javascript to Display Responsive Images?
Hi We're making our new website responsive and are thinking of using a solution that would resize the images using javascript. So the image would be displayed like this <div data-src="/img/200x100.png">div> depending on what size fits the screen Is is okay for SEO? Or do we also need a fall back that doesn't use javascript? Thanks
Technical SEO | | ShearingsGroup0 -
CSS Float Top Left Image not displaying
Using CSS/HTML in Dreamweaver CC, I am trying to display a SEO friendly matrix of six images wide by three deep on the Home Page, but cannot get the first (top left) image to display consistently. The page appears correctly in Dreamweaver Design View, but not in the Live View. Equally it works fine in Safari, but not in Firefox nor I.E. I seem to have tried every CSS variation to resolve this issue, without success. Can someone stear me in the right direction, please? The relevant HTML Code ... Celotex PL4050 - 62.5mm insulated wallboard from £11.96 per m² / £34.45 per board SuperFoil SF19 40mm Multi-foil Roll from £5.23 per m² / £98.00 per 18.75 m² Roll Celotex GA4000 General application Rigid PIR from £8.56 per m² / £24.66 per board Rockwool Full-fill 75mm Cavity Wall Slabs from £3.51 per m² / £1.92 per slab Knauf Earthwool 270mm Loft Roll 44 Combi-Cut from £3.80 per m² / £22.51 per 9.93 m² Roll Kingspan Kooltherm K8 75mm Cavity Wall Boards from £16.26 per m² / £8.79 per board Knauf Earthwool 170mm Combi-cut Loft Roll 44 from £3.16 per m² / £25.34 per 8 m² Roll Kingspan Kooltherm K7 Rigid Phenolic Foam - 75mm £13.91 per m² / £40.05 per board ... The associated CSS code ... #popular {
Technical SEO | | JustInsulation
width: 1050px;
height: 800px;
overflow: hidden;
width: auto;
height: auto;
}
#product1 {
background-image: url(../007-graphics/popular/01-prod.png);
background-repeat: no-repeat;
width: 150px;
height: 265px;
margin-left: 24px;
float: left;
overflow: auto;
clear: left;
}
#product2 {
background-image: url(../007-graphics/popular/02-prod.png);
background-repeat: no-repeat;
width: 150px;
height: 265px;
margin-left: 10px;
float: left;
opacity: 0.85;
}
#product3 {
background-image: url(../007-graphics/popular/03-prod.png);
background-repeat: no-repeat;
width: 150px;
height: 265px;
margin-left: 10px;
float: left;
max-height: 275px;
opacity: 0.85;
}
#product4 {
background-image: url(../007-graphics/popular/04-prod.png);
background-repeat: no-repeat;
width: 150px;
height: 265px;
margin-left: 10px;
float: left;
max-height: 275px;
}
#product5 {
background-image: url(../007-graphics/popular/05-prod.png);
background-repeat: no-repeat;
width: 150px;
height: 265px;
margin-left: 10px;
float: left;
max-height: 275px;
opacity: 0.85;
}
#product6 {
background-image: url(../007-graphics/popular/06-prod.png);
background-repeat: no-repeat;
width: 150px;
height: 265px;
margin-left: 10px;
float: left;
max-height: 275px;
opacity: 0.85;
}
#product7 {
clear: both;
background-image: url(../007-graphics/popular/07-prod.png);
background-repeat: no-repeat;
width: 150px;
height: 265px;
margin-left: 24px;
float: left;
max-height: 275px;
opacity: 0.85;
}
#product8 {
background-image: url(../007-graphics/popular/08-prod.png);
background-repeat: no-repeat;
width: 150px;
height: 265px;
margin-left: 10px;
float: left;
max-height: 275px;
}
#product9 {
background-image: url(../007-graphics/popular/09-prod.png);
background-repeat: no-repeat;
width: 150px;
height: 265px;
margin-left: 10px;
float: left;
max-height: 275px;
opacity: 0.85;
} ... The complete code is located at - www.just-insulation.com/index.html0 -
Is it a problem to have an image + link in your menu
Hi, My menu has a image with links to some of the main pages on the site and text underneath it explaining what the banner is. Will it be beneficial or harmful to have the text hyperlinked to the same pages the images go to?
Technical SEO | | theLotter0 -
What happens when you put an image in an H1 tag?
I am currently updating some H1 tags for my site but the tags are generated automatically by the text that is entered into a field on our content manager software. However because we need an image in this area as well, the entire field including the code for the image is surrounded by an H1 tag. Is this bad for SEO?
Technical SEO | | eVacStore0 -
What is the best way to replace a .co.uk with a .com name
Hi i would like to know about my site which is www.in2town.co.uk which i am currently revamping and i am now in the process of buying a .com name and would like to know the best way to uise it. What i mean is, i have a lot of links going to the www.in2town.co.uk and would like to know should i do a permantent redirect to the .co.uk with the .com or is it possible to have the co.uk replaced with the .com i am trying to work out the best way to do this at the moment as i have never done this before. now after buying the .com for my domain name i would like to know should i use it as a redirect to my main site, or should i develop a sister site and use it. any advice would be great.
Technical SEO | | ClaireH-1848860