Can someone assist me with adding nofollow attributes to links in Webflow?
TL;DR
- Select the link in Webflow, go to the Settings panel, and add a custom attribute with Name = rel and Value = nofollow.
- For links opening in a new tab, use rel="nofollow noopener noreferrer" to enhance security and privacy.
To add a nofollow attribute to links in Webflow, you need to manually add it as a custom attribute to the anchor element.
1. Select the Link Element
- In the Webflow Designer, click on the link (e.g., a text link, button, or link block) that you want to make nofollow.
- Make sure you have selected the specific anchor element in the Navigator or directly on the canvas.
2. Add a Custom Attribute
- Go to the Settings panel (the gear icon on the right sidebar).
- Scroll to the Custom Attributes section.
- Click + Add Custom Attribute.
- In the Name field, type: rel
- In the Value field, type: nofollow
This adds a rel="nofollow" attribute to that link in the final HTML.
3. Use rel="nofollow noopener noreferrer" for External Links
- If your link opens in a new tab (i.e., Open in new tab is checked), it's recommended to use:
- rel="nofollow noopener noreferrer"
- This improves security and privacy by preventing access to the
window.openerobject.
4. Check the Published Output
- After publishing the site, inspect the link in your browser’s developer tools to confirm the attribute is applied.
- You should see something like:
<a href="https://example.com" rel="nofollow">Link Text</a>
Summary
To add nofollow in Webflow, select the link, go to the Settings panel, and add a custom attribute with Name = rel and Value = nofollow. Use nofollow noopener noreferrer for links that open in a new tab.