|), e.g. rel|noopener noreferrer or rel|nofollow.
A super relevant question recently came up: How do you correctly add custom link attributes like rel="noopener noreferrer" in Elementor? Many people struggle here because they use the standard HTML syntax rel="...", which Elementor ignores. In this post, I’ll show you the simple method for correctly adding any custom link attribute — and explain why it matters.
Why do you need custom link attributes?
Custom link attributes let you add extra information or functionality to a link beyond the basic link target (href).
Common use cases include:
- Security: Important attributes like
rel="noopener"protect your site and your visitors. - SEO: Attributes such as
rel="nofollow"orrel="sponsored"give search engines clear instructions on how to handle a link. - Tracking & analytics: With
data-*attributes, you can precisely track clicks (e.g. for Google Analytics or Matomo). - Styling & functionality: They can serve as hooks for special CSS styling or JavaScript interactions.
Practical example: The security attribute rel="noopener"
The most important attribute you need to know is rel="noopener noreferrer". It closes a critical security gap that occurs when opening links in a new tab (target="_blank") — known as “tabnabbing”.
Without this protection, the newly opened site can access your page in the background and manipulate it (e.g. turning it into a phishing page). The noopener attribute cuts off this connection and protects your site and your users’ trust.
Step-by-step: Adding custom link attributes in Elementor
The correct input in Elementor always follows the format key|value. The vertical bar (|) is the crucial separator.
Wrong: rel="noopener noreferrer"
Correct: rel|noopener noreferrer
Step-by-step guide
- Select the desired widget in Elementor (e.g. button, text link).
- Click on the gear icon in the link options to open the advanced settings.
- Enter your desired attribute in the “Custom Attributes” field using the
key|valueformat.
SCREENSHOT: Elementor link options with correctly filled attribute field
More input examples:
- For a nofollow link:
rel|nofollow - For tracking:
data-event|promo-click - Multiple attributes: Simply separate multiple attributes with a comma (
,).
Here’s the original Elementor post on custom link attributes for widget link elements.
What impact do clean attributes have on my SEO?
Even though a single attribute is rarely a direct ranking factor, clean technical settings send clear quality signals to Google and indirectly support your SEO:
- Security & trust: Correctly applied security attributes like
noopenerprotect your users. A secure and trustworthy site is a key foundation for strong E-E-A-T (Experience, Expertise, Authoritativeness, Trustworthiness). - Crawl instructions: Attributes like
nofolloworsponsoredhelp Google correctly interpret your site’s link structure. - Data-driven strategy: Tracking attributes provide valuable insights into user behavior, helping you optimize your SEO strategy based on real data.
Conclusion
Adding custom link attributes in Elementor is surprisingly simple once you know the trick with the vertical bar. This feature gives you the flexibility you need for professional security standards, detailed tracking, and clean on-page SEO. It’s a small detail with a big impact on the technical quality of your website.
Your next steps:
Check your most important external links: do they open in a new tab? If so, add the rel|noopener noreferrer attribute now. Then think about where custom tracking attributes could help you better understand user behavior.
