How to Use HTML Anchors to Improve UX

How to Use HTML Anchors to Improve UX



Source link

What is an HTML Anchor?

In HTML code, you commonly use anchor tags (or ‘a’ tags) to create hyperlinks. Anchor tags modified with the “href” attribute create clickable links that you can point to other pages on your site or to other websites.

You can also use the anchor tag to create anchor links. Anchor links (or “jump” links) link to different sections of the same webpage. 

When you create text links with the “a” tag, you’ll need to use some kind of anchor text. Anchor text is the part of the link that’s clickable. Google uses this text to learn more about the link and the content it points to.

They can certainly help improve it. Readers use them to navigate around a web page and they can provide for a good browsing experience.

Anchor links are commonly used in Table of Contents for long and/or visually dense pages. When readers land on a page, they want to know instantly if the information it contains is useful or relevant to their search. 

A Table of Contents section that includes clear, clickable anchor links both summarizes your page and helps readers “jump” to the section they’re most interested in reading.

Anchor links themselves may not have a significant impact on your Google rankings. But they help improve your user experience and earn featured snippets, which improve your rankings with time.

In 2021, Google rolled out its Core Web VItals algorithm update, emphasizing user experience when factoring in a website’s ranking. The update’s main areas of focus include user interactivity, meaning Google now pays more attention to how users interact with your web pages, including how long they stay on them.

If a user can’t quickly tell what your web page is about, they’ll most likely click away from your website, increasing your bounce rate. 

Google also noted years ago that your web page’s jump links could become featured snippets on their SERPs. When this happens, users will see a list of anchor links in the snippets, which can help signal that your page is useful and relevant to their search intent. 

In the following example, we see a list of anchor links (in list format) pulled from a webpage and converted into a featured snippet:

html anchor

When you create anchor links, Google can also include them in your page’s search snippet. In the following example, Google includes an anchor link to “Nutritional guidelines” on a page about trans fat, so that users can jump straight to that section of the page from the SERP:

html anchor
Credit: Google

So even though you won’t be penalized for not using them, it can be worth including anchor links on your web page when necessary. Use them to tell Google more about your page’s content, and help readers find and access the parts of the page they want to read. 

To add an anchor link in HTML, you’ll follow two steps:

1. Assign the ID attribute with the <a> tag

We can attach an ID to a header with the a tag in a similar process we use for creating hyperlinks. 

Say we’ve created a web page about SEO solutions, and we want to link to a section on Local SEO. We’d create an H2 heading for the section, then add an anchor link with the a tag:

<a id="localSEO"><h2>Local SEO</h2></a>

Alternatively, we can include the anchor ID in the heading tag:

<h2 id="Local-SEO">Section name</h2>

To add an anchor ID to an image, include it in the image HTML tag as an attribute:

<img id="anchor-name" src="/images/localseo.jpeg"/>

To create the anchor link, you’ll use the href attribute. However, instead of adding a link to a web page, you’ll use the anchor ID with a pound (#) sign:

<a href="#localSEO">Local SEO Section</a>

When the user clicks on the link above, they’ll “jump” to H2 header with the “localSEO” ID.

You can add anchor links to any text on your page. However, it’s a good idea to attach anchor links to headings and subheadings. Both are good for summarizing your page’s content to readers and search engine crawlers.

When you add anchor links to your headers, the header text doubles as the link’s anchor text. So it’s important to choose keyword-rich, relevant headings and subheadings that tell readers and search engines what each section is about.

Try to choose a key phrase for your anchor links. SIngle word links can sometimes be confusing, and they don’t give Google much context about the link or the page it points to. 

Use descriptive words that give readers an idea of what to expect once they click through. If your anchor link’s titled “Local SEO,” for example, readers will expect that they are jumping to the part of the page with information on Local SEO. 

You can use the Topic Research Tool to research potential headers for your web page content. Start with the keyword you want to target and select a target domain. 

If you want to create content that targets readers in a different service area or country from yours, use the location feature to set the target country, region, city, and language: 

html anchor

The tool returns relevant subtopics and a list of related keywords for each topic:

You can click through to each page to read articles on each topic, so you’ll better understand how other ranking articles structure their headlines and headers.

The SEO Content Template can also help you choose headings for your content. The tool analyzes the top 10 articles ranking for your keywords, then creates a recommendations template you can use to create your own content.

The template includes suggestions for readability, text length, backlinks, and headers:

html anchor

Key Takeaways

  • Structured anchor links provide for a better user experience and can help you earn featured snippets.
  • Create relevant, keyword-enriched headers so readers and search engines can easily understand the structure of your web pages.
  • Content marketing tools help you develop SEO-friendly content that’s easy to read. 

Build Organic Landing Pages

with the SEO Content Template Tool

ADS illustration

Leave a Comment

Your email address will not be published. Required fields are marked *