How to add nofollow, alt, attributes to links

[Pau]

As part of your SEO strategy, you might need content editors to have more control over the attributes of links inserted into the content. 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 manage other link attributes from the CMS UI, you need to configure specific fields in your custom types to populate the attribute's value.

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 Select in the UI will look like this:

Now, on your code, render the link along with the new attributes. Here is a simple Javascript example; note that we're using a Link Resolver to link to the correct URL route:

var PrismicDOM = require('prismic-dom');
  
const link = document.data.link;

const hyperLink = link.hyperlink;
const linkUrl = PrismicDOM.Link.url(hyperLink, linkResolver);
const targetAttr = hyperLink.target ? 'target="' + hyperLink.target : '';
const relAttr = link.rel ? 'rel="' + link.rel : '';

const finalLink = `<a ${targetAttr} ${relAttr} href="${linkUrl}">${link.label}</a>`