How to fix nested links
Nested links (a tags) are not allowed on web pages, which prevents us from optimizing pages with nested links for performance and SEO.
Unfortunately nested links are easy to make. You can link an entire Frame and then put some text inside it that also has links. In HTML, it would look something like this:
<a href="/contact">
<div>
<p>You can <a href="/contact">contact us</a> if you so desire.</p>
</div>
</a>
Luckily, Framer can help you avoid most of these because we can detect them on the canvas for static content, like Frames and static text. If that is the case, we will show a small alert next to your layer (with a link to this page) so you can fix it before you publish.
To fix it, simply remove one of the links (it’s typically the outer one) and rework your structure so that they don’t nest anymore. You can always ask in the community if you’re not sure how to approach this.
Unfortunately, there are also instances where we can only detect them after we build the page (on publishing). That is in cases where dynamic content results in a nested link, for example:
• CMS content (with links)
• Components (with links that aren't variables)
• Overrides and code components (that add links)
In that case you will get an optimization warning like this for the specific pages that have nested links (all other pages will still be optimized):
### /page-path
This page has nested links (<a> tags) and could not be optimized, which means it will be slower to load and its SEO will suffer.
Learn how to debug and fix this issue at https://framer.com/r/nested-links
The nested links are:
- contact us ("/contact")
You can use the list of nested links to locate them on the page, and fix them like mentioned above.
