Anchor image

Definition and scope

An anchor image is a link where the interactive content is an image. The click or tap target is the rendered image box, and the element participates in the document’s link graph like any other hyperlink.

This concept excludes decorative images not wrapped in links and CSS background images that are made clickable via scripting. It also covers images within picture or source wrappers, provided the a element encloses the image content.This concept excludes decorative images not wrapped in links and CSS background images that are made clickable via scripting. It also covers images within picture or source wrappers, provided the a element encloses the image content.

Definition in link context

In link analysis, an anchor image is an a element whose child is an img. With a valid href, it is a standard hyperlink that can be discovered, crawled, and can pass link signals similarly to text links. Rel attributes (such as nofollow) and target behave the same as for any hyperlink.

Without a valid href, the element is not a link and is typically ignored by crawlers. Links inserted only via client-side scripts may be less reliably discovered across crawlers; server-rendered markup improves consistency.

Alt text as anchor text

For image links, the img alt attribute is treated as the link’s anchor text. It should convey the destination or action, not a literal description of pixels. Empty alt on a linked image produces an unlabeled control for assistive technologies; when no visible text label exists, provide a meaningful alt or an accessible name via ARIA.

Search systems may use the alt value as the link’s anchor text. When an image link sits adjacent to a text link pointing to the same URL, engines often prioritise the first encountered anchor text; avoid redundant parallel links if possible.

Definitions

Anchor image (image link) refers to an a element whose content is an img or picture. It is distinct from an “anchor” used as a page fragment target (a URL with a hash), and from image maps where specific regions inside one image link to different targets.

Linked background images created with CSS are not anchor images in HTML semantics, even if they are clickable via scripting. SVG images can also be wrapped in links; the same principles for discovery and accessible naming apply.

Accessibility and UX considerations

Ensure the link has a clear accessible name (via alt or ARIA) and a visible focus indicator for keyboard users. Provide sufficient target size and clear affordance so the image reads and behaves like a link, not merely decoration.

Set intrinsic width and height to prevent layout shift, include descriptive alt when the image is the only link content, and avoid relying on colour alone to indicate clickability. If the image is paired with visible link text, avoid duplicating the link with the same destination immediately adjacent.

Common mistakes and edge cases

Missing or placeholder href values prevent crawling and pass no link signals. Empty or generic alt (for example, “image” or file names) produces poor anchor text and inaccessible links; graphic-only logos used as navigation need meaningful alt describing the destination (for example, “Home”).

Relying on CSS background images or JavaScript click handlers in place of a proper link breaks semantics, harms accessibility, and can reduce discoverability. Creating both an image link and a nearby text link to the same URL introduces redundancy; consolidate into a single linked element when possible.

Further reading

• Alt text
• Anchor text
• Internal linking
• Image SEO