Adding rel tags to internal and external links (#2354)

PothieuG · web-flow · commit bbc49c4a034c · 2026-01-20T16:05:44.000+01:00
* Adding rel tags to internal and external links

* Adding rel to missing links in the previous commit
diff --git a/app/profile/client-page.tsx b/app/profile/client-page.tsx
@@ -167,7 +167,7 @@ export default function ProfileClientPage({ data }: ProfileClientPageProps) {
                 />
                 <div>
                   <h1>{isAuthenticated ? user?.name : ""}</h1>
-                  <a className="flex align-center underline" href={`https://www.github.com/${user?.nickname}`} target="_blank" rel="noreferrer">
+                  <a className="flex align-center underline" href={`https://www.github.com/${user?.nickname}`} target="_blank" rel="noopener noreferrer nofollow">
                     <RiGithubFill size={20} className=" my-2 mx-1" />
                     <span className="my-2">GitHub Profile</span>
                   </a>
diff --git a/app/user/client-page.tsx b/app/user/client-page.tsx
@@ -328,6 +328,7 @@ export default function UserRulesClientPage({ ruleCount }) {
 
               <a
                 target="_blank"
+                rel="noopener noreferrer"
                 href={`https://ssw.com.au/people/${author.slug}/`}
                 className="inline-flex items-center px-3 py-1.5 text-sm font-medium text-gray-800 border border-gray-400 rounded-md hover:border-ssw-red hover:text-ssw-red transition-colors leading-5"
               >
diff --git a/components/ArchivedReasonContent.tsx b/components/ArchivedReasonContent.tsx
@@ -152,7 +152,7 @@ export default function ArchivedReasonContent({ reason, className = "" }: Archiv
         }
 
         return (
-          <a key={index} href={href} className={linkClassName} target="_blank" rel="noopener noreferrer">
+          <a key={index} href={href} className={linkClassName} target="_blank" rel="noopener noreferrer nofollow">
             {segment.content}
           </a>
         );
diff --git a/components/AuthorsCard.tsx b/components/AuthorsCard.tsx
@@ -100,7 +100,7 @@ export default function AuthorsCard({ authors }: AuthorsCardProps) {
             <div className="px-2 flex items-center my-2 justify-center" key={`author_${index}`}>
               {/* @ts-expect-error tinacms types are wrong */}
               <div className="w-12 h-12 overflow-hidden rounded-full relative" data-tina-field={tinaField(authors?.[index], "title")}>
-                <a href={author.url} target="_blank" rel="noopener noreferrer">
+                <a href={author.url} target="_blank" rel="noopener noreferrer nofollow">
                   {imgSrc?.trim() && (
                     <Image
                       src={imgSrc}
diff --git a/components/Breadcrumbs.tsx b/components/Breadcrumbs.tsx
@@ -37,7 +37,7 @@ export default function Breadcrumbs({ categories, isCategory = false, isHomePage
   return (
     <nav aria-label="Breadcrumb" className="m-4 mt-2">
       <div className="grid grid-cols-[auto_1fr] gap-2 items-start md:items-center">
-        <a href={parentSiteUrl} className="inline-flex items-center shrink-0 translate-y-[2px] md:translate-y-0 md:h-[1.5em]">
+        <a href={parentSiteUrl} target="_blank" rel="noopener noreferrer" className="inline-flex items-center shrink-0 translate-y-[2px] md:translate-y-0 md:h-[1.5em]">
           <img alt="SSW Foursquare" src={withBasePath(iconSrc)} width={16} height={16} className="block w-4 h-4" loading="lazy" decoding="async" />
           <ChevronIcon className="ml-2 hidden md:block" size={18} />
         </a>
diff --git a/components/CategoryActionButtons.tsx b/components/CategoryActionButtons.tsx
@@ -26,7 +26,7 @@ const CategoryActionButtons: React.FC = () => {
       <a
         href="https://www.ssw.com.au/ssw/Standards/Default.aspx"
         target="_blank"
-        rel="noopener noreferrer"
+        rel="noopener noreferrer nofollow"
         className="flex items-center justify-center gap-2 px-3 py-1.5 sm:px-4 sm:py-2 text-xs sm:text-sm text-gray-700 bg-white rounded-md border hover:bg-gray-50 hover:text-ssw-red transition-colors duration-200 no-underline text-center"
       >
         <BiLinkExternal className="hidden sm:block w-4 h-4" />
diff --git a/components/HelpImproveCard.tsx b/components/HelpImproveCard.tsx
@@ -14,7 +14,7 @@ export default function HelpImproveCard() {
           className="underline"
           href="https://twitter.com/adamcogan"
           target="_blank"
-          rel="noopener noreferrer"
+          rel="noopener noreferrer nofollow"
         >
           tweet me
         </a>
diff --git a/components/JoinConversationCard.tsx b/components/JoinConversationCard.tsx
@@ -4,7 +4,7 @@ import { RiTwitterXLine } from "react-icons/ri";
 export default function JoinConversationCard() {
   return (
       <div className="flex justify-center">
-        <a href="https://twitter.com/intent/tweet?hashtags=SSWRules%2C&original_referer=https%3A%2F%2Fwww.ssw.com.au%2F&ref_src=twsrc%5Etfw%7Ctwcamp%5Ebuttonembed%7Ctwterm%5Ehashtag%7Ctwgr%5ESSWRules" className="flex items-center text-white bg-gray-800 hover:bg-gray-700 rounded-full px-4 py-2">
+        <a href="https://twitter.com/intent/tweet?hashtags=SSWRules%2C&original_referer=https%3A%2F%2Fwww.ssw.com.au%2F&ref_src=twsrc%5Etfw%7Ctwcamp%5Ebuttonembed%7Ctwterm%5Ehashtag%7Ctwgr%5ESSWRules" target="_blank" rel="noopener noreferrer nofollow" className="flex items-center text-white bg-gray-800 hover:bg-gray-700 rounded-full px-4 py-2">
           <RiTwitterXLine className="inline mr-2" size={24} />
           Post #SSWRules
         </a>
diff --git a/components/OpenInChatGptButton.tsx b/components/OpenInChatGptButton.tsx
@@ -18,7 +18,7 @@ You are to assist the user with their queries about this rule - and if they have
   }, []);
 
   return (
-    <Link href={uri} target="_blank" aria-label="Open in ChatGPT" className="flex items-center px-2 py-1 border rounded-md hover:bg-ssw-red hover:text-white">
+    <Link href={uri} target="_blank" rel="noopener noreferrer nofollow" aria-label="Open in ChatGPT" className="flex items-center px-2 py-1 border rounded-md hover:bg-ssw-red hover:text-white">
       <RiOpenaiFill />
       <span className="ml-1 text-sm font-semibold">Open in ChatGPT</span>
     </Link>
diff --git a/components/QuickLinksCard.tsx b/components/QuickLinksCard.tsx
@@ -12,7 +12,7 @@ const QuickLinksCard = ({ links } : QuickLinksProps) => {
             <ul>
                 {links.map((link) => (
                     <li key={link.uri}>
-                        <Link href={link.uri} target="_blank" rel="noopener noreferrer">{link.linkText}</Link>
+                        <Link href={link.uri} target="_blank" rel="noopener noreferrer nofollow">{link.linkText}</Link>
                     </li>
                 ))}
             </ul>
diff --git a/components/RuleCard.tsx b/components/RuleCard.tsx
@@ -24,7 +24,7 @@ export default function RuleCard({ title, slug, lastUpdatedBy, lastUpdated, inde
           <h4 className="flex m-0 content-center text-lg text-gray-400">
             <span className="font-medium">
               {authorUrl && (lastUpdatedBy || "Unknown") !== "Unknown" ? (
-                <a href={authorUrl} target="_blank" rel="noopener noreferrer" className="underline">
+                <a href={authorUrl} target="_blank" rel="noopener noreferrer nofollow" className="underline">
                   {lastUpdatedBy || "Unknown"}
                 </a>
               ) : (
diff --git a/components/WhyRulesCard.tsx b/components/WhyRulesCard.tsx
@@ -9,7 +9,7 @@ export default function WhyRulesCard() {
           className="underline"
           href="https://www.codemag.com/article/0605091"
           target="_blank"
-          rel="noopener noreferrer"
+          rel="noopener noreferrer nofollow"
         >
           History of SSW Rules
         </a>
diff --git a/components/auth/UserDropdown.tsx b/components/auth/UserDropdown.tsx
@@ -102,7 +102,7 @@ export default function UserDropdown() {
         <a
           href={`https://www.github.com/${u.nickname}`}
           target="_blank"
-          rel="noreferrer"
+          rel="noopener noreferrer nofollow"
           className="flex w-full items-center gap-2 rounded-xl px-3 py-2 text-sm hover:bg-gray-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-black/50 dark:hover:bg-gray-800"
         >
           <FaGithub size="18" /> GitHub Profile
diff --git a/components/last-updated-by/index.tsx b/components/last-updated-by/index.tsx
@@ -83,7 +83,7 @@ export default function GitHubMetadata({ owner = "tinacms", repo = "tina.io", pa
               Last updated by{" "}
               <span className="font-bold text-black">
                 {shouldShowLink ? (
-                  <a href={`https://github.com/${latestCommit.author?.login}`} target="_blank" rel="noopener noreferrer">
+                  <a href={`https://github.com/${latestCommit.author?.login}`} target="_blank" rel="noopener noreferrer nofollow">
                     {displayAuthorName}
                   </a>
                 ) : (
@@ -99,7 +99,7 @@ export default function GitHubMetadata({ owner = "tinacms", repo = "tina.io", pa
                 href={historyUrl}
                 target="_blank"
                 title={tooltipContent}
-                rel="noopener noreferrer"
+                rel="noopener noreferrer nofollow"
                 className="underline flex flex-row items-center gap-1.5 mb-2 md:mb-0"
               >
                 See history
@@ -120,7 +120,7 @@ export default function GitHubMetadata({ owner = "tinacms", repo = "tina.io", pa
               href={historyUrl}
               target="_blank"
               title="View commit history on GitHub"
-              rel="noopener noreferrer"
+              rel="noopener noreferrer nofollow"
               className="underline flex flex-row items-center gap-1.5 mb-2 md:mb-0"
             >
               See history
diff --git a/components/layout/nav/footer.tsx b/components/layout/nav/footer.tsx
@@ -20,7 +20,7 @@ export const Footer = () => {
           </span>
           <span>
             Loving SSW Rules?{" "}
-            <a href="https://github.com/SSWConsulting/SSW.Rules" target="_blank" rel="noreferrer" className="action-button-label underline hover:underline">
+            <a href="https://github.com/SSWConsulting/SSW.Rules" target="_blank" rel="noopener noreferrer nofollow" className="action-button-label underline hover:underline">
               Star us on GitHub.
             </a>{" "}
           </span>
@@ -36,13 +36,17 @@ export const Footer = () => {
                 <a
                   className="inline-block text-white visited:text-white leading-3 transition-all duration-300 ease-in-out hover:text-ssw-red max-sm:mb-3"
                   href="https://github.com/SSWConsulting/SSW.Rules/issues"
+                  target="_blank"
+                  rel="noopener noreferrer nofollow"
                 >
                   FEEDBACK / SUGGEST A FEATURE
                 </a>
                 <span className="px-2 hidden sm:inline">|</span>
                 <a
                   className="inline-block text-white visited:text-white leading-3 transition-all duration-300 ease-in-out hover:text-ssw-red max-sm:mb-3"
                   href="https://www.ssw.com.au/terms-and-conditions"
+                  target="_blank"
+                  rel="noopener noreferrer"
                 >
                   TERMS AND CONDITIONS
                 </a>
@@ -54,7 +58,7 @@ export const Footer = () => {
                     title="SSW on TikTok"
                     href="https://www.tiktok.com/@ssw_tv"
                     target="_blank"
-                    rel="noreferrer"
+                    rel="noopener noreferrer nofollow"
                   >
                     <FaTiktok size={24} />
                   </a>
@@ -64,7 +68,7 @@ export const Footer = () => {
                     title="SSW on Twitter"
                     href="https://twitter.com/SSW_TV"
                     target="_blank"
-                    rel="noreferrer"
+                    rel="noopener noreferrer nofollow"
                   >
                     <FaXTwitter size={24} />
                   </a>
@@ -74,7 +78,7 @@ export const Footer = () => {
                     title="SSW on Instagram"
                     href="https://www.instagram.com/ssw_tv"
                     target="_blank"
-                    rel="noreferrer"
+                    rel="noopener noreferrer nofollow"
                   >
                     <FaInstagram size={24} />
                   </a>
@@ -84,7 +88,7 @@ export const Footer = () => {
                     title="SSW on Facebook"
                     href="https://www.facebook.com/SSW.page"
                     target="_blank"
-                    rel="noreferrer"
+                    rel="noopener noreferrer nofollow"
                   >
                     <FaFacebook size={24} />
                   </a>
@@ -94,7 +98,7 @@ export const Footer = () => {
                     title="SSW on LinkedIn"
                     href="https://www.linkedin.com/company/ssw"
                     target="_blank"
-                    rel="noreferrer"
+                    rel="noopener noreferrer nofollow"
                   >
                     <FaLinkedin size={24} />
                   </a>
@@ -104,7 +108,7 @@ export const Footer = () => {
                     title="SSW on YouTube"
                     href="https://www.youtube.com/user/sswtechtalks"
                     target="_blank"
-                    rel="noreferrer"
+                    rel="noopener noreferrer nofollow"
                   >
                     <FaYoutube size={24} />
                   </a>
@@ -127,7 +131,7 @@ export const Footer = () => {
                   className="inline-block text-white visited:text-white leading-3 transition-all duration-300 ease-in-out hover:text-ssw-red"
                   href={deploymentUrl}
                   target="_blank"
-                  rel="noreferrer"
+                  rel="noopener noreferrer nofollow"
                 >
                   {versionDeployed}
                 </a>
diff --git a/components/rule-list/rule-list-item.tsx b/components/rule-list/rule-list-item.tsx
@@ -60,8 +60,8 @@ const RuleListItem: React.FC<RuleListItemProps> = ({ rule, index, filter, onBook
                 <span
                   dangerouslySetInnerHTML={{
                     __html: rule.archivedreason
-                      ?.replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2" class="text-ssw-red underline hover:opacity-80">$1</a>')
-                      ?.replace(/https?:\/\/[^\s]+/g, '<a href="$&" class="text-ssw-red underline hover:opacity-80">$&</a>'),
+                      ?.replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2" class="text-ssw-red underline hover:opacity-80" target="_blank" rel="noopener noreferrer nofollow">$1</a>')
+                      ?.replace(/https?:\/\/[^\s]+/g, '<a href="$&" class="text-ssw-red underline hover:opacity-80" target="_blank" rel="noopener noreferrer nofollow">$&</a>'),
                   }}
                 />
               </div>
diff --git a/components/server/MegaMenuWrapper.tsx b/components/server/MegaMenuWrapper.tsx
@@ -55,7 +55,7 @@ const ActionButtons = () => {
         <Tooltip text="Try out RulesGPT" showDelay={3000} hideDelay={18000}>
           <a
             target="_blank"
-            rel="noopener noreferrer"
+            rel="noopener noreferrer nofollow"
             href="https://rulesgpt.ssw.com.au"
             className="action-btn-link-underlined"
             onClick={() => {
@@ -70,7 +70,7 @@ const ActionButtons = () => {
         <Tooltip text="Create an SSW Rule" showDelay={1000} hideDelay={3000}>
           <a
             target="_blank"
-            rel="noopener noreferrer"
+            rel="noopener noreferrer nofollow"
             href={`/${basePath}/admin/index.html#/collections/rule/~`}
             className="action-btn-link-underlined"
             aria-label="Create an SSW Rule"
@@ -82,7 +82,7 @@ const ActionButtons = () => {
         <Tooltip text="SSW Rules wiki" showDelay={1000} hideDelay={3000}>
           <a
             target="_blank"
-            rel="noopener noreferrer"
+            rel="noopener noreferrer nofollow"
             href="https://github.com/SSWConsulting/SSW.Rules.Content/wiki"
             className="action-btn-link-underlined"
             aria-label="SSW Rules wiki"
diff --git a/components/typography-components.tsx b/components/typography-components.tsx
@@ -3,6 +3,7 @@ import Link from "next/link";
 import React from "react";
 import { Prism } from "tinacms/dist/rich-text/prism";
 import { toSlug } from "@/lib/utils";
+import { CustomLink } from "@/components/customLink";
 
 // Helper function to extract text content from TinaCMS props structure
 const getTextContent = (props: any): string => {
@@ -106,9 +107,9 @@ export const getTypographyComponents = (enableAnchors = false) => ({
     }
 
     return (
-      <a className="underline hover:text-ssw-red" href={href} {...props}>
+      <CustomLink className="underline hover:text-ssw-red" href={href || ""}>
         {props.children}
-      </a>
+      </CustomLink>
     );
   },
   li: (props) => <li {...props} />,
diff --git a/components/ui/icon-link.tsx b/components/ui/icon-link.tsx
@@ -21,16 +21,20 @@ const IconLink: React.FC<IconLinkProps> = ({ href, children, className = "", tit
   const baseClasses =
     "inline-flex items-center justify-center rounded-md font-medium transition-colors hover:text-[var(--ssw-red)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2";
 
+  const isExternal = href.startsWith("http");
   let adjustedHref = href;
 
-  if (href.startsWith("http")) {
+  if (isExternal) {
     adjustedHref = href;
   } else {
     adjustedHref = `${basePath}${href}`;
   }
 
+  const effectiveRel = rel ?? (isExternal ? "noopener noreferrer nofollow" : undefined);
+  const effectiveTarget = target ?? (isExternal ? "_blank" : undefined);
+
   const link = (
-    <a href={adjustedHref} className={`${baseClasses} ${className}`} target={target} rel={rel} onClick={onClick}>
+    <a href={adjustedHref} className={`${baseClasses} ${className}`} target={effectiveTarget} rel={effectiveRel} onClick={onClick}>
       {children}
     </a>
   );

Original file line number	Diff line number	Diff line change
`@@ -328,6 +328,7 @@ export default function UserRulesClientPage({ ruleCount }) {`
`328`	`328`
`329`	`329`	`<a`
`330`	`330`	`target="_blank"`
	`331`	`+ rel="noopener noreferrer"`
`331`	`332`	href={`https://ssw.com.au/people/${author.slug}/`}
`332`	`333`	`className="inline-flex items-center px-3 py-1.5 text-sm font-medium text-gray-800 border border-gray-400 rounded-md hover:border-ssw-red hover:text-ssw-red transition-colors leading-5"`
`333`	`334`	`>`
Original file line number	Diff line number	Diff line change
`@@ -152,7 +152,7 @@ export default function ArchivedReasonContent({ reason, className = "" }: Archiv`
`152`	`152`	`}`
`153`	`153`
`154`	`154`	`return (`
`155`		`- <a key={index} href={href} className={linkClassName} target="_blank" rel="noopener noreferrer">`
	`155`	`+ <a key={index} href={href} className={linkClassName} target="_blank" rel="noopener noreferrer nofollow">`
`156`	`156`	`{segment.content}`
`157`	`157`	`</a>`
`158`	`158`	`);`
Original file line number	Diff line number	Diff line change
`@@ -26,7 +26,7 @@ const CategoryActionButtons: React.FC = () => {`
`26`	`26`	`<a`
`27`	`27`	`href="https://www.ssw.com.au/ssw/Standards/Default.aspx"`
`28`	`28`	`target="_blank"`
`29`		`- rel="noopener noreferrer"`
	`29`	`+ rel="noopener noreferrer nofollow"`
`30`	`30`	`className="flex items-center justify-center gap-2 px-3 py-1.5 sm:px-4 sm:py-2 text-xs sm:text-sm text-gray-700 bg-white rounded-md border hover:bg-gray-50 hover:text-ssw-red transition-colors duration-200 no-underline text-center"`
`31`	`31`	`>`
`32`	`32`	`<BiLinkExternal className="hidden sm:block w-4 h-4" />`
Original file line number	Diff line number	Diff line change
`@@ -14,7 +14,7 @@ export default function HelpImproveCard() {`
`14`	`14`	`className="underline"`
`15`	`15`	`href="https://twitter.com/adamcogan"`
`16`	`16`	`target="_blank"`
`17`		`- rel="noopener noreferrer"`
	`17`	`+ rel="noopener noreferrer nofollow"`
`18`	`18`	`>`
`19`	`19`	`tweet me`
`20`	`20`	`</a>`