How can I add Rel="nofollow" to external links in rich text editor

[showupdigitalmedia (Harsh Raichura)]

Hello

I'm exploring Prismic to start my own blog, and I've created a sample structure for the same.

but now, I'm facing issue because I want to add rel="nofollow" to external links from my content, this is very important from SEO perspective, but as of now I can only see option to open this link in a new tab.

So, My question is how can I give nofollow attribute to content added via rich text field.

Thanks,

• Harsh

[Pau]

Hello! Welcome to the Prismic community forum!

We have a dedicated article explaining how. Check it out here: How to add nofollow, alt, attributes to links

[showupdigitalmedia (Harsh Raichura)]

Hi @Pau

Thanks a lot for your feedback.

I’ve already checked that guide before posting this question, but that guide is to add “nofollow” element to Link field, But I’m talking about the link that are mentioned in the Rich text editor.

Let me give you more clear idea.

I’m creating a blog and for that to add content, I’m using Rich text editor field, where I’m getting basic option to add content, headings, etc.

Here I can add hyperlink to text as well, but there is no option for me to give nofollow attribute to it.

And considering blog structure I can’t use Link element as it is not a right option.

Check attached screenshot for better understanding.

I hope this helps you to understand my problem more clearly.

Thanks,

• Harsh

[jean.helou]

@showupdigitalmedia the principle described in the article also applies to rich text fields you would define a label such as nofollow_link and apply that label to the link selection in the rich text field. Then in your renderer, if you have the label and are rendering a link you can add the nofollow attribute.

[showupdigitalmedia (Harsh Raichura)]

Hi @jean.helou @Pau

Thanks for the prompt response.

I’ve tried doing the same, I’ve added one label filed to my Rich text editor component and I’ve applied the same on my current Hyperlink.

After that, I’ve tried rendering the same but that label is being added as as you can see in the following screenshot.

But here we need that label to work as a [rel=“nofollow”] in the same hyperlink TAG.

So, How can we do that with the use of label and how can I render the same with Rich text content as per the document. I’m getting confused here.

Is it possible for you to give me more clarity or if possible can you please share some kind of code example to render the same?

Thanks,
Harsh

@rinkusamanta12 FYI…

[Pau]

Hello again, thank you a lot for giving us more details!

You’re in the right path, the only thing that you’ll need to implement now is an HTML Serializer. This function helps you customize the HTML output of a Rich Text Field.

Afterwards, you only need to pass the HTML serializer to your Rich text field. Which technology are you using to template?

For example, in React you’ll pass it like this:

<RichText render={document.data.text_field} htmlSerializer={htmlSerializer} />

[jean.helou]

Actually you don’t necessarily need to define a full fledged html serializer which is quite a lot of work if all you need is to override rendering for a single element, prismic-react now supports an elements property:

     <RichText
        render={document.data.text_field}
        elements={{
          hyperlink: function a({ children, data }) {
            return <a>{children}</a>;
          }
        }}
      />

I don’t have the shape of data at hand, but you should be able to inspect it to find out how to detect the label and convert it into a no-follow attribute.

[hugo.villain]

Indeed @jean.helou, elements is probably the way to go!
Here is the signature of the function: https://github.com/prismicio/prismic-reactjs/blob/master/src/richtext.js#L39