Link fields in Prismic are not carrying attribute data (other than target="_blank" if you've activated that option in the Link field settings). To be able to manage other link attributes from the CMS UI, you need to:

  • configure specific fields in your custom types to populate the attributes value
  • get some JS to render the links with their attributes

Configuring the custom type

Add a Select field after the Link field so that content editors can select the value of the rel attribute, for example:

"link": {
"type": "Group",
"config": {
"fields": {
"hyperlink": {
"type": "Link",
"config": {
"allowTargetBlank": true,
"label": "hyperlink"
}
},
"rel": {
"type": "Select",
"config": {
"options": [
"nofollow",
"noopener"
],
"label": "rel"
}
},
"label": {
"type": "Text",
"config": {
"label": "label"
}
}
},
"label": "link"
}

The CMS UI will look like this:

Now, on your code, you need to render the link along with its attribute. Here is a JS example:

var PrismicDOM = require('prismic-dom');

var link = document.data.link;
var hyperLink = link.hyperlink;
var linkUrl = PrismicDOM.Link.url(hyperLink, linkResolver);
var targetAttr = hyperLink.target ? 'target="' + hyperLink.target : '';
var relAttr = link.rel ? 'rel="' + link.rel : '';
var res = `<a ${targetAttr} ${relAttr} href="${linkUrl}">${link.label}</a>`

Did this answer your question?