The internet is nothing but connecting one webpage with others using hyperlinks. In technical words, hyperlink is a HTML anchor tag <a> which will be added in the source code when you insert a link with text or image. It is easy to create a link in WordPress regardless of whether you are using old Classic Editor or using the latest Gutenberg editor. However, did you ever wonder how to add attributes to your links? In this article, we will explain adding various HTML link attributes (like rel and target) and assign values in Classic and Gutenberg editors.
HTML Hyperlink Attributes
Though anchor tag accepts many attributes as explained here, href, rel and target are the three major attributes. Below table shows the accepted values by those attributes and you can assign them in WordPress easily.
| Attribute | Values | Single or Multiple |
|---|---|---|
| href | Target URL | Single |
| target | _blank _parent _self _top | Single |
| rel | alternate author bookmark external help license next nofollow noreferrer noopener prev search sponsored tag ugc | Multiple |
Highlighted rel attributes like nofollow, sponsored and ugc will affect Google’s crawling and indexing of linked webpage.
Add Rel and Target Attributes in Gutenberg Editor
Follow the below steps to add rel and target attributes to text link in Gutenberg:
- Login to your site, navigate to “Posts > All Posts” section and edit the item you want to insert link attributes.
- Select a text and click on the link icon in block’s toolbar.
- Find an internal page or paste an external URL to link to the selected text.
- After linking, click on that linked text and check “Open in new tab” option. This will add
target="_blank"attribute to your link.
- For adding
rel="nofollow"attribute, again click on the link and then click the pencil icon for editing. Expand the “Advanced” section from the dropdown and check “Mark as nofollow” option. From here also, you can select “Open in new tab” option. - Click “Save” button to add the selected attributes to your link.
Check the Source Code
For checking the source code, click on the “Options” icon in block’s toolbar and select “Edit as HTML” option.
Check the content between <a> and </a> tags and you will see the href, rel and target attributes are added.
Value for href attribute is the page URL you have chosen for linking. WordPress by default adds noopener and noreferrer values for rel attributes when you set the link to open in a new tab. These values allow to hide the referrer in header and remove the opener browsing context. Similarly, data-type and data-id attributes are also added for reference.
Manually Adding Other Rel and Target Attributes
The problem here is that the default options only allow you to set nofollow and _blank values. You do not have default options to add rel="sponsored" or rel="ugc" attributes to hyperlinks. However, you can do that manually by following the below steps:
- Click the “Options” icon in block’s toolbar and select “Edit as HTML” option.
- When you see the source HTML code of the block, add
rel="sponsored"orrel="ugc"inside the anchor tag. You can add these attributes anywhere between <a and > of the opening anchor tag.
- If you have already selected new tab or nofollow default option, then you need to simply add sponsored or ugc inside existing rel attribute.
- Similarly, you can add or replace the “_blank” value in target attribute to other applicable values like
target="_top". - After editing the HTML, click on “Edit visually” button to return to visual mode.
Adding Rel and Target Attributes on Images
- After uploading your image, click on the image block and then click “Insert Link” icon in the toolbar.
- Click the small arrow showing at top right corner of the dropdown that appears.
- Check “Open in new tab” to add
target="_blank"attribute. - In the “Link Rel” box, you will see WordPress automatically populates noreferrer and noopener values for rel attribute (as you have selected the link to open in a new tab).
- You can manually add nofollow, sponsored and ugc values in the box.
- Search and link an internal page or paste an external URL for href attribute.
- Click the enter icon or key to insert hyperlink to the image with selected attributes.
If you want to add more attributes, click the “Options” icon in toolbar and select “Edit as HTML” option. Now, you can add the attributes to <a> tag directly in HTML.
Note: The process explained above is with WordPress version 6.4.2 which is the latest when this article is published. As you can see, inserting link attributes on image and text are different in Gutenberg. The interface is changing consistently and may look bit different in other versions. Soon you may find the image block will also have similar linking options like text.
Add Link Attributes in Classic Editor
Follow the below steps to add target="_blank" attribute if you are using Classic Editor plugin or dealing with custom post types like WooCommerce product pages. The steps are same for inserting link attributes in text as well as image.
- Go to “Posts > All Posts” section in your dashboard and edit the post where you want to insert link attributes.
- Make sure you are in “Visual” tab and select the text or an image.
- Click on the “Insert/edit link” icon in the toolbar.
- Search and add internal page or paste an external URL in the box and click on the gear icon showing at the end.
- Check “Open link in a new tab” option showing below the “Link Text” box and click “Add Link” button.
This is the only visual option available in Classic Editor for link attributes.
Manually Inserting Rel Attributes in Classic Editor
For adding rel attributes with values like nofollow, sponsored or ugc, go to “Text” tab in Classic Editor. Now, you can manually add rel attribute values or change/add target attribute in the source HTML code. This is similar to editing HTML in Gutenberg editor and adding attributes in anchor tag. In Classic Editor, WordPress only adds rel="noopener" and does not add noreferrer value.
After adding your code, change the interface back to “Visual” mode and update your post.
Note: Though we have explained with post, you can follow the same steps for pages or with any other custom post types. Also, do not confuse rel or target attributes with HTML anchor option available under block’s “Advanced” section on right sidebar settings. HTML anchor is used to link section of the same or different webpage by adding CSS ID to the block. Check our separate article to learn more on using HTML anchor in Gutenberg editor.
