In today’s article, we are going to discuss in detail, about what anchor links are, how to create them and why to create them. Today, for every blog, anchor links have become an essential part.
What Are Anchor Links?
Anchor Links are the links which are used to connect two different section of the same post or a page.
For example, I have written a long post and you want to go to a particular section in the post, then you will have to find it by scrolling down and going through the entire post. To avoid this, I can create a link directly connecting to that particular section on the post, so that when you click on the link, you will go directly to the section that you are interested in. You can create anchor links, manually as well as with the help of plugins.
Why Create Anchor Links?
There are a couple of reasons to create Anchor Links. They are as follows,
- Anchor links helps the audience to navigate through your website in a much better manner. You don’t want to bore the audience with long posts, otherwise they will leave and never come back. To avoid this, if you create anchor links in your post, the audience can easily navigate through your website, and directly go to the section they are interested in. This will retain your audience by decreasing the bounce rate, and in-turn get you more revenue from your website.
- Anchor links also tend to show up in search engine results, so it increases your website’s visibility on the internet.
Create Anchor Links Manually
- Go to your post and select the text you want to link a particular section to.
- Click on the Link Button and convert the text into and Anchor Link by entering the text with a dash “–” between every word and by adding a “#” at the beginning of the text.
- The text will look something like #What-Are-Anchor-Links?
- Go to the text which you want to connect to, and change it to a heading, with the help of the editor.
- Go to the Block section located in the right side of the page and click on Advance.
- Fill in the same text as the Link Button in the HTML Anchor tag but without “#“
- The text will look something like What-Are-Anchor-Links?
And voila, you have successfully created an Anchor Link manually.
Create Anchor Links With Plugin
- Install and Activate Easy Table Of Contents wordpress plugin. This plugin allows you to automatically generate a table of contents with anchor links. It uses headings to guess the content sections, and you can customize it as per your needs.
- Go to Settings » Table of Contents page to configure the plugin settings.
- By default, the plugin is enabled for Pages. Enable the plugin for the Posts as well in the Enable Support section.
- You can also enable Posts in the Auto Insert section. This allows the plugin to automatically generate the table of contents for all articles, including the older articles that match the criteria. If you only want to automatically generate table of contents for specific articles, then you can leave this option unchecked.
- Select where you want to display the table of contents and when you want it to be triggered.
- You can also change the Appearance and Custom Theme of the table of contents as per your own specifications
- In the Advance section you will find more setting options. You can customize the all settings as per your specifications.
Creating Table Of Contents
The table of contents is generated by the headers found on a page. Headers are the
<h1>,<h2>,<h3>,<h4>,<h5>,<h6> Each header that is found on the page will create a table of content item. Here’s an example which will create a table of contents containing the six items.
<h1>Item 1</h1> <h1>Item 2</h1> <h1>Item 3</h1> <h1>Item 4</h1> <h1>Item 5</h1> <h1>Item 6</h1>
You can also create “nested” table of contents. This is difficult to explain so I’ll illustrate building on the previous example. In this example a table of contents will be created with the same six items but now the first three will each an child item nested underneath it. The indentation is not necessary, it was only added for illustration purposes.
<h1>Item 1</h1> <h2>Item 1.1 -- Level 2</h2> <h1>Item 2</h1> <h2>Item 2.1 -- Level 2</h2> <h1>Item 3</h1> <h2>Item 3.1 -- Level 2</h2> <h1>Item 4</h1> <h1>Item 5</h1> <h1>Item 6</h1>
You are not limited to a single a single nested item either. You can add as many as you need. You can even create multiple nested levels…
<h1>Item 1</h1> <h2>Item 1.1 -- Level 2</h2> <h3>Item 1.1.1 -- Level 3</h3> <h3>Item 1.1.2 -- Level 3</h3> <h3>Item 1.1.3 -- Level 3</h3> <h2>Item 1.2 -- Level 2</h2> <h3>Item 1.2.1 -- Level 3</h3> <h3>Item 1.2.2 -- Level 3</h3> <h3>Item 1.2.3 -- Level 3</h3> <h2>Item 1.3 -- Level 2</h2> <h1>Item 2</h1> <h2>Item 2.1 -- Level 2</h2> <h2>Item 2.2 -- Level 2</h2> <h1>Item 3</h1> <h2>Item 3.1 -- Level 2</h2> <h2>Item 3.2 -- Level 2</h2> <h1>Item 4</h1> <h1>Item 5</h1> <h1>Item 6</h1>
You can nest up 6 levels deep if needed. I hope this helps you understand, how to create and build your own auto generated table of contents on the website. The Table Of Contents section in this post is taken from Easy Table Of Contents wordpress plugin page.