Anchor Tag

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 at all: without clickable links between documents, there would be no hypertext and no navigation from page to page. The "a" stands for anchor, because the link anchors a reference point in the document.

Technically banal, but hugely effective. For an online shop, the anchor tag helps determine whether a customer can find the product from the category page, whether search engines even fully recognise your shop, and whether the internal links pass on ranking signals or fall flat. If you dismiss the <a> element as just "the thing to click on", you are giving 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 target 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 they can expect behind the link. "Click here" says nothing. "View hiking boots model X" says everything. This obviousness is one of the most overlooked SEO levers of all.

The most important attributes at a glance

One property regularly causes confusion: an <a>-tag without href is not a link, but only 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.

Anchor tags and SEO: Why the link text counts

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 with "women's trekking rucksacks" to your corresponding category, you reinforce the thematic signal for this page. If, on the other hand, you constantly link with "here", "more" or "read more", you are giving away this signal completely.

This applies to both internal and external links. For inbound links from external sites, the anchor text is a historically strong ranking factor - so strong that it has been massively manipulated in the past, which is why search engines tend to be sceptical about over-optimised, precisely fitting anchor texts today. A natural mix of brand, URL and descriptive anchors is more credible than the same money keyword a hundred times.

Use the rel attribute correctly

You use the rel attribute to control how search engines should handle a link. The relevant values in e-commerce:

• rel="nofollow": Tell the search engine not to follow this link and not to transfer any link power. Classic for links that you are not editorially responsible for.
rel="sponsored": For paid links and advertising - such as affiliate links. Since Google introduced this distinction, it is the clean labelling for commercial links.
• rel="ugc": For user-generated content such as links in product reviews or forum posts.
• rel="noopener" / "noreferrer": Security and data protection attributes. With target="_blank", noopener prevents the target 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. If you need it exactly, look it up there instead of relying on half-knowledge from forums.

Internal linking: the underestimated ranking lever

External links get all the attention, but the one area that you have full control over is internal linking - and it is precisely this area that is neglected in most shops. Every internal anchor tag is a statement about which page is important and what it is about. If you make these statements consciously, you will guide both users and search engine crawlers through your shop.

Search engines distribute part of the authority of a page to the linked pages via their outbound links. A product page that is linked to by many relevant internal pages with speaking anchors will therefore receive a stronger signal than one that is only accessible 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 actually work:

• Descriptive instead of generic: The anchor text names the goal, not the action. "Hiking shoes for women" instead of "this category".
• Contextual instead of arbitrary: Link from the body text where the link fits in terms of content, not as a loose block at the bottom of the page.
• Deep instead of shallow: Link not only to the homepage and main categories, but also to deeper product and subcategory pages that are otherwise difficult to find.

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

Jump anchor within a page

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

Useful in the shop for long product pages: A jump menu at the top ("Description", "Technical data", "Reviews", "Shipping") lets customers jump directly to the desired section without having to scroll. These internal jump anchors can also appear as sitelinks in search results and take users directly to the right place.

A concrete practical example

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

The correction is unspectacular, but effective: all internal links that point to this category are given meaningful anchor texts - instead of "find out more" now "height-adjustable desks in comparison" or "electrically height-adjustable desks". In addition, affiliate and advertising links in the magazine section are correctly labelled with rel="sponsored", and three external links that inadvertently gave link power to a competitor are set to nofollow.

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

Anchor tag, button and link - the constant confusion

One of the most persistent sources of error on the web is the confusion between links and buttons. Both 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 location, another page, a file). A button triggers an action (update shopping basket, submit form, open menu).

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

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