{"id":4496,"date":"2024-08-08T07:32:35","date_gmt":"2024-08-08T07:32:35","guid":{"rendered":"https:\/\/4eck-media.veronika.psd-tutorials.net\/blog\/identify-links-that-are-hidden-and-or-loaded-via-javascript\/"},"modified":"2025-12-04T22:41:52","modified_gmt":"2025-12-04T22:41:52","slug":"identify-links-that-are-hidden-and-or-loaded-via-javascript","status":"publish","type":"blog","link":"https:\/\/4eck-media.de\/en\/blog\/identify-links-that-are-hidden-and-or-loaded-via-javascript\/","title":{"rendered":"Identify links that are hidden and\/or loaded via JavaScript."},"content":{"rendered":"<?xml encoding=\"UTF-8\"><p>The visibility and accessibility of all links on a webpage is important for SEO performance. Did you know that many links on webpages can be hidden or not directly visible in the initial page rendering? Here is a simple SEO tip that helps you uncover such links and ensure that you don&rsquo;t overlook valuable connections. Why are there unrecognizable links at all?  <\/p><p>Hidden or invisible links may be present on a website for various reasons:<\/p><ul class=\"wp-block-list\">\n<li>Dynamically loaded content: Content that is loaded only through user actions or JavaScript.<\/li>\n\n\n\n<li>Interactive elements: Links embedded in buttons that are triggered by JavaScript events.<\/li>\n\n\n\n<li>Design aspects: Links that are hidden or difficult to identify for design reasons.<\/li>\n<\/ul><p>Such links, which are not loaded via an HREF but are triggered by a JS event, are often not immediately visible and can be easily overlooked. With the following simple script, you can ensure during an SEO audit that all links and buttons on a webpage are highlighted, including those that are dynamically added. <\/p><h2 class=\"wp-block-heading\">Step-by-step guide: Highlighting links on websites<\/h2><p>1. Open the page and access the Developer Tools: Open the desired website in your Chrome browser. Press <code>F12<\/code> or right-click on the page and select &ldquo;Inspect&rdquo; to open the Developer Tools. <\/p><p>2. Select the console area: Click on the &ldquo;Console&rdquo; tab in the developer tools. Here you can execute JavaScript code directly on the webpage. When you make an input, it may be the first time that the browser gives you a warning message and you will first need to confirm that you allow pasting.  <\/p><p>3. Copy and paste the script: Copy the following script and paste it into the lower console area. Then press the Enter key (<code>Enter<\/code>). <\/p><pre class=\"wp-block-code\" tabindex=\"0\" tabindex=\"0\"><code>\/\/ Highlight initial links\ndocument.querySelectorAll('a').forEach(link =&gt; {\n  link.style.backgroundColor = 'yellow';\n  link.dataset.initial = 'true'; \/\/ Mark these as initially present\n});\n\n\/\/ Highlight initial buttons\ndocument.querySelectorAll('button').forEach(button =&gt; {\n  button.style.backgroundColor = 'red';\n  button.dataset.initial = 'true'; \/\/ Mark these as initially present\n});\n\n\/\/ Create a MutationObserver to detect changes in the DOM\nconst observer = new MutationObserver(mutations =&gt; {\n  mutations.forEach(mutation =&gt; {\n    if (mutation.type === 'childList') {\n      mutation.addedNodes.forEach(node =&gt; {\n        if (node.nodeType === 1) { \/\/ Check if it's an element node\n          \/\/ Find any new &lt;a&gt; tags within the added node\n          node.querySelectorAll('a').forEach(link =&gt; {\n            if (!link.dataset.initial) { \/\/ Only highlight if not marked as initial\n              link.style.backgroundColor = 'pink';\n            }\n          });\n\n          \/\/ Find any new &lt;button&gt; tags within the added node\n          node.querySelectorAll('button').forEach(button =&gt; {\n            if (!button.dataset.initial) { \/\/ Only highlight if not marked as initial\n              button.style.backgroundColor = 'red';\n            }\n          });\n        }\n      });\n    }\n  });\n});\n\n\/\/ Start observing the document body for changes\nobserver.observe(document.body, {\n  childList: true,\n  subtree: true\n});<\/code><\/pre><p>4. Observe the result: After you run the script, all links (<code>&lt;a&gt;<\/code> elements) on the webpage will be highlighted in yellow, and all buttons (<code>&lt;button&gt;<\/code> elements) will be marked in red. New links and buttons that are dynamically added will have a pink background (for links) or a red background (for buttons). <\/p><section class=\"custom-theme-block image-full-container theme-image-full-container block-padding-middle\">\n    <div class=\"container\">\n        <div class=\"row\">\n            <div class=\"col-12\">\n                <div class=\"image-wrapper\">\n                    \n<picture itemscope itemtype=\"https:\/\/schema.org\/ImageObject\">\n                        <meta itemprop=\"url\" content=\"https:\/\/4eck-media.de\/wp-content\/uploads\/2025\/11\/verborgene_links_hervorheben_skript_0b13c6211a.avif\">\n                            <meta itemprop=\"width\" content=\"1440\">\n                            <meta itemprop=\"height\" content=\"642\">\n                    \n    <img itemprop=\"contentUrl\" src=\"https:\/\/4eck-media.de\/wp-content\/uploads\/2025\/11\/verborgene_links_hervorheben_skript_0b13c6211a.avif\" srcset=\"https:\/\/4eck-media.de\/wp-content\/uploads\/2025\/11\/verborgene_links_hervorheben_skript_0b13c6211a-2880x1920.avif 2524w, https:\/\/4eck-media.de\/wp-content\/uploads\/2025\/11\/verborgene_links_hervorheben_skript_0b13c6211a-2160x1440.avif 2160w, https:\/\/4eck-media.de\/wp-content\/uploads\/2025\/11\/verborgene_links_hervorheben_skript_0b13c6211a-1440x960.avif 1440w, https:\/\/4eck-media.de\/wp-content\/uploads\/2025\/11\/verborgene_links_hervorheben_skript_0b13c6211a-1080x720.avif 1080w, https:\/\/4eck-media.de\/wp-content\/uploads\/2025\/11\/verborgene_links_hervorheben_skript_0b13c6211a-960x640.avif 960w, https:\/\/4eck-media.de\/wp-content\/uploads\/2025\/11\/verborgene_links_hervorheben_skript_0b13c6211a-720x480.avif 720w, https:\/\/4eck-media.de\/wp-content\/uploads\/2025\/11\/verborgene_links_hervorheben_skript_0b13c6211a-640x428.avif 640w, https:\/\/4eck-media.de\/wp-content\/uploads\/2025\/11\/verborgene_links_hervorheben_skript_0b13c6211a-480x320.avif 480w, https:\/\/4eck-media.de\/wp-content\/uploads\/2025\/11\/verborgene_links_hervorheben_skript_0b13c6211a-320x214.avif 320w\" alt=\"Highlight hidden links script\" title=\"\" width=\"1440\" height=\"642\" loading=\"lazy\" decoding=\"async\" sizes=\"auto, 100vw\">\n<\/picture>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/section><p>If your website already has many yellow or red elements, you can easily adjust the highlight colors in the script to, for example, blue and brown.<\/p><h2 class=\"wp-block-heading\">What exactly is happening there?<\/h2><p>The script initially highlights all existing links and buttons on the page with a background color. It then creates a so-called MutationObserver that continuously monitors changes in the DOM (Document Object Model). When new elements are added, the observer checks whether they contain links or buttons and highlights them accordingly.  <\/p><p>By using this method, you can ensure that no important links are overlooked, regardless of whether they are initially visible or added through user actions or scripts. This simple yet effective technique can help you optimize the usability and SEO performance of your website. <\/p><p>We didn&rsquo;t come up with this script ourselves; we first saw it from <a href=\"https:\/\/www.linkedin.com\/posts\/daniel-foley-assertive_seo-seotip-activity-7222524367090446336-X_yl\/\" rel=\"nofollow noopener\">Daniel Foley Carter in a LinkedIn post<\/a>. The SEO tip is really helpful, which is why we created this blog article about it. Other users found it just as useful and even created a <a href=\"https:\/\/github.com\/alinr\/Chrome-Snippets\/blob\/main\/highlightLinks.js\" rel=\"nofollow noopener\">Chrome extension for link<\/a> highlighting based on it.   <\/p><p>Try it out and see for yourself how many links appear on your websites and which of them are triggered only by JavaScript!<br> <\/p>\n","protected":false},"excerpt":{"rendered":"<p>Many links on websites are hidden or not directly visible in the initial page rendering. With a script, you can make them visible. <\/p>\n","protected":false},"featured_media":3218,"template":"","meta":{"_acf_changed":false,"_yoast_wpseo_focuskw":"","_yoast_wpseo_title":"Highlight links that are hidden or loaded via JavaScript.","_yoast_wpseo_metadesc":"Many links on websites are hidden or not directly visible in the initial page rendering. With a script, you can make them visible.","_yoast_wpseo_meta-robots-noindex":"","_yoast_wpseo_meta-robots-nofollow":"","_yoast_wpseo_canonical":"","_yoast_wpseo_opengraph-title":"","_yoast_wpseo_opengraph-description":"","_yoast_wpseo_opengraph-image":"","_yoast_wpseo_twitter-title":"","_yoast_wpseo_twitter-description":"","_yoast_wpseo_twitter-image":"","_title":"field_competency_title","title":"Links identifizieren, die versteckt sind und\/oder \u00fcber JavaScript geladen werden","_description":"","description":"","_thumbnail":"","thumbnail":"","_image":"","image":"","previewColor":"","_previewColor":"","previewColor2":"","_previewColor2":"","_subtitle":"","subtitle":"","_benefit":"","benefit":"","_color":"","color":"","_titleForGallery":"","titleForGallery":"","_subtitleForGallery":"","subtitleForGallery":"","_imageForGallery":"","imageForGallery":"","_client":"","client":"","_service":"","service":"","_cooperationSince":"","cooperationSince":"","name":"","_name":"","author":"Matthias Petri","_author":"field_blog_author","company":"","_company":"","text":"","_text":"","position":"","_position":"","_yoast_wpseo_metakeywords":""},"blog_category":[],"class_list":["post-4496","blog","type-blog","status-publish","has-post-thumbnail","hentry"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.9 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Highlight links that are hidden or loaded via JavaScript.<\/title>\n<meta name=\"description\" content=\"Many links on websites are hidden or not directly visible in the initial page rendering. With a script, you can make them visible.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/4eck-media.de\/en\/blog\/identify-links-that-are-hidden-and-or-loaded-via-javascript\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Highlight links that are hidden or loaded via JavaScript.\" \/>\n<meta property=\"og:description\" content=\"Many links on websites are hidden or not directly visible in the initial page rendering. With a script, you can make them visible.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/4eck-media.de\/en\/blog\/identify-links-that-are-hidden-and-or-loaded-via-javascript\/\" \/>\n<meta property=\"og:site_name\" content=\"4eck Media\" \/>\n<meta property=\"article:modified_time\" content=\"2025-12-04T22:41:52+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/4eck-media.de\/en\/blog\/identify-links-that-are-hidden-and-or-loaded-via-javascript\/#webpage\",\"headline\":\"Identify links that are hidden and\/or loaded via JavaScript.\",\"description\":\"Many links on websites are hidden or not directly visible in the initial page rendering. With a script, you can make them visible. \",\"url\":\"https:\/\/4eck-media.de\/en\/blog\/identify-links-that-are-hidden-and-or-loaded-via-javascript\/\",\"datePublished\":\"2024-08-08T07:32:35+00:00\",\"dateModified\":\"2025-12-04T22:41:52+00:00\",\"inLanguage\":\"en\",\"thumbnailUrl\":\"https:\/\/4eck-media.de\/wp-content\/uploads\/2025\/10\/links-hervorheben-skript.avif\",\"primaryImageOfPage\":{\"@id\":\"https:\/\/4eck-media.de\/en\/blog\/identify-links-that-are-hidden-and-or-loaded-via-javascript\/#primaryimage\"},\"keywords\":\"\",\"about\":{\"@id\":\"https:\/\/4eck-media.de\/en\/#ProfessionalService\"},\"isPartOf\":{\"@id\":\"https:\/\/4eck-media.de\/en\/#website\"},\"publisher\":{\"@type\":\"Organization\",\"@id\":\"https:\/\/4eck-media.de\/en\/#organization\",\"name\":\"4eck Media\",\"url\":\"https:\/\/4eck-media.de\/en\/\",\"member\":[{\"@type\":\"Person\",\"@id\":\"https:\/\/4eck-media.de\/en\/#member-matthias-petri\/\",\"name\":\"Matthias Petri\",\"givenName\":\"Matthias\",\"familyName\":\"Petri\",\"gender\":\"https:\/\/schema.org\/Male\",\"birthPlace\":{\"@type\":\"Place\",\"address\":{\"@type\":\"PostalAddress\",\"addressCountry\":\"DE\"}}}],\"logo\":{\"@type\":\"ImageObject\",\"url\":\"https:\/\/4eck-media.de\/wp-content\/uploads\/2025\/09\/logo-4eck-media.avif\"},\"contactPoint\":{\"@id\":\"https:\/\/4eck-media.de\/en\/#ContactPoint\"},\"address\":{\"@id\":\"https:\/\/4eck-media.de\/en\/#PostalAddress\"},\"sameAs\":[\"https:\/\/www.facebook.com\/4eckmedia\",\"https:\/\/www.kununu.com\/de\/4eck-media1\/kommentare\",\"https:\/\/www.agenturtipp.de\/agentur\/4eck-media-gmbh-co-kg-seo-design-e\/\",\"https:\/\/www.provenexpert.com\/de-de\/4eck-media-gmbh-co-kg\/\",\"https:\/\/feedbax.de\/anbieter\/4eck-media-gmbh-co-kg\",\"https:\/\/www.sortlist.com\/de\/agency\/4eck-media-gmbh-co-kg-agentur-fur-webdesign-seo\",\"https:\/\/maps.app.goo.gl\/jKvYz1jwPhh31x6H7\",\"https:\/\/www.linkedin.com\/company\/4eck-media\/\",\"https:\/\/www.drweb.de\/beste-agentur-finden\/4eck-media\/\",\"https:\/\/www.youtube.com\/c\/tutkit\"]}},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/4eck-media.de\/en\/blog\/identify-links-that-are-hidden-and-or-loaded-via-javascript\/#primaryimage\",\"url\":\"https:\/\/4eck-media.de\/wp-content\/uploads\/2025\/10\/links-hervorheben-skript.avif\",\"contentUrl\":\"https:\/\/4eck-media.de\/wp-content\/uploads\/2025\/10\/links-hervorheben-skript.avif\",\"width\":1080,\"height\":500,\"caption\":\"Highlighting links on websites\"},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/4eck-media.de\/en\/#website\",\"url\":\"https:\/\/4eck-media.de\/en\/\",\"name\":\"4eck Media\",\"description\":\"Official website of 4eck Media\",\"potentialAction\":{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/4eck-media.de\/en\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"},\"inLanguage\":\"en\",\"publisher\":{\"@id\":\"https:\/\/4eck-media.de\/en\/#ProfessionalService\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Highlight links that are hidden or loaded via JavaScript.","description":"Many links on websites are hidden or not directly visible in the initial page rendering. With a script, you can make them visible.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/4eck-media.de\/en\/blog\/identify-links-that-are-hidden-and-or-loaded-via-javascript\/","og_locale":"en_US","og_type":"article","og_title":"Highlight links that are hidden or loaded via JavaScript.","og_description":"Many links on websites are hidden or not directly visible in the initial page rendering. With a script, you can make them visible.","og_url":"https:\/\/4eck-media.de\/en\/blog\/identify-links-that-are-hidden-and-or-loaded-via-javascript\/","og_site_name":"4eck Media","article_modified_time":"2025-12-04T22:41:52+00:00","twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/4eck-media.de\/en\/blog\/identify-links-that-are-hidden-and-or-loaded-via-javascript\/#webpage","headline":"Identify links that are hidden and\/or loaded via JavaScript.","description":"Many links on websites are hidden or not directly visible in the initial page rendering. With a script, you can make them visible. ","url":"https:\/\/4eck-media.de\/en\/blog\/identify-links-that-are-hidden-and-or-loaded-via-javascript\/","datePublished":"2024-08-08T07:32:35+00:00","dateModified":"2025-12-04T22:41:52+00:00","inLanguage":"en","thumbnailUrl":"https:\/\/4eck-media.de\/wp-content\/uploads\/2025\/10\/links-hervorheben-skript.avif","primaryImageOfPage":{"@id":"https:\/\/4eck-media.de\/en\/blog\/identify-links-that-are-hidden-and-or-loaded-via-javascript\/#primaryimage"},"keywords":"","about":{"@id":"https:\/\/4eck-media.de\/en\/#ProfessionalService"},"isPartOf":{"@id":"https:\/\/4eck-media.de\/en\/#website"},"publisher":{"@type":"Organization","@id":"https:\/\/4eck-media.de\/en\/#organization","name":"4eck Media","url":"https:\/\/4eck-media.de\/en\/","member":[{"@type":"Person","@id":"https:\/\/4eck-media.de\/en\/#member-matthias-petri\/","name":"Matthias Petri","givenName":"Matthias","familyName":"Petri","gender":"https:\/\/schema.org\/Male","birthPlace":{"@type":"Place","address":{"@type":"PostalAddress","addressCountry":"DE"}}}],"logo":{"@type":"ImageObject","url":"https:\/\/4eck-media.de\/wp-content\/uploads\/2025\/09\/logo-4eck-media.avif"},"contactPoint":{"@id":"https:\/\/4eck-media.de\/en\/#ContactPoint"},"address":{"@id":"https:\/\/4eck-media.de\/en\/#PostalAddress"},"sameAs":["https:\/\/www.facebook.com\/4eckmedia","https:\/\/www.kununu.com\/de\/4eck-media1\/kommentare","https:\/\/www.agenturtipp.de\/agentur\/4eck-media-gmbh-co-kg-seo-design-e\/","https:\/\/www.provenexpert.com\/de-de\/4eck-media-gmbh-co-kg\/","https:\/\/feedbax.de\/anbieter\/4eck-media-gmbh-co-kg","https:\/\/www.sortlist.com\/de\/agency\/4eck-media-gmbh-co-kg-agentur-fur-webdesign-seo","https:\/\/maps.app.goo.gl\/jKvYz1jwPhh31x6H7","https:\/\/www.linkedin.com\/company\/4eck-media\/","https:\/\/www.drweb.de\/beste-agentur-finden\/4eck-media\/","https:\/\/www.youtube.com\/c\/tutkit"]}},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/4eck-media.de\/en\/blog\/identify-links-that-are-hidden-and-or-loaded-via-javascript\/#primaryimage","url":"https:\/\/4eck-media.de\/wp-content\/uploads\/2025\/10\/links-hervorheben-skript.avif","contentUrl":"https:\/\/4eck-media.de\/wp-content\/uploads\/2025\/10\/links-hervorheben-skript.avif","width":1080,"height":500,"caption":"Highlighting links on websites"},{"@type":"WebSite","@id":"https:\/\/4eck-media.de\/en\/#website","url":"https:\/\/4eck-media.de\/en\/","name":"4eck Media","description":"Official website of 4eck Media","potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/4eck-media.de\/en\/?s={search_term_string}"},"query-input":"required name=search_term_string"},"inLanguage":"en","publisher":{"@id":"https:\/\/4eck-media.de\/en\/#ProfessionalService"}}]}},"yoast_fields":{"_yoast_wpseo_title":"Highlight links that are hidden or loaded via JavaScript.","_yoast_wpseo_metadesc":"Many links on websites are hidden or not directly visible in the initial page rendering. With a script, you can make them visible."},"block_visibility_meta":[],"_links":{"self":[{"href":"https:\/\/4eck-media.de\/en\/wp-json\/wp\/v2\/blog\/4496","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/4eck-media.de\/en\/wp-json\/wp\/v2\/blog"}],"about":[{"href":"https:\/\/4eck-media.de\/en\/wp-json\/wp\/v2\/types\/blog"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/4eck-media.de\/en\/wp-json\/wp\/v2\/media\/3218"}],"wp:attachment":[{"href":"https:\/\/4eck-media.de\/en\/wp-json\/wp\/v2\/media?parent=4496"}],"wp:term":[{"taxonomy":"blog_category","embeddable":true,"href":"https:\/\/4eck-media.de\/en\/wp-json\/wp\/v2\/blog_category?post=4496"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}