BlockNote Editor Automatically Adds `rel="nofollow"` to Links, Hurting SEO

[sundargautam18]

Description:

I am using BlockNote Editor, and I noticed that when adding a link, it automatically includes rel="nofollow" in the <a> tag. This behavior is problematic for internal links because it prevents search engines from crawling and indexing important pages, disrupting internal linking strategies.

Impact:

We are implementing location-based pages, and it is crucial that search engine bots can follow these links to discover and index new pages. However, with rel="nofollow" applied:

• Internal links do not pass link equity, negatively affecting SEO.
• Search engines fail to crawl and index these pages properly.
• Our SEO strategy is ineffective as pages remain undiscovered.

Steps to Reproduce:

1. Use BlockNote Editor to add a link inside a document.
2. Inspect the generated HTML output.
3. Observe that the anchor (<a>) tag automatically includes rel="nofollow".
4. Notice that search engine bots do not follow these links, impacting indexing.

Expected Behavior:

• Internal links should NOT have rel="nofollow" so search engines can properly crawl and index them.
• There should be an option to control this behavior How can i achieve this?

Proposed Solution:

1. Remove rel="nofollow" by default for internal links while keeping it optional for external links.
2. Provide developers with a way to customize link behavior in the schema configuration.

Additional Context:

This issue negatively impacts SEO best practices, making it harder for search engines to discover location-based pages. Removing nofollow from internal links will improve indexing, ranking, and overall discoverability.

---

[nperez0111]

Would likely need to make this configurable since other use-cases may want different values. Would accept a PR for this

[sundargautam18]

Feature Request: Allow Control Over rel="nofollow" for Links in BlockNote Editor

Description: Currently, the BlockNote Editor automatically applies rel="nofollow" to all links, including internal links. This negatively impacts SEO because search engines do not follow these links, preventing proper indexing of important pages.

For better SEO and flexibility, we request a default option in the BlockNote Editor’s link settings to control rel="nofollow", similar to how other rich text editors handle this.

Current Issue: Internal links are being nofollowed unnecessarily, preventing search engines from indexing important pages.

No built-in option to enable/disable rel="nofollow" when inserting a link.

SEO impact: Internal linking is crucial for search engine discoverability, and the current behavior disrupts this strategy.

Expected Behavior: Add a checkbox in the link settings to enable or disable rel="nofollow".

By default, internal links should not have rel="nofollow".

Allow customization so developers can modify the rel attribute as needed.

Proposed Solution: We implemented a custom link element that removes nofollow for internal links while keeping it for external links. Below is an example of how this can be achieved:

import { defaultProps } from "@blocknote/core";
import { createReactInlineContentSpec } from "@blocknote/react";

// Custom Link Block
export const NameLink = createReactInlineContentSpec(
  {
    type: "myLink",
    propSchema: {
      textAlignment: defaultProps.textAlignment,
      textColor: defaultProps.textColor,
      name: { type: "string", editable: true, default: "Enter name" },
      link: { type: "string", editable: true, default: "https://example.com" },
    },
    content: "none",
  },
  {
    render: (props) => {
      const isInternalLink = props.inlineContent.props.link.startsWith(window.location.origin);
      return (
        <a
          href={props.inlineContent.props.link}
          target="_blank"
          rel={isInternalLink ? "" : "noopener noreferrer nofollow"}
          style={{ textDecoration: "underline", padding: "2px 4px" }}
        >
          {props.inlineContent.props.name}
        </a>
      );
    },
  }
);
  const insertNameLink = (editor) => ({
    title: "Name & Link",
    onItemClick: () => {
      const name = window.prompt("Enter the name:");
      if (!name) return;

      const link = window.prompt("Enter the link URL:");
      if (!link) return;

      editor.insertInlineContent([
        {
          type: "myLink",
          props: {
            name,
            link,
          },
        },
        " ", // add a space after the mention
      ]);
    },
    aliases: ["name", "link", "hyperlink", "reference"],
    group: "Other",
    icon: <MdLink />,
  });
  const schema = BlockNoteSchema.create({
    inlineContentSpecs: {
      ...defaultInlineContentSpecs,
      myLink: NameLink,
    },
  });

Which previews like this:

Request Summary: ✅ Add an option in the link settings to enable/disable rel="nofollow". ✅ Remove nofollow from internal links by default. ✅ Allow developers to customize link behavior more easily just like this:

Would this be possible to implement in the BlockNote core editor? Looking forward to your thoughts! 🚀