Alt attributes provide a text alternative for images, used by screen readers when a user cannot see the image and by search engines and multimodal AI models to understand what the image depicts. Fixing this issue means writing concise, descriptive alt text for every meaningful image on the page, and using empty alt for purely decorative images so assistive technology can skip them. The same alt text helps multimodal LLMs and image search tools surface and cite your visuals.

Example

<img src="/images/marathon-shoes.jpg"
     alt="Side view of a lightweight neon-green marathon running shoe">

<img src="/images/divider.svg" alt="">

Where to make the change

• Raw HTML: add the alt attribute to every <img> tag. For decorative images, use alt="" so screen readers skip them.
• WordPress: the media library has an Alt text field on every uploaded image. Fill it once and the value is reused everywhere the image is inserted.
• Shopify: in the product or page editor, click an image and use the Edit alt text option. Theme code that renders product images should pull image.alt.
• Wix or Squarespace: click the image in the editor and use the Alt text or Image description field in the side panel.
• Headless or framework sites: require an alt prop on every image component and lint for missing values during build.

Common causes and how to resolve them

• Attribute missing: add alt="" at minimum so the page validates. Replace with descriptive text on any image that conveys information.
• Alt text is the filename: "IMG_4837.jpg" tells the user nothing. Replace with a description of what is in the image.
• Alt text duplicates the visible caption: screen readers will read both, doubling the user's listening time. Differentiate the alt from the caption or empty the alt.
• Decorative images get descriptive alt text: background patterns and dividers should use alt="", otherwise screen readers narrate noise.
• Bulk imports left alt blank: a one-off audit of the media library or a CMS-side script can fill missing alt values from product names, captions, or asset descriptions.

Best practices

• Describe the function, not just the appearance: for a chart, describe what the chart shows. For a button image, describe what the button does.
• Keep it concise: aim for under 125 characters. Screen readers do not pause mid-sentence, so long alt text is exhausting to listen to.
• Skip "image of" or "picture of": the screen reader already announces it as an image.
• Include the focus keyword when natural: alt text is a minor on-page signal, but stuffing keywords in unnatural alt text harms both accessibility and ranking.

This test fails when different URL variants of the site (apex versus www, HTTP versus HTTPS, with or without trailing slash) do not all resolve consistently to a single canonical version. When the same content is reachable at multiple URLs, search engines may split ranking signals across the variants. Fixing this issue means picking one canonical form for the site and 301-redirecting every other variant to it. See the Google Search Central canonicalization guide for the full specification.

Where to make the change

• Server configuration: add 301 redirects in your web server config (Nginx, Apache, IIS) or via _redirects on Netlify, vercel.json on Vercel, or Cloudflare Page Rules.
• CDN: most CDNs offer redirect rules that fire before the origin is hit, which is the cheapest way to enforce canonicalization.
• Application code: as a backstop, applications can detect the wrong host or scheme and emit a 301 redirect to the canonical URL.

Common causes and how to resolve them

• Both apex and www serve the same content: pick one (most sites prefer apex today) and 301-redirect the other to it permanently.
• HTTP and HTTPS both serve content: redirect all HTTP requests to HTTPS, then add HSTS so browsers stop trying HTTP at all.
• Trailing slash inconsistency: pick one form (with or without) and redirect the other.
• Uppercase or mixed-case URLs: redirect uppercase paths to their lowercase canonical form.
• Index page accessible at multiple paths: for example /index.html, /index.php, and / all serving the same content. Redirect everything to /.

Best practices

• Use 301 (permanent) redirects: they pass the strongest ranking signal and are cached aggressively by browsers.
• Pair with <link rel="canonical">: the canonical tag is a backup signal for cases the redirect cannot cover (parameterized URLs, syndicated content).
• Avoid chains: redirect directly to the final URL in one hop.
• Update internal links to canonical URLs: linking to non-canonical variants triggers unnecessary redirects on every visit.

This test fails when an HTTPS page loads any sub-resources (images, scripts, stylesheets, or fonts) over insecure HTTP. Mixed content weakens the security guarantees of HTTPS, and modern browsers either block the resources outright or warn the user, often breaking the page in the process. Fixing this issue means updating every HTTP resource URL to HTTPS.

Where to make the change

• Application code or templates: search the codebase for http:// URLs in src, href, and inline styles; replace each with https:// or with a protocol-relative path.
• WordPress: use a search-and-replace plugin to update http:// URLs in the database after enabling HTTPS, or rely on a dedicated SSL plugin to handle it.
• CDN: most CDNs offer "Automatic HTTPS Rewrites" or similar features that upgrade insecure asset references on the fly.

Common causes and how to resolve them

• Hard-coded HTTP image URLs in content: rewrite stored URLs to HTTPS or use a relative path that inherits the page protocol.
• Third-party scripts that only support HTTP: drop the script (it should not be on a modern site) or contact the vendor for an HTTPS endpoint.
• Hot-linked images from HTTP sources: host the images yourself or proxy them through your own HTTPS-enabled CDN.
• Mixed content in CSS background images: update the URL inside the stylesheet, then bust the cache.

Best practices

• Add Content Security Policy: the upgrade-insecure-requests directive automatically rewrites HTTP requests to HTTPS, which is a useful safety net.
• Use the browser console to find offenders: mixed content warnings include the file and line of the offending request.
• Audit periodically: new content can reintroduce mixed content. Add an automated check to your CI or monitoring pipeline.

This test fails when the page exposes one or more email addresses in plain text. Spam-harvesting bots scrape pages for plaintext addresses and add them to bulk mailing lists. Fixing this issue means obfuscating contact addresses, using a contact form, or rendering them via JavaScript so simple scrapers cannot read them.

Where to make the change

• Application code or templates: replace plain contact@example.com text with one of the obfuscation techniques below.
• WordPress: a contact form plugin handles email submissions without exposing the address. Some SEO and security plugins also offer email obfuscation.
• Shopify, Wix, Squarespace: use the platform's built-in contact form blocks rather than displaying the email address directly.

Common causes and how to resolve them

• Plain text address in a paragraph or footer: replace with a contact form, an obfuscated rendering (HTML entities, CSS reversal), or a JavaScript-built mailto link.
• Mailto link with the address visible: the visible text is what bots read. Make the visible text a label like "Email us" while the href still works.
• Address baked into images is fine for SEO but bad for accessibility: screen readers cannot read it. Pair an image with a contact form instead.

Best practices

• Prefer contact forms: they reduce spam and make analytics easier.
• Use HTML entity encoding: writing co... for the address defeats the simplest scrapers, though sophisticated ones decode it.
• Render via JavaScript: building the mailto link client-side blocks scrapers that only read static HTML.
• Consider a Cloudflare-style email obfuscation: some CDNs automatically rewrite plaintext emails to obfuscated equivalents.

This test fails when the site does not serve a branded, helpful page for missing URLs. A custom 404 keeps users on the site by offering navigation, search, and suggested links rather than dropping them at the browser's generic error screen. Fixing this issue means designing a 404 template, ensuring it returns the correct HTTP 404 status, and pointing your server at it.

Where to make the change

• Server configuration: point your web server at a custom 404 page. In Nginx, use error_page 404 /404.html;. In Apache, use ErrorDocument 404 /404.html.
• WordPress: create a 404.php template in your theme. WordPress invokes it automatically for missing URLs.
• Shopify: edit the 404.liquid template in the theme code editor.
• Wix or Squarespace: use the platform's built-in 404 page editor in site settings.
• Headless or framework sites: Next.js uses not-found.js, Astro uses 404.astro, and similar frameworks all have a convention for the missing-route page.

Common causes and how to resolve them

• No custom 404 at all: create one. The minimum is the site header, navigation, a clear "page not found" message, and links to popular sections.
• 404 page returns HTTP 200: a "soft 404" confuses search engines. Verify the response status with DevTools or curl, and configure the server to return 404 for missing routes.
• 404 page redirects to homepage: redirecting users to the homepage hides broken URLs from analytics and search engines. Show a real 404 instead.
• Generic browser error visible: the server is not invoking the custom template. Check the configuration directive.

Best practices

• Keep the site chrome: show the header, footer, and navigation so users do not feel lost.
• Offer next steps: a search box, popular links, or category navigation help users get back on track.
• Track 404s: log missing-URL hits in analytics so you can spot broken inbound links worth fixing or redirecting.
• Be clear about the error: "Sorry, that page does not exist" is better than vague messaging that confuses users.

This test fails when the page is being excluded from search engine indexes via a noindex directive in the robots meta tag or X-Robots-Tag HTTP header. A noindex on the wrong page is one of the most common ways important content silently disappears from search results. Fixing this issue means removing the directive from any page that should rank.

Where to make the change

• Raw HTML: remove <meta name="robots" content="noindex"> from the <head> of pages you want indexed.
• Server configuration: remove or update X-Robots-Tag: noindex response headers for affected URL paths.
• WordPress: in the post or page editor, your SEO plugin has a "Search engine visibility" toggle. Make sure it is set to allow indexing. Also check Settings, Reading, "Discourage search engines" — this site-wide flag must be off.
• Shopify: certain templates and resource types (search results, cart) are noindexed by default and should stay that way. For other URLs, edit theme.liquid to remove the conditional noindex.
• Headless or framework sites: remove the meta tag from the page's metadata configuration or layout file.

Common causes and how to resolve them

• Site-wide noindex left over from staging: the most common cause. Disable the global setting after launch.
• Per-page noindex set in the CMS by mistake: review the page's SEO settings and toggle indexing back on.
• X-Robots-Tag header set by server config: check the server or CDN rules; remove the header for production URLs.
• Noindex on category or tag pages that should rank: some SEO plugins noindex archives by default. Override the setting for archives that earn organic traffic.

Best practices

• Verify with URL Inspection in Search Console: the live test confirms whether Google currently sees the page as indexable.
• Audit after migrations: staging sites are usually noindexed; verify the directive is removed before traffic resumes.
• Keep noindex for thin or duplicate pages: not every page should rank. Internal search results, paginated archives, and login pages benefit from noindex.

This test reports on whether the page applies a nofollow directive that tells search engines not to follow outbound links. The nofollow attribute (and the related sponsored and ugc values) controls how link equity flows from your page. Fixing this issue means using the right rel value on each external link based on its purpose so signals are passed only where you intend.

Where to make the change

• Raw HTML: add rel="nofollow", rel="sponsored", or rel="ugc" to specific outbound links rather than blanket-applying them site-wide.
• WordPress: the block editor offers a "mark as nofollow" option per link, and SEO plugins can auto-tag external links by domain.
• Shopify, Wix, Squarespace: editor-generated links allow rel attribute toggles; manual HTML embeds need them set explicitly.
• Headless or framework sites: wrap external links in a component that decides the rel based on the link's classification.

Common causes and how to resolve them

• Site-wide nofollow on every external link: overly aggressive. Reserve nofollow for sponsored, untrusted, or user-generated content.
• Sponsored content not labeled: use rel="sponsored" on paid placements and affiliate links to comply with Google's link spam policy.
• User-generated content unmarked: comments, forum posts, and review user submissions should use rel="ugc".
• Trusted editorial links nofollowed: these should pass equity. Remove the nofollow.

Best practices

• Use the most specific value: sponsored for paid links, ugc for user content, nofollow for everything else you want to disclaim. They can be combined: rel="sponsored noopener".
• Do not nofollow internal links: "PageRank sculpting" with internal nofollow no longer works and just wastes crawl signal.
• Audit periodically: as content ages, sponsored relationships change. Review affiliate and partner links once a year.