WordPress introduced Gutenberg block editor with version 5.0. It allows you to quickly insert hyperlinks similar to previous classic editor interface. In addition, you can easily add link attributes like sponsored and nofollow in Gutenberg editor. In this article, we will explain how to add hyperlinks in WordPress with attributes.
Related: How to insert hyperlinks in Weebly?
Add Hyperlinks in WordPress
You can add links to text and images in the editor using different methods.
- Copy paste from Microsoft Word and Other Rich Text Editors
- Insert Text Links
- Add Links to Images
- Using Links in Buttons
- Inserting Links in Table
Copy Paste from Text Editors
Many of us prepare content in rich text editors like Microsoft Word or Apple Pages. This is an easy way to prepare content offline and paste on the editor quickly. Both classic and Gutenberg editors will preserve the formatting and keep headings and hyperlinks as you have created offline. However, it has few problems that images will be removed in classic editor and replaced with placeholder in Gutenberg. In addition, you can’t add attributes like nofollow to links.
Insert Text Links in WordPress
Since classic editor is moving away, we will explain inserting links with Gutenberg editor. You can insert link on any text element like Paragraph and Heading. When you are in the editor, click on the + icon and add a “Paragraph” block.
Alternatively, you can directly start typing as the paragraph block is by default available on the editor. When you have a text inside the paragraph block, select the text you want to insert a hyperlink.
Click on the hyperlink icon on the block’s toolbar on top. You will see a tooltip asking you to “Paste URL or type to search”. You can insert any external link in the text box and press the enter key or the arrow icon.
This will add hyperlink to the selected text in your paragraph. If you want to insert link of the article already existing on your site, type the keyword in the text box.
WordPress will start doing the Ajax search and show the list of posts that fits your keywords. Select the link and click on the enter icon to insert link of an existing article.
Removing or Changing Hyperlink
When you want to remove the link, just click on the hyperlinked text. This will highlight the link icon in a different way like breaking the chain. Click on the icon to remove the link from your text.
You can click on the pencil icon and follow the same above process to change the hyperlink.
SEO Offer: Optimize your site with Semrush Pro special 14 days free trial.
Adding Attributes to Hyperlinks
It’s a good idea to add “rel=” attribute to indicate the type of link for SEO purposes. For example, as per Google’s guidelines you need to identify the links as “rel=sponsored” if you are publishing a sponsored link. Click on the small down arrow icon in the link pop-up to see attributes options.
- Open in New Tab – enable this to make the link open in a new window. This will add “target=_blank” attribute to the link tag.
- Nofollow – use this to make the link nofollow so that search engines will ignore the link. This will add “rel=”nofollow” attribute to the link tag.
- Sponsored – use this when you insert paid links from your sponsors. This will add “rel=sponsored” attribute to the link tag.
You can click on the three dots settings button and select “Edit as HTML” to see the backend code.
The code will look something like below. As you can see WordPress will add two more attributes automatically.
- Aria-label=”(open in a new tab)” – this is for a screen reader to indicate the link will be opened in a new tab. WordPress will add this for accessibility purposes when you choose “Open in New Tab” option.
- Rel=”noreferrer noopener” – WordPress will add these attributes automatically when you choose to open in new window. It is for security purposes to disable the link tracking when you open a link in new browser window or tab.
You can go back to the visual mode by clicking on the three dots settings again and choose “Edit Visually”.
Note, you can add links to text element inside paragraph, heading or list block.
Adding Hyperlinks in Images
Now that you know how to insert link in text, WordPress allows you to insert links on images as well. First insert image on your post using “Image” block. Click on the image and then the link icon.
You have all the options similar to inserting text link.
- Paste external link in the box and press enter.
- Type a keyword to search and insert an existing internal link on your site.
- Select “Media File” option to insert the link to image file.
- Select “Attachment Page” option to insert image attachment page link to the image.
After adding hyperlink to an image, again click on the link icon and then the small down arrow. Now, you can see additional attributes for setting the link to open in new tab and adding “rel” attributes. You can type nofollow sponsored in the “Link Rel” box to make the link nofollow and sponsored.
Add Links in Button
After adding button block to your page, click on the link icon. You can insert external or search for internal link similar to text and image.
Button block has the attributes in the sidebar. Select the button and look under the “Block” section of the right sidebar. Here you can set the attributes to open in new window or add rel attributes. As you can see, “Open in new tab” option is available both under the block as well as in the sidebar.
Learn WordPress: Check out 700+ free WordPress tutorials.
Insert Links in Gutenberg Table
Similar to text and image elements, you can also insert links to the content inside a Gutenberg table block.
- Text link – select the text and insert link as explained above.
- Image link – click on the small arrow on the toolbar and choose “Inline Image”. This will open the “Media Library” to select and insert image inside a table cell. Click on the image and then the link icon to add hyperlink.
Keyboard Shortcuts for Inserting Link
WordPress allows you to easily insert and remove the links with keyboard shortcuts.
| Shortcut | Function |
|---|---|
| Command + K | Insert link in Mac |
| Shift + Command + K | Remove link in Mac |
| Control + K | Insert link in Windows PC |
| Shift + Control + K | Remove link in Windows PC |
Note: Your theme can influence the link settings in Gutenberg editor. For example, you will see “Edit” button instead of pencil icon and no option to add nofollow / sponsored attributes. The best way is check with the default WordPress theme and contact your theme developer if you miss any options. At any case, you can add link attributes in the source HTML by toggling “Edit as HTML” view or by going to “Code Editor”.
