HowTo: Add Anchor Tag and Attributes in Drupal 8

Anchor tags are not only important from SEO perspective, they are also elements of better navigation and great user experience. Often ignored (or rather used unwisely), using anchor tags is definitely one of the best SEO Practices. 

But the deeper you go, you realize there are various elements that you need to take care of when adding custom attributes. In this blog, we will learn to add tag properties – rel, id, and target – in Drupal 8.

Anchor tags are clickable texts in a hyperlink.

If you are using Drupal, you know it is easy to add the anchor tags with CKEditor. But there are some limitations when using CKEditor. In order to keep the library light, certain features are not available right away and need to be downloaded. To get these advanced features you need to add additional libraries. 

But, Drupal 8 has link attribute module. In this module, we have the advanced options to add the various anchor tags in the webpage. 

Exploring Drupal Link Attribute Module

The Drupal Link Attributes provides a widget that allows users to add attributes (quality) to links. It overtakes the core default widget for menu link content entities, allowing you to set attributes on the menu links. The supported attributes given in the module are id, name, class, target, access key, and rel which means all of these given attributes can be added to your link if you are using the link attribute module.

Installing and Configuring the Link Attribute Module

Download the module from Drupal.org. 

You can install the link_attribute module using the Drush command.

$ drush dl link_attribute
$ drush en link_attribute

Or you can install and enable it from Administrative UI

• Enable the module → Content type → Manage field. 
   
• Once there add a field, let's say sample. Point to note here is that this will be a link, therefore we need to give it a label. Add label.
   
• Once the field is created → Manage → Form Display → Newly created field Sample.
• Change widget to link with attributes → Configure it by selecting the enabled attributes needed → Update → Save
• Go to Content → Create content → Look for the field.  And there you have it.

The link attribute module is simple and extremely intuitive. This is a nifty module which extends the qualities of link module.

In case you want to add an attribute which is not listed in the pre-defined list then, follow these steps:

Add "<em>mymodule.link_attributes.yml</em>” file to your custom module and make new attributes for example:

If you are adding the field to the configurable field then alter configurable field and in the format of the .yml file and before you re-import it add the extra attributes.

And if you want to add to the base fields then you may follow the link adding attributes to the field.

So this is how you can add the various tag anchor properties to your links widget on your webpage. And also if you want the custom attributes then you can add them using the given link.