Logo von nextlevels
DEEN
Request a project

Anchor tag

Last updated on

In short

The anchor tag is the HTML element <a>, the element that creates a link. It is the building block that makes the web a web in the first place: without clickable references between documents there would be no hypertext and no navigating from page to page.

The "a" stands for anchor, because the link anchors a reference point in the document.

Technically trivial, enormous in effect. For an online shop, the anchor tag helps decide whether a customer finds their way from the category page to the product, whether search engines capture your shop completely at all, and whether internal references pass on ranking signals or fizzle out. Anyone who dismisses the <a> element as just "the thing you click" gives away SEO potential and accessibility at the same time.

Structure and attributes of the anchor tag

An anchor tag consists of the opening tag, a link text and the closing tag. The most important attribute is href (hypertext reference), the destination of the link. A minimal example links to a product page and uses "Hiking boots model X" as the visible, clickable link text.

The link text is not an accessory but content. It tells users and search engines what to expect behind the link. "Click here" says nothing. "View hiking boots model X" says everything. This obvious point is one of the most overlooked SEO levers of all.

The most important attributes at a glance

Attribute Function Practical note
href Destination of the link (URL, anchor, mailto, tel) Mandatory for a real link
target where the destination opens, e.g. _blank for a new tab always add rel="noopener" with _blank
rel Relationship to the destination (nofollow, sponsored, ugc, noopener) controls whether link equity is passed on
title Tooltip text on hover no substitute for good link text
download signals a download instead of navigation e.g. for PDF data sheets

One property regularly causes confusion: an <a> tag without href is not a link but merely a placeholder anchor. Such "dead" anchor tags often appear when developers control a link via JavaScript and forget the href, with the result that keyboard navigation and screen readers do not recognise the element as a link.

Search engines read the link text, the so-called anchor text, as an indication of what the linked page is about. If you consistently link internally to your corresponding category with "women's trekking backpacks", you strengthen the thematic signal for that page. If, on the other hand, you constantly link with "here", "more" or "read more", you give that signal away completely.

This applies to internal and external links alike. For incoming links from other sites, anchor text is historically a strong ranking factor, so strong that it was massively manipulated in the past, which is why search engines today tend to view over-optimised, exact-match anchor texts with scepticism. A natural mix of brand, URL and descriptive anchors seems more credible than the same money keyword a hundred times over.

Using the rel attribute correctly

With the rel attribute you control how search engines should treat a link. The relevant values in e-commerce:

  • rel="nofollow": tells the search engine not to follow this link and not to transfer any link equity. Classically used for links you are not editorially responsible for.
  • rel="sponsored": for paid links and advertising, such as affiliate links. Since Google introduced this distinction, it has been the clean way to label commercial references.
  • rel="ugc": for user-generated content such as links in product reviews or forum posts.
  • rel="noopener" / "noreferrer": security and privacy attributes. With target="_blank", noopener prevents the destination page from accessing your page via the JavaScript object window.opener.

The official reference for all attributes and their behaviour is maintained by the Mozilla Developer Network: MDN: the <a> element. Anyone who needs to know exactly should look there rather than rely on half-knowledge from forums.

Internal linking: the underestimated ranking lever

External links get all the attention, but the area you fully control yourself is internal linking, and that is exactly what most shops neglect. Every internal anchor tag is a statement about which page is important and what it is about. If you make these statements deliberately, you guide both users and search engine crawlers through your shop in a targeted way.

Search engines pass part of a page's authority on to the linked pages via its outgoing links. A product page that is linked from many relevant internal pages with meaningful anchors therefore gets a stronger signal than one that can only be reached via the main menu. Your most important category and product pages should therefore be well linked internally: from guide articles, from related products, from the magazine.

Three principles for internal anchor tags that really hold up:

  • Descriptive rather than generic: the anchor text names the destination, not the action. "Women's hiking boots" instead of "this category".
  • Contextual rather than arbitrary: link from within the body text, where the link fits in terms of content, not as a loose block at the end of the page.
  • Deep rather than shallow: do not just link the home page and main categories, but also deeper product and subcategory pages that are otherwise hard to find.

In Shopware this can be partly automated, for example via cross-selling links and related products, but the editorial part in the content remains manual work. It is precisely this manual work that separates a shop that distributes its link equity sensibly from one that lets it fizzle out in the footer.

Jump anchors within a page

The anchor tag links not only to other pages but also to places within the same page. If you set a hash sign followed by an ID (such as #shipping) as the href, the browser jumps to the element with exactly that ID. This is the classic "to the table of contents" or "back to top" mechanism.

Useful in a shop for long product pages: a jump menu at the top ("Description", "Technical data", "Reviews", "Shipping") lets customers jump directly to the section they want without scrolling. Exactly these internal jump anchors can also appear as sitelinks in search results and take users straight to the right place.

A concrete practical example

A Shopware shop for office supplies has a typical problem: the product descriptions link to related items all over the place, but almost always with the link text "find out more". An SEO analysis shows that the category page "Height-adjustable desks" ranks poorly despite a good range.

The correction is unspectacular but effective: all internal links pointing to this category are given meaningful anchor texts, so instead of "find out more" they now read "height-adjustable desks compared" or "electric height-adjustable desks". In addition, affiliate and advertising links in the magazine section are correctly marked up with rel="sponsored", and three external links that were accidentally passing link equity to a competitor are set to nofollow.

The result after a few weeks: the category page climbs noticeably in the rankings because the internal anchors now send a clear thematic signal. No new tool, no budget, just anchor tags doing their job properly. It is precisely this kind of detailed work that distinguishes a technically clean shop from one that leaves potential untapped.

One of the most persistent sources of error on the web is confusing links and buttons. They often look the same but do different things, and the anchor tag is only made for one of them. The rule of thumb is clear: an anchor tag navigates (it leads to another place, another page, a file). A button triggers an action (update the basket, submit a form, open a menu).

In shops you regularly see the opposite: the "Add to basket" button is built as an <a>, with href="#" and a JavaScript handler on top. It works with the mouse but breaks with keyboard use and screen readers because the semantics are wrong. The browser announces a link that leads nowhere. Such constructions seem harmless but add up to a shop that is simply unusable for some users.

Use case Correct element Reason
Go to the product page <a href="..."> Navigation to a URL
Add to basket <button> Action without a page change
Download data sheet <a href="..." download> Reference to a file
Apply filter <button> (or <a> with a real URL) depending on whether the URL changes

A practical test: would it make sense to open the element in a new tab or save it as a bookmark? If so, it is a link and belongs in an anchor tag with a real href. If not, it is a button.

Accessibility: the anchor tag and screen readers

An often overlooked point: anchor tags are a cornerstone of accessibility. Screen reader users often navigate by having all the links on a page read out to them, without the surrounding context. A list of twenty "click here"s is worthless to these users. Descriptive link texts are therefore not an SEO luxury but a question of accessibility.

With the German Accessibility Strengthening Act, which applies to many online shops, this turns from an option into an obligation. Correct, descriptive anchor tags that can be reached via the keyboard are part of the basic framework of an accessible shop.

Common mistakes with anchor tags

  • Meaningless link texts: "here", "more", "read more" give away SEO signals and hinder screen readers.
  • <a> without href for clickable buttons: pure actions without navigation call for a <button>, not an empty anchor tag.
  • target="_blank" without rel="noopener": opens a security hole and a performance problem.
  • Over-optimised money keyword anchors for backlinks: look unnatural and can backfire.
  • Nested interactive elements: a link within a link or a button within a link is invalid HTML and confuses assistive technology.

The anchor tag is one of those elements that everyone thinks they know and hardly anyone uses cleanly. Yet the lever is large: a shop with well thought-out internal references, meaningful anchor texts and correctly set rel attributes navigates better, ranks better and is more accessible, simply by filling a basic HTML tag correctly.

Maintain anchor tags, do not just set them

A point that is easily lost in day-to-day business: links age. Products are delisted, categories renamed, URLs changed. Every anchor tag that points into the void sends users and crawlers to a 404 page, which means lost traffic and a negative signal. With external links, there is the added problem that the destination page may disappear or change its content completely without you noticing.

That is why regular link checks are part of shop hygiene. There are plenty of tools that crawl the entire shop and list broken internal and external links, from free browser plugins to professional SEO suites. More important than the tool is the routine: go through the list once a quarter and either redirect broken anchor tags to a new destination or remove them cleanly. A shop with well-maintained links appears more trustworthy to search engines and customers alike than one that sends visitors down dead ends.

The bottom line: the <a> element is tiny, but using it correctly is an ongoing task. Anyone who takes link text, the rel attribute, the choice of element and link maintenance seriously gets an astonishing amount of added value for findability, user guidance and accessibility out of one of the oldest HTML tags of all.

Next step

More visibility in Google and AI search

Technical SEO, content and internal linking from a single source, including GEO for ChatGPT and co.

Changelog

  1. · Created · Slawa Ditzel