Introduction to HTML link anchor tags and their role in SEO

The <a> tag is mainly used to define links and bookmarks, also known as hyperlinks or anchor links. The most common usages are as follows:

Create a hyperlink href attribute and jump to the link in the middle of href="".

 <a href="https://www.jb51.net/">www.jb51.net</a>

Create a bookmark, use the name or id attribute and add "#" and the name of the bookmark at the end of the hyperlink to jump to a certain position on the web page

 <a name="top"></a>
<a name="1"></a>
<a name="2"></a>
<a href="#top">Back to top</a>
<a href="#1">Open Chapter 1</a>
<a href="#2">Open Chapter 2</a>

When you open the E-dimensional Technology W3CSchool online tutorial, the navigation below the title will appear, which is created by the bookmark name.

Javascript event attributes, execute different commands after clicking

 <a href="javascript:void(0)" onclick="this.href='https://www.jb51.net/'">www.jb51.net</a>

Anchor link CSS style

When there is no custom anchor link <a href="https://www.jb51.net/">anchor link text</a> CSS style, the default anchor link style is as follows:

Default link style, please use the mouse to trigger to see the effect

<style type="text/css">

a{color:#00F}

a:visited{color:#800080}

a:hover{color:#F00}

</style>

<a href="https://www.jb51.net/">www.jb51.net</a>

a{color:#00F} Unvisited anchor links are blue and underlined

a:visited{color:#800080} The link after clicking is purple and underlined

a:hover{color:#F00} When the mouse is triggered, the color is red and underlined

However, since these three colors are too strong, they often cannot match all web design styles. If you need anchor link styles in other colors, you only need to modify the color and background yourself in CSS according to the above three styles.

Why are anchor links underlined?

In fact, when HTML was first introduced, browsers were not as advanced as they are now. At the same time, computer screens at that time did not have colors like LCDs today. Many were even black and white. At that time, the way to distinguish whether it was a link was to use the underline. However, on many black and white monitors or web pages for color-blind users, the underline is retained as much as possible, otherwise users will not be able to distinguish the colors.

Of course, for the sake of aesthetics, modern web page designs generally do not put underscores and underscores directly on links. However, in order to take care of color-blind users and users of black-and-white mobile phone displays, it is recommended to set the CSS style to be underlined when the user's mouse is triggered.

Anchor link Target jump window setting

When you open the links on this page, you will find that some links will pop up to other windows, while some links will directly replace this page. This jump method can use the target attribute of the anchor link to set the jump window.

_self The current window is open , and anchor links jump to the current browser window by default, that is, the default target="_self"

 <a href="https://www.jb51.net/" target="_self">This is the current new window showing the E-dimensional Technology homepage</a>

_blank New window opens

 <a href="https://www.jb51.net/" target="_blank">This is the new window to display the E-dimensional Technology homepage</a>

Unnamed target Open in a new window

 <a href="https://www.jb51.net/" target="_weigeti"> If the _weigeti here is not the name or id inside the webpage, all the target="_weigeti" links in the webpage will be opened in the same new window, while _blank will open different new windows for each link</a>

Frame name or id

 <a href="https://www.jb51.net/" target="weigeti">Click here to display the E-dimensional Technology homepage in the frame below name="weigeti" and will not jump to a new window or replace the current window</a>
<iframe name="weigeti"></iframe>

_parent The parent window opens and the linked file is loaded into the parent frameset or parent window containing the linked frame. If the frame containing the link is not nested, the linked file is loaded in the browser full screen window, just like the _self parameter.

 <iframe>
   <a href="https://www.jb51.net/" target="_parent">This is inside the frame</a>
</iframe>

_top The top layer of the frame , for example, web page A embeds an iframe into web page B, and web page B embeds an iframe into web page C

 <iframe>
   <iframe><a href="https://www.jb51.net/" target="_top">This is a frame inside a frame</a></iframe>
</iframe>

If the link in webpage C sets target=_parent, then webpage B will be removed and the link to webpage C will be directly embedded in A;

If target=_top in web page C, all iframe frames will be jumped out directly and the link page in C will be directly redirected.

_top opens the linked document in the entire current browser window, thus removing all frames

The role of anchor links in SEO

External links have always been regarded as one of the core elements of search engine optimization. For this reason, various forms of external links have emerged, but not all external links are effective for SEO.

External links written by JS are not effective for SEO

It's easy to understand why search engines are reluctant to recognize JavaScript.

 <a href="#" onclick="this.href='https://www.jb51.net/'">Such links are not effective for SEO</a>
<a href="#" onclick="window.open('https://www.jb51.net/');">Such links are invalid for SEO and cannot even be opened in browsers such as Chrome</a>

Link rel=nofollow is also ineffective for SEO

If you exchange links with other websites and find through the source code that the other website has added the rel=nofollow attribute to your link, it means that this link is not allowed to be crawled by search engines.

 <a href="https://www.jb51.net/" rel="nofollow">Such links are invalid for SEO</a>

<meta name="robots" content="nofollow" />
<a href="https://www.jb51.net/">If the above sentence is at the beginning of a webpage, then all the links inside this webpage will not be crawled by search engines, so it is invalid for SEO</a>

Links are as ineffective for SEO as background colors

Google search engine has launched a new algorithm to crack down on external links with the same link color as Beijing, which are generally considered to be black links.

 <style type="text/css">
#vgtlink{background:#FFF}
#vgtlinka{background:#FFF}
</style>
<div id="vgtlink">
  <a href="https://www.jb51.net/" id="vgtlinka">Such links are invalid for SEO</a>
</div>

 <a href="https://www.jb51.net/" style="background:#FFF">Such links are also invalid for SEO</a>