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 -
Why Is Google Showing My Images Upside Down in the Index?
Hi, My client has PDFs of their catalog on the site which google is indexing. However, it seems that google is taking an image from the catalog and then showing it upside in the index for images/search results. The images are not upside down on the site. Has anyone heard of this happening before or does anyone know a way to fix it? Thanks
Web Design | | AliMac260 -
Wordpress Tag Organization Tips
Curious if anyone has some good examples of ways to organize your WordPress tags without making your sidebar a football field long and hard to navigate. My blog is https://karmahill.com/blog and I could use some ideas. We have main categories of photo shoot types, for example, "Couples", located on the sidebar. We want to add tags to go with those main categories for further categorization and user experience example: Couples Engagement Proposals Honeymoon Maternity My question is, do I need to make "tag" pages for those posts to reside on or is their another way to get it done with less work, that is much faster? I don't want to have to make 30 tag pages or is that just what you have to do?
Web Design | | photoseo13 -
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?
We plan to add several thousand images to our site and we outsourced the image search to some freelancers who had instructions to just use royalty free pictures. Is there any easy and quick way to check that in fact none of these images violates copyrights without having to check image by image? In case there are violations we are unaware of, do you think we need to be concerned about a risk of receiving Takedown Notices (DMCA) before owner giving us notification for giving us opportunity to remove the photo?
Web Design | | lcourse1 -
Bing Indexation and handling of X-ROBOTS tag or AngularJS
Hi MozCommunity, I have been tearing my hair out trying to figure out why BING wont index a test site we're running. We're in the midst of upgrading one of our sites from archaic technology and infrastructure to a fully responsive version.
Web Design | | AU-SEO
This new site is a fully AngularJS driven site. There's currently over 2 million pages and as we're developing the new site in the backend, we would like to test out the tech with Google and Bing. We're looking at a pre-render option to be able to create static HTML snapshots of the pages that we care about the most and will be available on the sitemap.xml.gz However, with 3 completely static HTML control pages established, where we had a page with no robots metatag on the page, one with the robots NOINDEX metatag in the head section and one with a dynamic header (X-ROBOTS meta) on a third page with the NOINDEX directive as well. We expected the one without the meta tag to at least get indexed along with the homepage of the test site. In addition to those 3 control pages, we had 3 pages where we had an internal search results page with the dynamic NOINDEX header. A listing page with no such header and the homepage with no such header. With Google, the correct indexation occured with only 3 pages being indexed, being the homepage, the listing page and the control page without the metatag. However, with BING, there's nothing. No page indexed at all. Not even the flat static HTML page without any robots directive. I have a valid sitemap.xml file and a robots.txt directive open to all engines across all pages yet, nothing. I used the fetch as Bingbot tool, the SEO analyzer Tool and the Preview Page Tool within Bing Webmaster Tools, and they all show a preview of the requested pages. Including the ones with the dynamic header asking it not to index those pages. I'm stumped. I don't know what to do next to understand if BING can accurately process dynamic headers or AngularJS content. Upon checking BWT, there's definitely been crawl activity since it marked against the XML sitemap as successful and put a 4 next to the number of crawled pages. Still no result when running a site: command though. Google responded perfectly and understood exactly which pages to index and crawl. Anyone else used dynamic headers or AngularJS that might be able to chime in perhaps with running similar tests? Thanks in advance for your assistance....0 -
Wordpress Theme is blocking alt tags. Does anybody know of any special plugins?
We have a special wordpress theme for nataliecass.com. Unfortunately the theme is blocking all the alt tags (this is a photography website...alt tags are very important). Does anybody know of any special WP plugins for alt tags? Thanks
Web Design | | VanguardCommunications0 -
Need help with image resizing (re: slow site)
I'm trying to figure out why I'm having speed issues with my site, and using google speed test to help me knock out some of the issues. One of issues deals with image resizing. I have a responsive design and so even though on the home page the normal width is 580 of the blog area, the full post can go up to 1170. So I size all of my images to 1170 wide and let CSS resize them depending on the size of the browser. (The images on the most recent post are a little bigger than this because I was testing something.) I was wondering what the best practice was in regard to what I'm trying to do. Also feel free to check out my site and let me know of any other feedback / advice you have. Thanks !:)
Web Design | | NoahsDad0 -
Crawl Budget vs Canonical
Got a debate raging here and I figured I'd ask for opinions. We have our websites structured as site/category/product This is fine for URL keywords, etc. We also use this for breadcrumbs. The problem is that we have multiple categories into which a category fits. So "product" could also be at site/cat1/product
Web Design | | Highland
site/cat2/product
site/cat3/product Obviously this produces duplicate content. There's no reason why it couldn't live under 1 URL but it would take some time and effort to do so (time we don't necessarily have). As such, we're applying the canonical band-aid and calling it good. My problem is that I think this will still kill our crawl budget (this is not an insignificant number of pages we're talking about). In some cases the duplicate pages are bloating a site by 500%. So what say you all? Do we just simply do canonical and call it good or do we need to take into account the crawl budget and actually remove the duplicate pages. Or am I totally off base and canonical solves the crawl budget issue as well?0