Index or Summary of Anchor Links on Your Site

Tired of Slow Hosting? Click here and learn how to use Digital Ocean, also earn $ 100 to use on your Cloud hosting! Learn How to configure it without accessing terminals and codes!

In this article we will explain the importance of having a summary or index in all your articles and posts on your website. We will also explain how you can create your summary in WordPress itself or in HTML. Let's start with a summary:

That's exactly how I summarize my articles on WordPress. Manually and without plugins, I can use any words and IDs I want. All of this in the articles I want, without weighing WordPress with hundreds of plugins.

What is an index or summary?

In the article or post, these are internal anchor links that redirect the reader directly to a subtitle (usually H2) of your post. This can mean that he doesn't spend a lot of time reading 2,000-word articles or that he has several different subjects in a single post.

In terms of the word in general, an index is a list of words that can be organized in alphabetical, systematic, chronological, numerical or alphanumeric order.

a index it is the same as an indicator, sign or symptom, a reference factor that serves to compare, explain a certain situation or conditions, also indicating their respective pages of a book or a list of things.

summary it is a list at the beginning of the article, [monograph, book etc.] with all the chapters of the work. Summary is the enumeration of the main divisions, sections of other documents, in the order in which the matter takes place, so it is a quick, simple, synthetic and concise summary.

Translating, both are the same, but I personally prefer to call it summary. Some people probably searched for indexes on WordPress, others searched for summary and some even for anchor links.

The main reason why I use both expressions in this article, is exactly to improve the position and ranking in Google and to reach more people. In fact, this is an objective of using summaries and indexes in articles.

The importance of anchor links and an index

Anchor links are any link that takes you to a section of your page or even to another page on the site. They are of great importance and should not be ignored in any way, if you want to stand out from the competition.

Summaries and indexes are very important in an article or post. This is because the anchor links make it easier for you to rank your article and even allow it to appear more often in alternative keywords.

Índice ou sumário de links âncoras em seu site

That way, always add a summary to your article in order to improve SEO. I do this manually, many use plugins, but I believe that manually allows me to better customize the IDs of the anchor links.

How should an index with anchor links be?

The indexes need to be listed in a block that stands out, with a different background color and with a bold title (I use the Preformatted block). The summary list can be ordered with a dash [-] followed by the theme that will have the anchor link.

You may or may not make the list of subjects in the table of contents with the same words as the subtitle. I sometimes prefer to vary the index and subtitle H2 a little. I try to vary with different words so that the text is more likely to be found on Google.

Índice ou sumário de links âncoras em seu site

Anchors are links that start with [#] which indicates that the path is within the page itself. Some have the habit of placing random anchor links with numbers or words having nothing to do with the subject of the subtitle.

We must remember that even if it is an anchor [#example], it is important that it contains keywords to better position yourself on google and other search engines. So never use numbers or random things on your anchors.

Have you ever noticed that in icons a link is represented by a chain? Is the anchor literally represented by an anchor? Simply translated, anchor is the end of the chain or the final destination of the link that is established somewhere.

What are the problems with indexing your article?

Although it is very advantageous for your website's SEO and ranking, an index can make the reader jump directly to the desired part, spending less time on your site and seeing less ads. It may or may not affect your bounce rate and CPC.

Indexes in articles and posts with few words can also seem strange. I usually use indexes with anchor links in articles with more than 800 words and more than 3 H2 subtitles.

Índice ou sumário de links âncoras em seu site

If you do this manually, the automatically generated IDs do not pass the same authority as a manually made ID. Doing it manually allows you to add custom anchors and lessens the chance that google considers it a bad thing.

How to make an index in HTML

Before the new version of WordPress with Gutenberg editor, we needed to manually use the HTML code to make the summary with anchor links. Nowadays this has become easier thanks to the new Gutenberg editor.

Even so I will explain in detail how anchor links in HTML work. In addition to the summary, you need to manually add the [ID] where the anchor links will take you. This ID is usually placed in headers (H2, H3 and H4).

First in the table of contents or index, the HTML code is as follows:

<strong>Article Summary</strong> 
<a href="/en/”/#nome_da_ancora”">- Anchor title</a>
<a href="/en/”/#nome_da_ancora2”">- Anchor title 2</a>
<a href="/en/”/#nome_da_ancora3”">- Anchor title 2</a>

The result in the HTML preview will look something like this:

This is an HTML summary. Note that you use the same link tag <a>, but instead of the link you add a href = # blabla where the hashtag [#] indicates that the link is on the same page and is a ID.

Having placed the hashtag, you must add the path to your H2 subtitle or another location that you want the summary to take you. Usually the result in HTML looks like this:

<h2 id="nome_da_ancora"> 

How to do WordPress Summaries without Plugin

O ID you don't need a hashtag. In the WordPress editor you can add the ID without using quotes between the keyword. It corrects this problem automatically, I believe that most HTML readers and editors can understand using quotation marks.

Now as you know how the summary works, I suggest doing something better in the new Gutenberg editor. After you have written all the articles with all the H2 headings, you can simply click on the information button and copy the entire summary that appears under the Document overview.

This summary will even have the hashtags and internal IDs of the Gutenberg editor. You can simply copy and paste everything into a pre-formatted WordPress box that has a gray background, delete the H2 that you see with the collage, and finish by adding a dash [-].

Índice ou sumário de links âncoras em seu site

Then just edit the summary links and place your personalized hashtags, until it looks like the example we left above. After doing this, just walk through the article through the H2 headers, select them and then go to the block options.

In the H2 block options and other headers, you will find in the tab Advanced the option HTML anchor. Just put the ID you added in the summary in this field, without using the hashtag [#]. WordPress will add automatically without the need to edit HTML.

Table of Content - WordPress Summary Plugin

Throughout the article I talked about making summaries manually and my great refusal to use plugins to keep the hyperlink cleaner. Unfortunately I ended up changing my mind and to avoid work and lost time I ended up joining a plugin.

I currently use the plugin LuckyWP Table of Contents and I configure it in a way that makes the link anchor tiny, without accentuation and equal to the title H2 and H3. I don't have much to say about the plugin, if I was looking for one, I consider it the best.

Anchors in giant summaries using Text Editor

There are text editors that have variable substitution tools that can allow you to automatically add hashtags and IDs to WordPress article summaries or other texts that are in HTML.

Since I have MacOS, I use the CODA 2 text editor. It was the only one I found and allows you to easily add IDs to headers without having to keep going back and forth from the beginning and end of the article. I believe Dreamweaver also has great options for finding and replacing text.

With a text editor program that supports variables in finding and replacing, add the following to find and replace. The variables will be between [].

& lt; a href = ”# [1] ”& Gt; - [2]</a>[3]<h2>

The first variable will locate and memorize the summary ID. The second variable will match the rest of the line within the summary, the third variable will take the rest of the article to the header that has not yet been added. ID. Replace with:

& lt; a lol href = ”# [1] ”& Gt; - [2]</a>[3]<h2 id="[1]">
Índice ou sumário de links âncoras em seu site

Sometimes your locator may conflict with some space or symbol, but usually it will only replace it once. You have to click on the replace several times for it to do this with all the headers of the article.

It is important to do this with only header articles of a type like & lt; H2 & gt ;, you also cannot have added any tags between the H2 headers of the article code. If something is wrong, the editor will assign the wrong variables each time you replace it.

The replacement will take the information from the first summary. O lol in the text serves to prevent the replacement from repeating the process on the same line as the list (don't forget to delete it later). In the repetition of the process it will skip the & lt; H2 & gt; with ID and goes straight to the correct header.

It may seem a little confusing, I think all of this could be better explained on video. Anyway, use your head a little, speed up your work and index your articles to stand out from the competition and improve your SEO.

I also did a very long video class talking about how I write my articles. You can watch it below: