Affiliate links - consistent rel attribute

dotcom-rendering/playwright/tests/affiliate-links.e2e.spec.ts

@@ -21,7 +21,7 @@ test.describe('Affiliate links', () => {
 			await expect(disclaimerLocator).toContainText('affiliate link');
 		});
 
-		test.skip('skimlinks should have the attribute rel="sponsored noreferrer noopener"', async ({
+		test('skimlinks should have the attribute rel="sponsored noreferrer noopener"', async ({
 			page,
 		}) => {
 			await loadPage({

dotcom-rendering/src/components/BlockquoteBlockComponent.tsx

@@ -2,7 +2,7 @@ import { css, jsx } from '@emotion/react';
 import { articleItalic17 } from '@guardian/source/foundations';
 import type { ReactNode } from 'react';
 import { Fragment } from 'react';
-import { isSkimlink } from '../lib/affiliateLinksUtils';
+import { isSkimlink, SKIMLINK_REL } from '../lib/affiliateLinksUtils';
 import { getAttrs, isElement, parseHtml } from '../lib/domUtils';
 import { palette } from '../palette';
 import { logger } from '../server/lib/logging';
@@ -103,7 +103,7 @@ const textElement =
 					 * @see https://developers.google.com/search/docs/crawling-indexing/qualify-outbound-links
 					 */
 					rel: isSkimlink(href)
-						? 'sponsored'
+						? SKIMLINK_REL
 						: getAttrs(node)?.getNamedItem('rel')?.value,
 					key,
 					children,

dotcom-rendering/src/components/Button/ProductLinkButton.tsx

@@ -5,6 +5,7 @@ import type {
 	ThemeButton,
 } from '@guardian/source/react-components';
 import { LinkButton } from '@guardian/source/react-components';
+import { SKIMLINK_REL } from '../../lib/affiliateLinksUtils';
 import { palette } from '../../palette';
 import { heightAutoStyle, wrapButtonTextStyle } from './styles';
 import { getPropsForLinkUrl } from './utils';
@@ -66,7 +67,7 @@ export const ProductLinkButton = ({
 		<LinkButton
 			{...getPropsForLinkUrl(label)}
 			href={url}
-			rel="sponsored noreferrer noopener"
+			rel={SKIMLINK_REL}
 			priority={priority}
 			theme={theme}
 			data-component={dataComponent}

dotcom-rendering/src/components/CaptionText.tsx

@@ -2,7 +2,7 @@ import { css } from '@emotion/react';
 import { headlineMedium17, space } from '@guardian/source/foundations';
 import { type ReactNode } from 'react';
 import sanitise, { type IOptions } from 'sanitize-html';
-import { isSkimlink } from '../lib/affiliateLinksUtils';
+import { isSkimlink, SKIMLINK_REL } from '../lib/affiliateLinksUtils';
 import { getAttrs, parseHtml } from '../lib/domUtils';
 import { palette } from '../palette';
 
@@ -79,7 +79,7 @@ const renderTextElement = (node: Node, key: number): ReactNode => {
 					 * Affiliate links must have the rel attribute set to "sponsored"
 					 * @see https://developers.google.com/search/docs/crawling-indexing/qualify-outbound-links
 					 */
-					rel={isSkimlink(href) ? 'sponsored' : undefined}
+					rel={isSkimlink(href) ? SKIMLINK_REL : undefined}
 				>
 					{children}
 				</a>

dotcom-rendering/src/components/ProductCardImage.tsx

@@ -40,7 +40,7 @@ export const ProductCardImage = ({
 				<a
 					href={url}
 					target="_blank"
-					rel="noopener noreferrer"
+					rel="sponsored noopener noreferrer"
 					data-link-name="product image link"
 					data-x-cust-component-id={xCustComponentId}
 					// this is needed to override global style

dotcom-rendering/src/components/TextBlockComponent.tsx

@@ -11,7 +11,7 @@ import type { ReactNode } from 'react';
 import { Fragment } from 'react';
 import type { IOptions } from 'sanitize-html';
 import sanitise from 'sanitize-html';
-import { isSkimlink } from '../lib/affiliateLinksUtils';
+import { isSkimlink, SKIMLINK_REL } from '../lib/affiliateLinksUtils';
 import {
 	ArticleDesign,
 	ArticleDisplay,
@@ -291,7 +291,7 @@ const buildElementTree =
 					 * @see https://developers.google.com/search/docs/crawling-indexing/qualify-outbound-links
 					 */
 					rel: isSkimlink(href)
-						? 'sponsored'
+						? SKIMLINK_REL
 						: getAttrs(node)?.getNamedItem('rel')?.value,
 					key,
 					children,

dotcom-rendering/src/lib/affiliateLinksUtils.ts

@@ -1,5 +1,7 @@
 import type { ABParticipations } from '../experiments/lib/beta-ab-tests';
 
+export const SKIMLINK_REL = 'sponsored noreferrer noopener';
+
 /** A function to check if a URL represents an affiliate link */
 export const isSkimlink = (url?: string): boolean => {
 	try {