Official statement
Google recommends using the ALT attribute for logos instead of hiding text with CSS. This approach avoids the risk of penalties for hidden text and simplifies readability for search engines. Essentially, this means moving away from CSS image replacement techniques (Phark, FIR, Kellum) in favor of a simple descriptive attribute on the image tag.
What you need to understand
Why does Google prefer the ALT attribute over hidden text in CSS?
The issue of hidden text in CSS frequently arises in SEO discussions. Historically, developers hid logo text using techniques like text-indent: -9999px or font-size: 0 to visually replace text with an image while keeping the HTML markup accessible.
The problem? Google sees these practices as potentially manipulative. Hidden text can be used to stuff invisible keywords for users but readable by bots. The ALT attribute, on the other hand, is explicitly designed to describe the content of an image, making it semantically legitimate.
What is image replacement and why is it risky?
Image replacement refers to CSS techniques that allow HTML text to be replaced by a background image. Traditional methods (Phark, Gilder/Levin, Kellum) hide the text off-screen or make it invisible. While these approaches work visually, they create a dissonance between what the user sees and what the bot reads.
Google has always maintained an ambiguous position on this matter. Some forms of image replacement are tolerated if the intent is not manipulative. Others can trigger manual or algorithmic filters. The line remains blurry, which is why Google is pushing for a clearer solution: the ALT attribute as the only standard.
How does the ALT attribute technically simplify logo processing?
The ALT attribute has been part of the HTML standard since its inception. It informs search engines and screen readers what an image represents when it cannot be displayed. For a logo, this is typically the brand name or a short description like "Logo of [Company]".
On the crawling side, this prevents Google from needing to interpret complex CSS styles to understand that a block contains hidden text. The bot reads the attribute directly, reducing the processing load and eliminating any ambiguity about the webmaster's intent. This is a clean approach, compatible with accessibility standards (WCAG) and adherent to good HTML practices.
- The ALT attribute is semantically designed to describe images, unlike hidden text in CSS which remains a visual manipulation.
- Google can process the ALT without analyzing the CSS, which speeds up crawling and reduces the risks of interpretation errors.
- Image replacement techniques (negative text-indent, zero font-size) have historically been associated with spam and remain in a gray area.
- Web accessibility (WCAG) requires a relevant ALT attribute on informative images, aligning SEO with legal compliance.
- No known penalties for properly used ALT, while hidden text can trigger manual filters if poorly implemented.
SEO Expert opinion
Is this recommendation really new or just a reminder?
Let's be honest: Google isn’t saying anything revolutionary here. The ALT attribute has been recommended for years for all images, including logos. What has changed is the firmness of the tone. Google no longer says "it's a good practice", but "avoid hiding text with CSS".
In practice, I still see many e-commerce sites and CMS platforms using image replacement techniques by default. Some modern CSS frameworks (Foundation, older Bootstrap) even included these methods in their documentation. Google's statement likely aims to accelerate the abandonment of these practices rather than announce an algorithm change.
What edge cases does this statement not cover?
The statement remains vague on several points. For instance, what to do when a logo contains non-essential decorative text (baseline, slogan) in addition to the brand name? Should everything go in the ALT or just the name? Google does not clarify. [To check] on real sites with Google Search Console.
Another gray area involves inline SVG logos with actual text in the SVG code. Technically, this is neither hidden CSS nor an ALT attribute. Does Google read this text? The official documentation says nothing. Based on my tests, yes, but without a guarantee of equivalent weight to an ALT or H1. This is where Google's lack of precision becomes frustrating for a practitioner.
Are there situations where hiding text in CSS remains acceptable?
Some techniques for hidden text for accessibility are still valid. For example, the "sr-only" classes (screen reader only) used to add context for screen readers without visually cluttering the page. Google tolerates these practices if they enhance actual user experience.
The problem arises when one abuses the system. If you hide "Cheap widgets company logo France" in an ALT or in CSS, Google will see the manipulation. The rule of thumb: if a human using a screen reader would find the content useful, it's OK. If it's only for SEO, it's risky.
Practical impact and recommendations
What concrete changes should be made to an existing site?
The first step: audit all logos on the site (header, footer, internal pages). Check if the text is hidden in CSS (negative text-indent, absolute position off-screen, zero font-size) or if the image has an ALT attribute. Use Chrome DevTools (Elements tab) to inspect the actual source code.
If you find hidden text, replace it with a standard image tag that includes a descriptive ALT attribute. Example: replace <h1 class="logo">MySite</h1> with CSS background by <a href="/"><img src="logo.png" alt="MySite"></a>. Simple, clean, and risk-free.
What common mistakes should be avoided during implementation?
A classic mistake: using an empty ALT (alt="") or a generic one (alt="logo") on the main logo. An empty ALT signals an informationally worthless decorative image. However, a logo is informative; it identifies the brand. The ALT should contain the company name, period.
Another trap: duplicating the logo text in an adjacent H1 AND in the ALT. If your header contains <img alt="MySite"> followed by <h1>MySite</h1>, you create unnecessary redundancy. Choose: either the logo carries the H1 (image in an H1) or it remains a simple image and the H1 is elsewhere. No duplication.
How can you verify that the implementation is correct?
Use Google Search Console to check that the logo is being crawled and indexed under the "Experience Improvement" tab. Also, test with a screen reader (free NVDA on Windows, built-in VoiceOver on Mac): your brand name should be clearly announced when hovering over the logo.
Regarding performance, the ALT attribute doesn't affect Core Web Vitals or loading time. However, removing complex CSS from image replacement can slightly reduce the weight of the CSS file and simplify rendering. A marginal gain, but always worth it.
- Audit all logos (header, footer, internal pages) to identify hidden text in CSS
- Replace image replacement techniques with
<img>tags with descriptive ALT attributes - Ensure that the ALT contains the brand name, not a generic "logo" or empty text
- Avoid duplication between the logo ALT and adjacent H1 in the same area
- Test with a screen reader (NVDA, VoiceOver) to validate accessibility
- Check in Google Search Console that the logo is crawled correctly
💬 Comments (0)
Be the first to comment.