# Alt text Alt text is the alt attribute of an image: the text shown or read when the image cannot be seen. It exists for accessibility first, and search also reads it. If you run a small site, writing accurate alt text is quick and prevents basic SEO and usability misses. Updated 2026-09-14 · Source: https://porteur.ai/glossary/alt-text ## What alt text is for Write alt text to describe what the image shows to someone who cannot see it. Screen readers read it. If the image fails to load, the browser shows it. When an image is a link, the alt text acts as the anchor text. Google Images and the crawler also read it, along with the surrounding text and the file name. ## How search reads alt text Google treats alt text as one hint about the image. It does not replace the page copy. The words around the image help search understand context. The file name helps too: pricing-comparison.png is clearer than IMG_1234.png. Do not stuff keywords. It reads as spam and does not help. If an image links to a page, the alt text is the anchor text of that link. For a logo that links to the homepage, use alt="YourProduct home" rather than alt="" if it is the only label for the link. ## How to write good alt text 1. **Describe what is essential** Say what matters in context. On /pricing, alt="Plan tiers table highlighting Pro" beats "table". 2. **Be specific, be brief** Aim for a short phrase or a simple sentence. Avoid “image of” or “photo of” unless it changes meaning. 3. **Match the page task** On /guides/getting-started, alt="Connecting Stripe in Settings" helps. On /blog/launch, alt="Team at laptops" is enough if the image is illustrative. 4. **Name linked purpose** If the image is a link, describe the destination or action: alt="Download PDF setup guide". 5. **Use helpful file names** Rename product-shot-blue-mug.jpg instead of IMG_4550.jpg. Keep hyphens, keep it short. A fixed page reads cleanly with a screen reader and the images help the story. Example on /features: alt="Dashboard showing weekly active users chart" next to copy about product usage. ## Decorative images and empty alt If an image adds no information, give it an empty alt: alt="". This tells screen readers to skip it. Common cases: background flourishes, spacer graphics, generic dividers. Do not use empty alt on informative graphics. Charts, diagrams, UI screenshots and product photos need alt that conveys their point on the page. ## How to check and measure - Run a Lighthouse accessibility audit. It flags images without alt. - Spot check key pages. Right click, Inspect, select the image, and read the alt attribute. - Preview with a screen reader workflow you know, or use the browser’s reader features to sanity check flow. - List images in your codebase or CMS and add missing alt before you ship new pages. > Rule: every meaningful image needs alt text, every decorative image needs alt="". ## Questions ### What does alt text mean? It is the alt attribute of an image. Screen readers read it, browsers show it when the image cannot load, and search uses it to understand the image. ### What is a good example of alt text? On a product page, alt="Blue 12 oz mug on a desk" is good. It is specific, short and matches the page. Avoid “photo of” and avoid keywords that are not in the image. ### How do I create alt text? Edit the image element and set the alt attribute. In HTML: Blue 12 oz mug on a desk. Most CMS editors expose an Alt text field beside the image upload. ### How do I turn on alt text? There is nothing to turn on in the browser. You add the alt attribute in your HTML or CMS. For audit, run Lighthouse and fix any images that it flags as missing alt. ### Does alt text help SEO? It can help, but only when it accurately describes the image. Search also reads the surrounding text and the file name. Do not stuff keywords. ### Should my logo have alt text? Yes. If it is a link to the homepage, write alt that names the destination, such as "YourProduct home". If the logo is purely decorative and not a link, alt="" is fine. ## Read next - [On-page SEO checklist: the twelve things on the page](https://porteur.ai/guides/on-page-seo-checklist): The twelve page elements that move clicks and rankings, with examples you can copy to your own product pages today. - [Image optimisation for page speed: the hero image and everything below it](https://porteur.ai/guides/image-optimisation-for-page-speed): Fix the hero image first for LCP, then lazy-load the rest. Choose AVIF or WebP, set srcset and sizes, and add width and height to stop shift. - [Reading a Lighthouse score on a phone](https://porteur.ai/guides/lighthouse-score): Use the mobile Lighthouse run to judge speed and UX. See what each score means, how lab and field data differ, and what to fix first. - [How to read PageSpeed Insights: field data first, then the score](https://porteur.ai/guides/how-to-read-pagespeed-insights): Start with field data, not the score. Learn what Google uses, why scores vary, and how to turn a PageSpeed Insights run into a clear order of fixes. - [Anchor text](https://porteur.ai/glossary/anchor-text): Anchor text is the visible, clickable text of a link. Use clear, specific anchors to help users and search engines understand your pages. - [Heading tags](https://porteur.ai/glossary/heading-tags): Heading tags are h1 to h6 in HTML. See how to structure pages, help Google and screen readers, and write headings that win snippets. - [Image SEO](https://porteur.ai/glossary/image-seo): A checklist for SEO on images: names, alt text, size, format, speed, and how to see if Google Images sends you traffic. Give us a URL and we will check how your images read in context, then show three findings on missing or weak alt text in about thirty seconds, free. Free check: https://porteur.ai/