Text in Images vs. Alt tags
-
Hi on my homepage i h ave multiple images They have the appropriate alt text for each image, but the text which the image displays is not written into the page and styled using CSS rather than placing text within an image.
Is this a issue worth correcting, or is it sufficient to have just alt text for each image.
Any major pros from having putting the text in the image into the CMS using appropriate CSS styling to achieve the same effect.
-
Don't take chances. Put any text that you want search engines to see out there where visitors will see it - in text.
-
I strongly prefer all text to be displayed as HTML text rather then embedded in images.
PROS:
-
text can be changed very quickly as needed. This is helpful for translations, keyword changes, etc. Changes of images may require a designer and developer whereas a text change can often be done by a site owner.
-
any time an image is updated, you either have to update the site's code or deal with caching issues where some users will see the old image
-
search engines can always read the text and there is a 100% confidence what is being read by the crawler is also being viewed by users
CONS:
- If you desire a very specific font or styling, it could be altered by various browsers at times. This can easily be avoided by either choosing from one of the many popular fonts or using CSS3 to make the font available to the viewer
Tests have been performed to show currently Google evaluates alt text and html text equally. I strongly believe at some point this will change. Google strongly desires to align their evaluations with the user experience. Alt text is very commonly manipulated whereas text can be trusted to a much higher degree.
-
-
Great question. Yes, it would be much better to put the text on the page via the CMS with CSS to achieve the same look as you have right now. The reason is that a SE spider cannot crawl text that is embedded in an image. All the spider will "see" is that it is an image containing whatever is described by your "alt" attributes. If you want search engines to be able to "read" that content, I would recommend going the route of making it actual text styled in conjunction with the image you want via CSS as you propose.
Hope that helps!
Dana
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
-
Using WebP Image Alongside Existing Images
Is it worthwhile to add in WebP images alongside existing images? WebP Images can be three times smaller than PNGs and 25% smaller than JPGs, according to a plugin option I am looking at. The alternative WebP images are provided via CDN. Does anyone have any experience with this, and is it worth doing?
Web Design | | GrouchyKids0 -
Organization name as text vs. as a picture with alt text + Schema.org markup
I'm looking for some feedback to implement best practice for the markup of our header/navigation at the top of our site. Our organization name and a tag line is at the top of every page on the left, then our logo, then our navigation to items like "Topics" "FAQs" "About us" etc is to the right along the top. Our organization name includes the most frequently searched keyword for what we want to rank on, and our organization name is our domain name. A couple other background items: we're a non-profit startup and no code is public yet -- hence, I'll be explaining what we're going for. We're coding in straight html/css, not using Wordpress or anything like that. When we originally DIY coded our draft homepage and a few landing pages, we put the organization name and tag line into the markup as text, to look like this: Organization name | Pretty | Navigation items over here
Web Design | | scienceisrad
Explanatory fun tag line | Cool |
--------------------------------------- | Logo | --------------------------------------------------------- Then we outsourced the markup of two more landing pages to a company that does on-demand orders for responsive markup, based on png's we sent of the designs. The company's code renders a fabulous looking version of our design, and important for usability, it is responsive. The company also did something else I'm not so sure of. They made one big image out of our organization name, tag line and logo ... because? The indenting and different font sizes of the Organization name and tag line was too hard to code in? Or is it just best practice for html standards, SEO, etc. to make it one big logo?? Now, as part of an overall effort I'm working on to reconcile our different code ... I'm mulling right now specifically on reconciling the different approaches we each took and incorporating new best practices for the header ... based on what I'm reading online about headers, including debates about whether to use h1 for your company name, whether using an image for the name is fine, advice about including Schema.org markup for logos, etc. Given all this, which of these two options look better to you? Do they seem equally good to you? What would you change about the one that looks better to you? What do I have wrong in them? Or would you code this entirely differently to hit all best practices? What do you think about using h1 for organization name vs. is there a better tag to use for the organization name to code it in as text? (Note: we have other h1's on our pages for the actual article/content titles of each page, which maybe we should, maybe we shouldn't be having those as h1's?) Option 1 -- using text for our name and tag line: <header id="top" class="brandfont brandcolor">
[# Organization name Explanatory fun tag line](/) Organization name logo {navigation code here}
</header> Option 2 -- name, tag line and logo all as one big png image: <header id="header" class="container"> Organization name tag line {navigation code here}
</header>1 -
Google text-only vs rendered (index and ranking)
Hello, can someone please help answer a question about missing elements from Google's text-only cached version.
Web Design | | cpawsgo
When using JavaScript to display an element which is initially styled with display:none, does Google index (and most importantly properly rank) the elements contents? Using Google's "cache:" prefix followed by our pages url we can see the rendered cached page. The contents of the element in question are viewable and you can read the information inside. However, if you click the "Text-only version" link on the top-right of Google’s cached page, the element is missing and cannot be seen. The reason for this is because the element is initially styled with display:none and then JavaScript is used to display the text once some logic is applied. Doing a long-tail Google search for a few sentences from inside the element does find the page in the results, but I am not certain that is it being cached and ranked optimally... would updating the logic so that all the contents are not made visible by JavaScript improve our ranking or can we assume that since Google does return the page in its results that everything is proper? Thank you!0 -
Should we include our header logo in a sprite or leave it as a regular image?
We are combining the images in our header and footer into sprites. We noticed that when we include our header logo in the sprite, we lose the "alt" text associated with the header logo. Is this undesirable? Would it be better to leave the logo in our header as an image with "alt" text? Here's the link: http://www.ccisolutions.com
Web Design | | danatanseo0 -
What is the best slideshow pluggin for seo in order to show alt of the images
what is the best slideshow pluggin for seo in order to show alt of the images
Web Design | | maestrosonrisas0 -
H1 tag optimization question
Hey folks, I've got a question about h1 coding. Our H1 tags are currently coded like this: [http://www.rapitup.com/mf-doom](<a href=)" class=" current">MF Doom Do you think this would be better? [http://www.rapitup.com/mf-doom](<a href=)" class=" current"> MF Doom My guess is that the second example would be better, and even if not better we know it's not worse. Thoughts? Thanks!
Web Design | | irvingw0 -
3rd party commenting systems vs native?
I'm curious what you all think about using a 3rd party commenting system (like Disqus) vs the native wordpress commenting system? I've read so many reviews online it makes my head spin, so I wanted to see if any of you have any experience, or perhaps some trusted case studies. I was using the native comment system for a while, and then tried out Disqus; which seems to be good, but I'm not sure if people know how to easily get notified of new comments. With the native system there was a check box that said "subscribe," plus I used a plugin to redirect a first time commenter to a welcome page, as well as sent an email to them. I feel like Disqus makes it harder for people to get notified on new comments. However, I like giving people the ability to log in via different 3rd party channels (facebook/twitter/disqus, etc.) I know there are some 3rd party tools that allow you to do this on the native comment system as well. Any way, I'm just curious if anyone had any experience. Also I'm assuming the audience makes a big difference. My target readership is mommy's and parents, and not necessarily a 'tech" one; so I want to make the ability to comment very simple and easy for them. That's key. I'm sort of leaning on moving back over to the Wordpress comment system.
Web Design | | NoahsDad0 -
Replaceing text prices with graphics
Hello all: You probably noticed Google showing product prices in SERP snippets and this did not do us well because there was a noticable drop off in click throughs to the site with the price displaying in snippet. So we're replacing them with graphic prices instead. Does anyone see a problem with that in as far as how Google ranks our pages? Thanks!
Web Design | | holdtheonion0