From ba58a694ecdcf49df9772b2888edc30778f75d0d Mon Sep 17 00:00:00 2001 From: ben-ro Date: Mon, 27 Jul 2026 11:28:55 +0200 Subject: [PATCH] Add data-nosnippet to link purpose text spans Visually hidden link purpose text (e.g. "(opens in new window)") was being picked up by search engines and appearing in result snippets, where it reads as noise. Marking the spans with data-nosnippet keeps the text available to assistive technology while excluding it from Google's snippet generation. Issue: https://www.drupal.org/i/3610931 Co-authored-by: ROXBOZ <79715224+ROXBOZ@users.noreply.github.com> --- index.md | 2 +- js/linkpurpose.js | 1 + js/linkpurpose.min.js | 2 +- 3 files changed, 3 insertions(+), 2 deletions(-) diff --git a/index.md b/index.md index 109e366..89fc1e5 100644 --- a/index.md +++ b/index.md @@ -43,7 +43,7 @@ to this: - + (Link is external) diff --git a/js/linkpurpose.js b/js/linkpurpose.js index 3274407..6bea6aa 100644 --- a/js/linkpurpose.js +++ b/js/linkpurpose.js @@ -508,6 +508,7 @@ class LinkPurpose { if (LinkPurpose.options.hiddenTextClass) { iconText.classList.add(LinkPurpose.options.hiddenTextClass); } + iconText.setAttribute('data-nosnippet', ''); iconText.setAttribute('id', `link-purpose-description-${LinkPurpose.unique}`) spanTarget.append(iconText); if (showText) { diff --git a/js/linkpurpose.min.js b/js/linkpurpose.min.js index 309091f..d0a5d84 100644 --- a/js/linkpurpose.min.js +++ b/js/linkpurpose.min.js @@ -1 +1 @@ -class LinkPurpose{constructor(s){LinkPurpose.version="1.0.9";let n=[],p=[];const t={domain:!1,watch:!(LinkPurpose.unique=0),roots:"body",shadowComponents:!1,shadowCSS:!1,hideIcon:"",noIconOnImages:"",suppressNoBreak:!1,insertIconOutsideHiddenSpan:".sr-only, .visually-hidden",ignore:"",noRunIfPresent:!1,noRunIfAbsent:!1,baseSelector:"a[href]",baseLinkClass:"link-purpose",baseIconWrapperClass:"link-purpose-icon",noBreakClass:"link-purpose-nobreak",hiddenTextClass:!1,noReferrer:!1,purposes:{newWindow:{priority:0,selector:'[target="_blank"]',message:"Link opens in new window",linkClass:"link-purpose-window",iconWrapperClass:"link-purpose-window-icon",iconType:"html",iconPosition:"beforeend",iconHTML:'\x3c!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--\x3e',iconClasses:["fa-regular","fa-window-restore"],redundantStrings:/\b(window|tab)\b/i},external:{priority:10,selector:'[href^="https://"], [href^="http://"], [href^="//"]',additionalSelector:!1,newWindow:!1,message:"Link is external",linkClass:"link-purpose-external",iconWrapperClass:"link-purpose-external-icon",iconType:"html",iconPosition:"beforeend",iconHTML:'\x3c!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--\x3e',iconClasses:["fa-solid","fa-up-right-from-square"],redundantStrings:!1},download:{priority:20,selector:"[download]",message:"Link downloads file",linkClass:"link-purpose-download",iconWrapperClass:"link-purpose-download",iconType:"html",iconPosition:"beforeend",iconHTML:'\x3c!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--\x3e',iconClasses:["fa-solid","fa-download"],redundantStrings:/(download)/i},document:{priority:50,selector:"[href$='.pdf'], [href*='.pdf?'], [href$='.doc'], [href$='.docx'], [href*='.doc?'], [href*='.docx?'], [href$='.ppt'], [href$='.pptx'], [href*='.ppt?'], [href*='.pptx?']",message:"Links downloads document",linkClass:"link-purpose-document",iconWrapperClass:"link-purpose-document-icon",iconType:"html",iconPosition:"beforeend",iconHTML:'\x3c!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--\x3e',iconClasses:["fa-regular","fa-file-lines"],redundantStrings:/\b(download|file|document|doc|docx|word|excel|xls|xlsx|powerpoint|pptx|ppt)\b/i},app:{priority:90,selector:':is([href*="://"]):not([href^="/"], [href^="https:"], [href^="http:"], [href^="file:"])',additionalSelector:!1,newWindow:!1,message:"Link opens app",linkClass:"link-purpose-app",iconWrapperClass:"link-purpose-app-icon",iconType:"html",iconPosition:"beforeend",iconHTML:'\x3c!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--\x3e',iconClasses:["fa-solid","fa-window-restore"],redundantStrings:!1},mail:{priority:100,selector:'[href^="mailto:"]',message:"Link opens email app",linkClass:"link-purpose-mailto",iconWrapperClass:"link-purpose-mail-icon",iconType:"html",iconPosition:"beforeend",iconHTML:'\x3c!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--\x3e',iconClasses:["fa-regular","fa-envelope"],redundantStrings:/@|mail/i},tel:{priority:100,selector:'[href^="tel:"]',message:"Link opens phone app",linkClass:"link-purpose-tel",iconWrapperClass:"link-purpose-tel-icon",iconType:"html",iconPosition:"beforeend",iconHTML:'\x3c!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--\x3e',iconClasses:["fa-solid","fa-square-phone"],redundantStrings:!1}}};var e;let i=[];function o(){if(function(){var e=Array.from(document.querySelectorAll(LinkPurpose.options.roots+":not(.link-purpose-root)"));if(e&&(e.forEach(e=>{e.classList.add("link-purpose-root")}),i=i.concat(e)),LinkPurpose.options.shadowComponents){var o=Array.from(document.querySelectorAll(LinkPurpose.options.shadowComponents+":not(.link-purpose-root)"));if(!o)return console.warn("Link Purpose: A specified shadow host has no shadowRoot.");for(let e=0;e{LinkPurpose.run()}:i&&LinkPurpose.options.watch&&i.forEach(e=>{{if("function"!=typeof e.closest){if(e.host.matches(".link-purpose-observer"))return;e.host.classList.add("link-purpose-observer")}else{if(e.closest(".link-purpose-observer"))return;e.classList.add("link-purpose-observer")}const s=((o,s)=>{let n=null;return(...e)=>{window.clearTimeout(n),n=window.setTimeout(()=>{o.apply(null,e)},s)}})(()=>{LinkPurpose.run()},500);new MutationObserver(e=>{for(const o of e)"childList"===o.type&&o.addedNodes.length&&s()}).observe(e,{childList:!0,subtree:!0})}}),i.forEach(e=>{n=n.concat(Array.from(e.querySelectorAll(o)))})}}const d=document.createElement("span"),h=(d.classList.add("link-purpose-spacer"),d.textContent=" ",/\s*\S+\s*$/g),k=/^\s+/g,f=/\s+$/g;LinkPurpose.run=()=>{o(),p=[],n&&n.forEach(e=>{var o,s,n,t,i=[];let r=!1;for([o,s]of Object.entries(LinkPurpose.options.purposes))s.selector&&(e.matches(s.selector)||s.additionalSelector&&e.matches(s.additionalSelector))&&("newWindow"===o?r=!0:0===i.length?i.push({type:o,noReferrer:"external"===o&&LinkPurpose.options.noReferrer,suppressNoBreak:LinkPurpose.options.suppressNoBreak&&e.matches(LinkPurpose.options.suppressNoBreak)}):s.priority>LinkPurpose.options.purposes[i[0].type].priority&&(i[0]={type:o,noReferrer:"external"===o&&LinkPurpose.options.noReferrer}));r&&i.push({type:"newWindow",noReferrer:!1}),0!==i.length&&(n=!(LinkPurpose.options.hideIcon&&e.matches(LinkPurpose.options.hideIcon)),t={link:e,hits:i,showIcon:n},n&&e.parentElement&&(t.fontSize=parseInt(window.getComputedStyle(e).fontSize),t.originalWidth=e.parentElement.getBoundingClientRect().width),p.push(t))}),p&&(p.forEach(u=>{u.hits.forEach((e,n)=>{LinkPurpose.unique++;var o=!(LinkPurpose.options.purposes[e.type].redundantStrings&&0{u.breakPreventer.append(e)}),a?(o.textContent="",o.parentNode.append(u.breakPreventer)):(o.textContent=n.substring(0,n.length-p[0].length),o.parentNode.append(d.cloneNode(!0),u.breakPreventer)),l&&u.link.insertAdjacentText("beforebegin"," "),0{e.textContent=""})),e&&u.link.insertAdjacentText("afterend"," "),0{u.link.append(e.cloneNode(!0)),e.remove()}),s=u.breakPreventer}}}const c=document.createElement("span");c.classList.add(LinkPurpose.options.baseIconWrapperClass,LinkPurpose.options.purposes[e.type].iconWrapperClass),c.setAttribute("aria-hidden","true"),c.setAttribute("title",LinkPurpose.options.purposes[e.type].message),"html"===LinkPurpose.options.purposes[e.type].iconType?c.innerHTML=LinkPurpose.options.purposes[e.type].iconHTML:"classes"===LinkPurpose.options.purposes[e.type].iconType&&LinkPurpose.options.purposes[e.type].iconClasses.forEach(e=>{c.classList.add(e)}),s.insertAdjacentElement(LinkPurpose.options.purposes[e.type].iconPosition,c)}else u.link.classList.add(LinkPurpose.options.baseLinkClass);a=document.createElement("span");a.classList.add("link-purpose-text"),LinkPurpose.options.hiddenTextClass&&a.classList.add(LinkPurpose.options.hiddenTextClass),a.setAttribute("id","link-purpose-description-"+LinkPurpose.unique),s.append(a),o&&(u.link.hasAttribute("aria-describedby")?(u.link.setAttribute("aria-describedby",u.link.getAttribute("aria-describedby")+" link-purpose-description-"+LinkPurpose.unique),a.textContent=" "+LinkPurpose.options.purposes[e.type].message):u.link.hasAttribute("aria-description")?(u.link.setAttribute("aria-describedby","link-purpose-description-"+LinkPurpose.unique),a.textContent=u.link.getAttribute("aria-description")+", "+LinkPurpose.options.purposes[e.type].message):(u.link.setAttribute("aria-describedby","link-purpose-description-"+LinkPurpose.unique),a.textContent=" "+LinkPurpose.options.purposes[e.type].message))}else o&&((n=u.link.querySelector(".link-purpose-text")).textContent=n.textContent?` ${n.textContent}, `+LinkPurpose.options.purposes[e.type].message:""+LinkPurpose.options.purposes[e.type].message);LinkPurpose.options.purposes[e.type].newWindow&&u.link.setAttribute("target","_blank")})}),p.forEach(e=>{e.originalWidth&&e.fontSize&&e.breakPreventer&&e.lastWordLength&&8(e.originalWidth+e.fontSize)/e.fontSize&&e.breakPreventer.classList.remove(LinkPurpose.options.noBreakClass)}))},e=()=>{if(LinkPurpose.options={...t,...s},"object"==typeof s&&"purposes"in s)for(const o in t.purposes)o in s.purposes?(LinkPurpose.options.purposes[o]={...t.purposes[o],...s.purposes[o]},o in LinkPurpose.options.purposes&&!("priority"in LinkPurpose.options.purposes[o])&&(LinkPurpose.options.purposes[o].priority=50)):LinkPurpose.options.purposes[o]=t.purposes[o];if(LinkPurpose.ignore=LinkPurpose.options.ignore?`:not(${LinkPurpose.options.ignore}, .${LinkPurpose.options.baseLinkClass})`:`:not(.${LinkPurpose.options.baseLinkClass})`,LinkPurpose.options.purposes.external.selector&&LinkPurpose.options.domain){var e=LinkPurpose.options.domain.split(",");let s="";e.forEach((e,o)=>{e=e.trim(),0{e()}:e()}} \ No newline at end of file +class LinkPurpose{constructor(o){LinkPurpose.version="1.0.9";let s=[],p=[],t={domain:!1,watch:!(LinkPurpose.unique=0),roots:"body",shadowComponents:!1,shadowCSS:!1,hideIcon:"",noIconOnImages:"",suppressNoBreak:!1,insertIconOutsideHiddenSpan:".sr-only, .visually-hidden",ignore:"",noRunIfPresent:!1,noRunIfAbsent:!1,baseSelector:"a[href]",baseLinkClass:"link-purpose",baseIconWrapperClass:"link-purpose-icon",noBreakClass:"link-purpose-nobreak",hiddenTextClass:!1,noReferrer:!1,purposes:{newWindow:{priority:0,selector:'[target="_blank"]',message:"Link opens in new window",linkClass:"link-purpose-window",iconWrapperClass:"link-purpose-window-icon",iconType:"html",iconPosition:"beforeend",iconHTML:'\x3c!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--\x3e',iconClasses:["fa-regular","fa-window-restore"],redundantStrings:/\b(window|tab)\b/i},external:{priority:10,selector:'[href^="https://"], [href^="http://"], [href^="//"]',additionalSelector:!1,newWindow:!1,message:"Link is external",linkClass:"link-purpose-external",iconWrapperClass:"link-purpose-external-icon",iconType:"html",iconPosition:"beforeend",iconHTML:'\x3c!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--\x3e',iconClasses:["fa-solid","fa-up-right-from-square"],redundantStrings:!1},download:{priority:20,selector:"[download]",message:"Link downloads file",linkClass:"link-purpose-download",iconWrapperClass:"link-purpose-download",iconType:"html",iconPosition:"beforeend",iconHTML:'\x3c!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--\x3e',iconClasses:["fa-solid","fa-download"],redundantStrings:/(download)/i},document:{priority:50,selector:"[href$='.pdf'], [href*='.pdf?'], [href$='.doc'], [href$='.docx'], [href*='.doc?'], [href*='.docx?'], [href$='.ppt'], [href$='.pptx'], [href*='.ppt?'], [href*='.pptx?']",message:"Links downloads document",linkClass:"link-purpose-document",iconWrapperClass:"link-purpose-document-icon",iconType:"html",iconPosition:"beforeend",iconHTML:'\x3c!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--\x3e',iconClasses:["fa-regular","fa-file-lines"],redundantStrings:/\b(download|file|document|doc|docx|word|excel|xls|xlsx|powerpoint|pptx|ppt)\b/i},app:{priority:90,selector:':is([href*="://"]):not([href^="/"], [href^="https:"], [href^="http:"], [href^="file:"])',additionalSelector:!1,newWindow:!1,message:"Link opens app",linkClass:"link-purpose-app",iconWrapperClass:"link-purpose-app-icon",iconType:"html",iconPosition:"beforeend",iconHTML:'\x3c!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--\x3e',iconClasses:["fa-solid","fa-window-restore"],redundantStrings:!1},mail:{priority:100,selector:'[href^="mailto:"]',message:"Link opens email app",linkClass:"link-purpose-mailto",iconWrapperClass:"link-purpose-mail-icon",iconType:"html",iconPosition:"beforeend",iconHTML:'\x3c!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--\x3e',iconClasses:["fa-regular","fa-envelope"],redundantStrings:/@|mail/i},tel:{priority:100,selector:'[href^="tel:"]',message:"Link opens phone app",linkClass:"link-purpose-tel",iconWrapperClass:"link-purpose-tel-icon",iconType:"html",iconPosition:"beforeend",iconHTML:'\x3c!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--\x3e',iconClasses:["fa-solid","fa-square-phone"],redundantStrings:!1}}};var e;function n(){if((()=>{var e=Array.from(document.querySelectorAll(LinkPurpose.options.roots+":not(.link-purpose-root)"));if(e&&(e.forEach(e=>{e.classList.add("link-purpose-root")}),i=i.concat(e)),LinkPurpose.options.shadowComponents){var o=Array.from(document.querySelectorAll(LinkPurpose.options.shadowComponents+":not(.link-purpose-root)"));if(!o)return console.warn("Link Purpose: A specified shadow host has no shadowRoot.");for(let e=0;e{LinkPurpose.run()}:i&&LinkPurpose.options.watch&&i.forEach(e=>{{if("function"!=typeof e.closest){if(e.host.matches(".link-purpose-observer"))return;e.host.classList.add("link-purpose-observer")}else{if(e.closest(".link-purpose-observer"))return;e.classList.add("link-purpose-observer")}let s=((o,s)=>{let n=null;return(...e)=>{window.clearTimeout(n),n=window.setTimeout(()=>{o.apply(null,e)},s)}})(()=>{LinkPurpose.run()},500);new MutationObserver(e=>{for(var o of e)"childList"===o.type&&o.addedNodes.length&&s()}).observe(e,{childList:!0,subtree:!0})}}),i.forEach(e=>{s=s.concat(Array.from(e.querySelectorAll(o)))})}}let i=[],u=document.createElement("span"),d=(u.classList.add("link-purpose-spacer"),u.textContent=" ",/\s*\S+\s*$/g),h=/^\s+/g,k=/\s+$/g;LinkPurpose.run=()=>{n(),p=[],s&&s.forEach(e=>{var o,s,n,t,i=[];let r=!1;for([o,s]of Object.entries(LinkPurpose.options.purposes))s.selector&&(e.matches(s.selector)||s.additionalSelector&&e.matches(s.additionalSelector))&&("newWindow"===o?r=!0:0===i.length?i.push({type:o,noReferrer:"external"===o&&LinkPurpose.options.noReferrer,suppressNoBreak:LinkPurpose.options.suppressNoBreak&&e.matches(LinkPurpose.options.suppressNoBreak)}):s.priority>LinkPurpose.options.purposes[i[0].type].priority&&(i[0]={type:o,noReferrer:"external"===o&&LinkPurpose.options.noReferrer}));r&&i.push({type:"newWindow",noReferrer:!1}),0!==i.length&&(n=!(LinkPurpose.options.hideIcon&&e.matches(LinkPurpose.options.hideIcon)),t={link:e,hits:i,showIcon:n},n&&e.parentElement&&(t.fontSize=parseInt(window.getComputedStyle(e).fontSize),t.originalWidth=e.parentElement.getBoundingClientRect().width),p.push(t))}),p&&(p.forEach(c=>{c.hits.forEach((e,n)=>{LinkPurpose.unique++;var o=!(LinkPurpose.options.purposes[e.type].redundantStrings&&0{c.breakPreventer.append(e)}),a?(o.textContent="",o.parentNode.append(c.breakPreventer)):(o.textContent=n.substring(0,n.length-p[0].length),o.parentNode.append(u.cloneNode(!0),c.breakPreventer)),l&&c.link.insertAdjacentText("beforebegin"," "),0{e.textContent=""})),e&&c.link.insertAdjacentText("afterend"," "),0{c.link.append(e.cloneNode(!0)),e.remove()}),s=c.breakPreventer}}}let o=document.createElement("span");o.classList.add(LinkPurpose.options.baseIconWrapperClass,LinkPurpose.options.purposes[e.type].iconWrapperClass),o.setAttribute("aria-hidden","true"),o.setAttribute("title",LinkPurpose.options.purposes[e.type].message),"html"===LinkPurpose.options.purposes[e.type].iconType?o.innerHTML=LinkPurpose.options.purposes[e.type].iconHTML:"classes"===LinkPurpose.options.purposes[e.type].iconType&&LinkPurpose.options.purposes[e.type].iconClasses.forEach(e=>{o.classList.add(e)}),s.insertAdjacentElement(LinkPurpose.options.purposes[e.type].iconPosition,o)}else c.link.classList.add(LinkPurpose.options.baseLinkClass);a=document.createElement("span");a.classList.add("link-purpose-text"),LinkPurpose.options.hiddenTextClass&&a.classList.add(LinkPurpose.options.hiddenTextClass),a.setAttribute("data-nosnippet",""),a.setAttribute("id","link-purpose-description-"+LinkPurpose.unique),s.append(a),o&&(c.link.hasAttribute("aria-describedby")?(c.link.setAttribute("aria-describedby",c.link.getAttribute("aria-describedby")+" link-purpose-description-"+LinkPurpose.unique),a.textContent=" "+LinkPurpose.options.purposes[e.type].message):c.link.hasAttribute("aria-description")?(c.link.setAttribute("aria-describedby","link-purpose-description-"+LinkPurpose.unique),a.textContent=c.link.getAttribute("aria-description")+", "+LinkPurpose.options.purposes[e.type].message):(c.link.setAttribute("aria-describedby","link-purpose-description-"+LinkPurpose.unique),a.textContent=" "+LinkPurpose.options.purposes[e.type].message))}else o&&((n=c.link.querySelector(".link-purpose-text")).textContent=n.textContent?` ${n.textContent}, `+LinkPurpose.options.purposes[e.type].message:""+LinkPurpose.options.purposes[e.type].message);LinkPurpose.options.purposes[e.type].newWindow&&c.link.setAttribute("target","_blank")})}),p.forEach(e=>{e.originalWidth&&e.fontSize&&e.breakPreventer&&e.lastWordLength&&8(e.originalWidth+e.fontSize)/e.fontSize&&e.breakPreventer.classList.remove(LinkPurpose.options.noBreakClass)}))},e=()=>{if(LinkPurpose.options={...t,...o},"object"==typeof o&&"purposes"in o)for(var e in t.purposes)e in o.purposes?(LinkPurpose.options.purposes[e]={...t.purposes[e],...o.purposes[e]},e in LinkPurpose.options.purposes&&!("priority"in LinkPurpose.options.purposes[e])&&(LinkPurpose.options.purposes[e].priority=50)):LinkPurpose.options.purposes[e]=t.purposes[e];if(LinkPurpose.ignore=LinkPurpose.options.ignore?`:not(${LinkPurpose.options.ignore}, .${LinkPurpose.options.baseLinkClass})`:`:not(.${LinkPurpose.options.baseLinkClass})`,LinkPurpose.options.purposes.external.selector&&LinkPurpose.options.domain){var n=LinkPurpose.options.domain.split(",");let s="";n.forEach((e,o)=>{e=e.trim(),0{e()}:e()}} \ No newline at end of file