Meta tags checker

5 of 1 ratings

Every webpage on the internet has two audiences: the human visitors who see the content, and the search engine robots that analyze it "behind the scenes." Meta Tags are the crucial, invisible pieces of information you provide for those robots. They tell search engines and social media platforms what your page is about and how to display it in their results. Our Meta Tags Checker is an essential SEO tool that allows you to instantly pull back the curtain and analyze these critical tags for any URL.

This is a must-have utility for SEO professionals, digital marketers, and website owners. Use it to audit your own pages, analyze your competitors, and ensure your website is putting its best foot forward on Google and social media.

What Are Meta Tags?

Meta tags are snippets of text that live in the section of a webpage's HTML code. They are not visible on the page itself, but they provide structured metadata about its content. Our tool analyzes the most important tags for modern SEO and marketing.

The Most Important Tags We Analyze:

Title Tag (</code>):</strong> While technically not a "meta" tag, the title tag is the single most important on-page SEO element. It defines the title of your page that appears in browser tabs and, most importantly, as the main blue headline in Google search results. Optimal length is <strong>50-60 characters</strong>. </li> <li> <strong>Meta Description (<code><meta name="description" ...></code>):</strong> This is the short snippet of text (usually 1-2 sentences) that appears below your title in search results. Its job is to be compelling "ad copy" that entices users to click on your link. Optimal length is <strong>150-160 characters</strong>. </li> <li> <strong>Meta Robots (<code><meta name="robots" ...></code>):</strong> This tag gives direct instructions to search engine crawlers. The most common values are <code>index, follow</code> (telling Google to index the page and follow its links) or <code>noindex, nofollow</code> (telling it to ignore the page and its links). </li> <li> <strong>Open Graph Tags (<code><meta property="og:..." ...></code>):</strong> These are meta tags created by Facebook that have become the standard for social media. They control how a link preview appears when your page is shared on platforms like Facebook, LinkedIn, Twitter, etc. The most important are <code>og:title</code>, <code>og:description</code>, and especially <code>og:image</code>. </li> </ul> <hr> <h2>Practical Uses: Who Needs to Check Meta Tags?</h2> <p>Regularly checking and optimizing your meta tags is a fundamental part of managing a successful website.</p> <h3>For On-Page SEO Audits 📈</h3> <p>This is the primary use case. You can instantly analyze your own product pages, blog posts, or homepage to answer critical questions:</p> <ul> <li>Does this page have a unique Title and Meta Description?</li> <li>Are they the optimal length, or are they being cut off in search results?</li> <li>Do they contain my target keywords?</li> <li>Is a <code>noindex</code> tag accidentally blocking this page from Google?</li> </ul> <h3>For In-Depth Competitor Analysis 🔬</h3> <p>Want to know how your top competitors are ranking for a specific keyword? Enter their URL into our tool. You can see the exact Title and Meta Description they are using. This allows you to analyze their keyword strategy and the persuasive language they use to attract clicks, giving you valuable insights to improve your own.</p> <h3>To Optimize for Social Media Sharing 📱</h3> <p>Have you ever shared a link on Facebook and an ugly, irrelevant image appeared? That's because the Open Graph tags were missing or incorrect. Use our tool to check your pages before you share them. Verify that you have a compelling <code>og:title</code>, <code>og:description</code>, and a high-quality <code>og:image</code> specified to ensure your links look great and maximize engagement on social platforms.</p> <hr> <h2>Frequently Asked Questions (FAQ) about Meta Tags</h2> <h3>Does the meta description affect my search ranking?</h3> <p>Not directly. Google has stated that the meta description is not a direct ranking factor. However, a well-written, compelling meta description will dramatically increase your <strong>Click-Through Rate (CTR)</strong> from the search results. A high CTR *is* a strong positive signal to Google that your page is a good result for that query, which can indirectly improve your rankings over time.</p> <h3>Should I still use the Meta Keywords tag?</h3> <p><strong>No.</strong> The meta keywords tag is completely obsolete. Google and other major search engines have publicly stated that they have <strong>ignored this tag for over a decade</strong>. Filling it out provides zero SEO benefit and only serves to show your competitors your keyword list.</p> </div> </div> <div class="mt-5"> <h2 class="small font-weight-bold text-uppercase text-muted mb-3"><i class="fas fa-fw fa-sm fa-share-alt text-primary mr-1"></i> Share</h2> <div class="card"> <div class="card-body"> <div class="d-flex align-items-center justify-content-between flex-wrap gap-3"> <button type="button" class="btn btn-gray-100 rounded-2x" style="color: #808080; background-color: rgba(128, 128, 128, 0.1);" data-toggle="tooltip" title="Copy to clipboard" onclick="navigator.clipboard.writeText('https://biolink.page/tools/meta-tags-checker')" data-tooltip-hide-on-click> <i class="fas fa-fw fa-sm fa-copy"></i> </button> <button type="button" class="btn btn-gray-100 rounded-2x d-none" style="color: #3a18f2; background-color: rgba(58, 24, 242, 0.1);" data-toggle="tooltip" title="Share via Device" data-native-share> <i class="fas fa-fw fa-share"></i> </button> <a href="mailto:?body=https://biolink.page/tools/meta-tags-checker" target="_blank" class="btn btn-gray-100 rounded-2x" style="color: #3b5998; background-color: rgba(59, 89, 152, 0.1);" data-toggle="tooltip" title="Share via Email"> <i class="fas fa-fw fa-envelope"></i> </a> <button type="button" class="btn btn-gray-100 rounded-2x" style="color: #808080; background-color: rgba(128, 128, 128, 0.1);" data-toggle="tooltip" title="Print" onclick="window.print();return false;" data-tooltip-hide-on-click> <i class="fas fa-fw fa-sm fa-print"></i> </button> <a href="https://www.facebook.com/sharer/sharer.php?u=https://biolink.page/tools/meta-tags-checker" target="_blank" class="btn btn-gray-100 rounded-2x" style="color: #1877F2; background-color: rgba(24, 119, 242, 0.1);" data-toggle="tooltip" title="Share via Facebook"> <i class="fab fa-fw fa-facebook"></i> </a> <a href="https://www.threads.net/intent/post?text=https://biolink.page/tools/meta-tags-checker" target="_blank" class="btn btn-gray-100 rounded-2x" style="color: #808080; background-color: rgba(128, 128, 128, 0.1);" data-toggle="tooltip" title="Share via Threads"> <i class="fab fa-fw fa-threads"></i> </a> <a href="https://x.com/share?url=https://biolink.page/tools/meta-tags-checker" target="_blank" class="btn btn-gray-100 rounded-2x" style="color: #1DA1F2; background-color: rgba(29, 161, 242, 0.1);" data-toggle="tooltip" title="Share via X"> <i class="fab fa-fw fa-twitter"></i> </a> <a href="https://pinterest.com/pin/create/link/?url=https://biolink.page/tools/meta-tags-checker" target="_blank" class="btn btn-gray-100 rounded-2x" style="color: #E60023; background-color: rgba(230, 0, 35, 0.1);" data-toggle="tooltip" title="Share via Pinterest"> <i class="fab fa-fw fa-pinterest"></i> </a> <a href="https://linkedin.com/shareArticle?url=https://biolink.page/tools/meta-tags-checker" target="_blank" class="btn btn-gray-100 rounded-2x" style="color: #0077B5; background-color: rgba(0, 119, 181, 0.1);" data-toggle="tooltip" title="Share via LinkedIn"> <i class="fab fa-fw fa-linkedin"></i> </a> <a href="https://www.reddit.com/submit?url=https://biolink.page/tools/meta-tags-checker" target="_blank" class="btn btn-gray-100 rounded-2x" style="color: #FF4500; background-color: rgba(255, 69, 0, 0.1);" data-toggle="tooltip" title="Share via Reddit"> <i class="fab fa-fw fa-reddit"></i> </a> <a href="https://wa.me/?text=https://biolink.page/tools/meta-tags-checker" class="btn btn-gray-100 rounded-2x" style="color: #25D366; background-color: rgba(37, 211, 102, 0.1);" data-toggle="tooltip" title="Share via Whatsapp"> <i class="fab fa-fw fa-whatsapp"></i> </a> <a href="https://t.me/share/url?url=https://biolink.page/tools/meta-tags-checker" class="btn btn-gray-100 rounded-2x" style="color: #0088cc; background-color: rgba(0, 136, 204, 0.1);" data-toggle="tooltip" title="Share via Telegram"> <i class="fab fa-fw fa-telegram"></i> </a> <a href="https://www.snapchat.com/scan?attachmentUrl=https://biolink.page/tools/meta-tags-checker" class="btn btn-gray-100 rounded-2x" style="color: #FFB700; background-color: rgba(255, 183, 0, 0.1);" data-toggle="tooltip" title="Share via Snapchat"> <i class="fab fa-fw fa-snapchat"></i> </a> <a href="https://teams.microsoft.com/share?href=https%3A%2F%2Fbiolink.page%2Ftools%2Fmeta-tags-checker" target="_blank" class="btn btn-gray-100 rounded-2x" style="color: #464EB8; background-color: rgba(70, 78, 184, 0.1);" data-toggle="tooltip" title="Share via Microsoft Teams"> <i class="fab fa-fw fa-microsoft"></i> </a> </div> </div> </div> </div> <div class="mt-5"> <h2 class="small font-weight-bold text-uppercase text-muted mb-3"><i class="fas fa-fw fa-sm fa-star text-primary mr-1"></i> Popular tools</h2> <div class="row m-n3" id="popular_tools"> <div class="col-12 col-md-6 col-lg-4 p-3 position-relative" data-tool-id="ip_lookup" data-tool-name="IP Lookup" data-tool-category=""> <div class="card d-flex flex-column h-100 overflow-hidden"> <div class="card-body text-truncate"> <div class="bg-primary-100 d-flex align-items-center justify-content-center rounded tool-icon mb-2"> <i class="fas fa-search-location fa-fw text-primary-600"></i> </div> <a href="https://biolink.page/tools/ip-lookup" class="stretched-link text-decoration-none text-dark"> <strong>IP Lookup</strong> </a> <p class="text-truncate text-muted small m-0">Get approximate IP details.</p> <div class="mt-3 row"> <div class="col px-3"> <div class="badge badge-gray-100 w-100" data-toggle="tooltip" title="Total views"> <i class="fas fa-fw fa-sm fa-eye mr-1"></i> 16 </div> </div> <div class="col px-3"> <div class="badge badge-gray-100 w-100" data-toggle="tooltip" title="tools.total_submissions"> <i class="fas fa-fw fa-sm fa-check mr-1"></i> 1 </div> </div> </div> </div> </div> </div> <div class="col-12 col-md-6 col-lg-4 p-3 position-relative" data-tool-id="dns_lookup" data-tool-name="DNS Lookup" data-tool-category=""> <div class="card d-flex flex-column h-100 overflow-hidden"> <div class="card-body text-truncate"> <div class="bg-primary-100 d-flex align-items-center justify-content-center rounded tool-icon mb-2"> <i class="fas fa-network-wired fa-fw text-primary-600"></i> </div> <a href="https://biolink.page/tools/dns-lookup" class="stretched-link text-decoration-none text-dark"> <strong>DNS Lookup</strong> </a> <p class="text-truncate text-muted small m-0">Find A, AAAA, CNAME, MX, NS, TXT, SOA DNS records of a host.</p> <div class="mt-3 row"> <div class="col px-3"> <div class="badge badge-gray-100 w-100" data-toggle="tooltip" title="Total views"> <i class="fas fa-fw fa-sm fa-eye mr-1"></i> 15 </div> </div> <div class="col px-3"> <div class="badge badge-gray-100 w-100" data-toggle="tooltip" title="tools.total_submissions"> <i class="fas fa-fw fa-sm fa-check mr-1"></i> 0 </div> </div> </div> </div> </div> </div> <div class="col-12 col-md-6 col-lg-4 p-3 position-relative" data-tool-id="whatsapp_link_generator" data-tool-name="WhatsApp link generator" data-tool-category=""> <div class="card d-flex flex-column h-100 overflow-hidden"> <div class="card-body text-truncate"> <div class="bg-primary-100 d-flex align-items-center justify-content-center rounded tool-icon mb-2"> <i class="fab fa-whatsapp fa-fw text-primary-600"></i> </div> <a href="https://biolink.page/tools/whatsapp-link-generator" class="stretched-link text-decoration-none text-dark"> <strong>WhatsApp link generator</strong> </a> <p class="text-truncate text-muted small m-0">Generate whatsapp message links with ease.</p> <div class="mt-3 row"> <div class="col px-3"> <div class="badge badge-gray-100 w-100" data-toggle="tooltip" title="Total views"> <i class="fas fa-fw fa-sm fa-eye mr-1"></i> 12 </div> </div> <div class="col px-3"> <div class="badge badge-gray-100 w-100" data-toggle="tooltip" title="tools.total_submissions"> <i class="fas fa-fw fa-sm fa-check mr-1"></i> 0 </div> </div> </div> </div> </div> </div> <div class="col-12 col-md-6 col-lg-4 p-3 position-relative" data-tool-id="reverse_ip_lookup" data-tool-name="Reverse IP Lookup" data-tool-category=""> <div class="card d-flex flex-column h-100 overflow-hidden"> <div class="card-body text-truncate"> <div class="bg-primary-100 d-flex align-items-center justify-content-center rounded tool-icon mb-2"> <i class="fas fa-book fa-fw text-primary-600"></i> </div> <a href="https://biolink.page/tools/reverse-ip-lookup" class="stretched-link text-decoration-none text-dark"> <strong>Reverse IP Lookup</strong> </a> <p class="text-truncate text-muted small m-0">Take an IP and try to look for the domain/host associated with it.</p> <div class="mt-3 row"> <div class="col px-3"> <div class="badge badge-gray-100 w-100" data-toggle="tooltip" title="Total views"> <i class="fas fa-fw fa-sm fa-eye mr-1"></i> 12 </div> </div> <div class="col px-3"> <div class="badge badge-gray-100 w-100" data-toggle="tooltip" title="tools.total_submissions"> <i class="fas fa-fw fa-sm fa-check mr-1"></i> 0 </div> </div> </div> </div> </div> </div> <div class="col-12 col-md-6 col-lg-4 p-3 position-relative" data-tool-id="ping" data-tool-name="Ping" data-tool-category=""> <div class="card d-flex flex-column h-100 overflow-hidden"> <div class="card-body text-truncate"> <div class="bg-primary-100 d-flex align-items-center justify-content-center rounded tool-icon mb-2"> <i class="fas fa-server fa-fw text-primary-600"></i> </div> <a href="https://biolink.page/tools/ping" class="stretched-link text-decoration-none text-dark"> <strong>Ping</strong> </a> <p class="text-truncate text-muted small m-0">Ping a website, server or port.</p> <div class="mt-3 row"> <div class="col px-3"> <div class="badge badge-gray-100 w-100" data-toggle="tooltip" title="Total views"> <i class="fas fa-fw fa-sm fa-eye mr-1"></i> 11 </div> </div> <div class="col px-3"> <div class="badge badge-gray-100 w-100" data-toggle="tooltip" title="tools.total_submissions"> <i class="fas fa-fw fa-sm fa-check mr-1"></i> 0 </div> </div> </div> </div> </div> </div> <div class="col-12 col-md-6 col-lg-4 p-3 position-relative" data-tool-id="http_headers_lookup" data-tool-name="HTTP headers lookup" data-tool-category=""> <div class="card d-flex flex-column h-100 overflow-hidden"> <div class="card-body text-truncate"> <div class="bg-primary-100 d-flex align-items-center justify-content-center rounded tool-icon mb-2"> <i class="fas fa-asterisk fa-fw text-primary-600"></i> </div> <a href="https://biolink.page/tools/http-headers-lookup" class="stretched-link text-decoration-none text-dark"> <strong>HTTP headers lookup</strong> </a> <p class="text-truncate text-muted small m-0">Get all the HTTP headers that an URL returns for a typical GET request.</p> <div class="mt-3 row"> <div class="col px-3"> <div class="badge badge-gray-100 w-100" data-toggle="tooltip" title="Total views"> <i class="fas fa-fw fa-sm fa-eye mr-1"></i> 11 </div> </div> <div class="col px-3"> <div class="badge badge-gray-100 w-100" data-toggle="tooltip" title="tools.total_submissions"> <i class="fas fa-fw fa-sm fa-check mr-1"></i> 0 </div> </div> </div> </div> </div> </div> </div> </div> </div> </main> <div class="container d-print-none"> <footer class="footer app-footer"> <div class="d-flex flex-column flex-lg-row justify-content-between mb-3"> <div class="mb-3 mb-lg-0"> <a class="h5 footer-heading" href="https://biolink.page/" data-logo data-light-value="https://biolink.page/uploads/main/d6cec6a6ee6f60f7041c275ad2b522ff.png" data-light-class="mb-2 footer-logo" data-light-tag="img" data-dark-value="https://biolink.page/uploads/main/e96b3501fc986047e1dab623e144fd5d.png" data-dark-class="mb-2 footer-logo" data-dark-tag="img" > <img src="https://biolink.page/uploads/main/d6cec6a6ee6f60f7041c275ad2b522ff.png" class="mb-2 footer-logo" alt="Website logo" /> </a> <div class="text-muted">Copyright © 2025 Bio Link Page.</div> </div> <div class="d-flex flex-row flex-truncate"> <div class="mr-3 ml-lg-3 mr-lg-0"> <button type="button" id="switch_theme_style" class="btn btn-link text-decoration-none p-0" data-toggle="tooltip" title="Switch to Dark (CMD/CTRL + I)" aria-label="Switch to Dark (CMD/CTRL + I)" data-title-theme-style-light="Switch to Light (CMD/CTRL + I)" data-title-theme-style-dark="Switch to Dark (CMD/CTRL + I)"> <span data-theme-style="light" class=""><i class="fas fa-fw fa-sm fa-sun text-warning"></i></span> <span data-theme-style="dark" class="d-none"><i class="fas fa-fw fa-sm fa-moon"></i></span> </button> </div> </div> </div> <div class="row"> <div class="col-12 col-lg mb-3 mb-lg-0"> <ul class="list-style-none d-flex flex-column flex-lg-row flex-wrap m-0"> <li class="mb-2 mr-lg-3"><a href="https://biolink.page/blog">Blog</a></li> <li class="mb-2 mr-lg-3"><a href="https://biolink.page/affiliate">Affiliate</a></li> <li class="mb-2 mr-lg-3"> <a href="https://biolink.page/en/page/privacy-policy" target="_self"> <i class="fas fa-circle-info fa-fw fa-sm mr-1"></i> Privacy Notice </a> </li> <li class="mb-2 mr-lg-3"> <a href="https://biolink.page/en/page/terms-conditions" target="_self"> <i class="fas fa-circle-info fa-fw fa-sm mr-1"></i> Terms and Conditions </a> </li> <li class="mb-2 mr-lg-3"> <a href="https://biolink.page/en/page/cookie-notice" target="_self"> <i class="fa-solid fa-cookie fa-fw fa-sm mr-1"></i> Cookie Policy </a> </li> <li class="mb-2 mr-lg-3"> <a href="https://biolink.page/en/page/contact-us" target="_self"> <i class="fab fa-whatsapp fa-fw fa-sm mr-1"></i> Contact Us </a> </li> <li class="mb-2 mr-lg-3"> <a href="https://biolink.page/pages/legal" target="_self"> Legal </a> </li> </ul> </div> <div class="col-12 col-lg-auto"> <div class="d-flex flex-wrap"> <a href="https://instagram.com/biolink.page" class="mr-2 mr-lg-0 ml-lg-2 mb-2" target="_blank" rel="noreferrer" data-toggle="tooltip" title="Instagram"> <i class="fab fa-instagram fa-fw fa-lg"></i> </a> <a href="https://wa.me/447927573221" class="mr-2 mr-lg-0 ml-lg-2 mb-2" target="_blank" rel="noreferrer" data-toggle="tooltip" title="WhatsApp"> <i class="fab fa-whatsapp fa-fw fa-lg"></i> </a> <a href="mailto:hi@biolink.page" class="mr-2 mr-lg-0 ml-lg-2 mb-2" target="_blank" rel="noreferrer" data-toggle="tooltip" title="Email"> <i class="fas fa-envelope fa-fw fa-lg"></i> </a> </div> </div> </div> </footer> </div> <input type="hidden" name="global_site_url" value="https://biolink.page/" /> <input type="hidden" name="global_url" value="https://biolink.page/" /> <input type="hidden" name="global_token" value="bedfb0f5c3f5c6f7e712dc6e41cc8adf" /> <input type="hidden" name="global_number_decimal_point" value="." /> <input type="hidden" name="global_number_thousands_separator" value="," /> <script> 'use strict'; /* Some global variables */ window.altum = {}; let global_token = document.querySelector('input[name="global_token"]').value; let site_url = document.querySelector('input[name="global_site_url"]').value; let url = document.querySelector('input[name="global_url"]').value; let decimal_point = document.querySelector('[name="global_number_decimal_point"]').value; let thousands_separator = document.querySelector('[name="global_number_thousands_separator"]').value; </script> <script src="https://biolink.page/themes/altum/assets/js/libraries/jquery.min.js?v=6000"></script> <script src="https://biolink.page/themes/altum/assets/js/libraries/popper.min.js?v=6000"></script> <script src="https://biolink.page/themes/altum/assets/js/libraries/bootstrap.min.js?v=6000"></script> <script src="https://biolink.page/themes/altum/assets/js/custom.js?v=6000"></script> <script src="https://biolink.page/themes/altum/assets/js/libraries/fontawesome.min.js?v=6000" defer></script> <script src="https://biolink.page/themes/altum/assets/js/libraries/fontawesome-solid.min.js?v=6000" defer></script> <script src="https://biolink.page/themes/altum/assets/js/libraries/fontawesome-brands.modified.js?v=6000" defer></script> <script> 'use strict' let current_rating = localStorage.getItem('50f431c63049cc095d1af93294e10d12_meta_tags_checker_rating'); if(current_rating) { document.querySelector(`[data-rating="${current_rating}"]`).classList.add('rating-star-chosen'); } document.querySelectorAll('[data-rating]').forEach(star => { star.addEventListener('click', async event => { let cooldown_ms = 5000; /* 5 second cooldown */ let last_rating_time = parseInt(localStorage.getItem('50f431c63049cc095d1af93294e10d12_meta_tags_checker_rating_time') || '0', 10); let now = Date.now(); /* Block if user is within cooldown */ if(now - last_rating_time < cooldown_ms) { return; } localStorage.setItem('50f431c63049cc095d1af93294e10d12_meta_tags_checker_rating_time', now); let element = event.currentTarget; let rating = element.getAttribute('data-rating'); let tool_id = "meta_tags_checker"; /* Prepare form data */ let form = new FormData(); form.set('global_token', global_token) form.set('tool_id', tool_id); form.set('rating', rating); const response = await fetch(`${url}tools-rating`, { method: 'post', body: form }); let data = null; try { data = await response.json(); } catch (error) {} if(!response.ok) {} if(data.status == 'error') { } else if(data.status == 'success') { localStorage.setItem('50f431c63049cc095d1af93294e10d12_meta_tags_checker_rating', rating); /* Remove previous chosen star if needed */ let chosen_rating = document.querySelector('.rating-star-chosen'); if(chosen_rating) { chosen_rating.classList.remove('rating-star-chosen'); } /* Add class to show that it has been rated */ element.classList.add('rating-star-chosen'); /* Update ratings and avg */ document.querySelector('#average-rating').textContent = data.details.new_average_rating; document.querySelector('#total-ratings').textContent = data.details.new_total_ratings; } }); }); </script> <script type="application/ld+json"> { "@context": "https://schema.org", "@type": "SoftwareApplication", "name": "Online tools", "url": "https://biolink.page/tools/meta-tags-checker", "applicationCategory": "WebApplication" ,"aggregateRating": { "@type": "AggregateRating", "ratingValue": "5", "reviewCount": "1" } } </script> <script> 'use strict'; document.querySelectorAll('[data-native-share]').forEach(element => { if(navigator.share) { element.classList.remove('d-none'); element.addEventListener('click', event => { navigator.share({ title: document.title, url: "https://biolink.page/tools/meta-tags-checker" }).catch(error => {}); }) } }) </script> <script type="application/ld+json"> { "@context": "https://schema.org", "@type": "BreadcrumbList", "itemListElement": [ { "@type": "ListItem", "position": 1, "name": "Link in Bio Tool - BioLink.page - One Link for All Your Content", "item": "https://biolink.page/" }, { "@type": "ListItem", "position": 2, "name": "Online tools", "item": "https://biolink.page/tools" }, { "@type": "ListItem", "position": 3, "name": "Meta tags checker", "item": "https://biolink.page/tools/meta-tags-checker" } ] } </script> <script src="https://biolink.page/themes/altum/assets/js/libraries/clipboard.min.js?v=6000"></script> <script> 'use strict'; /* Simple copy */ let data_copy_elements = document.querySelectorAll('[data-copy=""]'); if(data_copy_elements.length) { data_copy_elements.forEach(element => { element.classList.add('cursor-pointer'); element.setAttribute('data-toggle', 'tooltip'); element.setAttribute('title', "Copy to clipboard"); element.setAttribute('data-clipboard-text', element.innerText.trim()); element.setAttribute('data-copy', "Copy to clipboard"); element.setAttribute('data-copied', "Copied!"); }); tooltips_initiate(); } let clipboard = new ClipboardJS('[data-clipboard-text],[data-clipboard-target]'); /* Copy full url handler */ $('[data-clipboard-text],[data-clipboard-target]').on('click', event => { let copy = event.currentTarget.dataset.copy; let copied = event.currentTarget.dataset.copied; $(event.currentTarget).attr('data-original-title', copied).tooltip('show'); setTimeout(() => { $(event.currentTarget).attr('data-original-title', copy); }, 500); }); </script> <script> 'use strict'; let switch_theme_style = document.querySelector('#switch_theme_style'); if(switch_theme_style) { switch_theme_style.addEventListener('click', event => { let theme_style = document.querySelector('body[data-theme-style]').getAttribute('data-theme-style'); let new_theme_style = theme_style == 'light' ? 'dark' : 'light'; /* Set a cookie with the new theme style */ document.cookie = 'theme_style=' + encodeURIComponent(new_theme_style) + '; max-age=' + (30 * 24 * 60 * 60) + '; path="\/"'; /* Change the css and button on the page */ let css = document.querySelector(`#css_theme_style`); document.querySelector(`body[data-theme-style]`).setAttribute('data-theme-style', new_theme_style); switch (new_theme_style) { case 'dark': css.setAttribute('href', "https:\/\/biolink.page\/themes\/altum\/assets\/css\/custom-bootstrap\/bootstrap-dark.min.css?v=6000"); document.body.classList.add('cc--darkmode'); break; case 'light': css.setAttribute('href', "https:\/\/biolink.page\/themes\/altum\/assets\/css\/custom-bootstrap\/bootstrap.min.css?v=6000"); document.body.classList.remove('cc--darkmode'); break; } /* Refresh the logo/title */ document.querySelectorAll('[data-logo]').forEach(element => { let new_brand_value = element.getAttribute(`data-${new_theme_style}-value`); let new_brand_class = element.getAttribute(`data-${new_theme_style}-class`); let new_brand_tag = element.getAttribute(`data-${new_theme_style}-tag`) let new_brand_html = new_brand_tag == 'img' ? `<img src="${new_brand_value}" class="${new_brand_class}" alt="Website logo" />` : `<${new_brand_tag} class="${new_brand_class}">${new_brand_value}</${new_brand_tag}>`; element.innerHTML = new_brand_html; }); document.querySelector(`#switch_theme_style`).setAttribute('data-original-title', document.querySelector(`#switch_theme_style`).getAttribute(`data-title-theme-style-${theme_style}`)); document.querySelector(`#switch_theme_style [data-theme-style="${new_theme_style}"]`).classList.remove('d-none'); document.querySelector(`#switch_theme_style [data-theme-style="${theme_style}"]`).classList.add('d-none'); if (typeof bootstrap !== 'undefined' && typeof bootstrap.Tooltip === 'function' && typeof Popper !== 'undefined') { $(`#switch_theme_style`).tooltip('hide').tooltip('show'); } event.preventDefault(); }); document.addEventListener('keydown', event => { if((event.ctrlKey || event.metaKey) && event.key === 'i') { event.preventDefault(); switch_theme_style.click(); if (typeof bootstrap !== 'undefined' && typeof bootstrap.Tooltip === 'function' && typeof Popper !== 'undefined') { $(`#switch_theme_style`).tooltip('hide'); } } }); } </script> <script> 'use strict'; let ads_url = 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js'; let request_ads_to_display = callback => { let xhr = new XMLHttpRequest(); xhr.onreadystatechange = function () { if(xhr.readyState == XMLHttpRequest.DONE) { callback(xhr.status === 0 || xhr.responseURL !== ads_url); } }; xhr.open('HEAD', ads_url, true); xhr.send(null); } request_ads_to_display(is_blocked => { if(is_blocked) { setTimeout(() => { $('#ad_blocker_detector_modal').modal('show'); }, 5 * 1000); } }); </script> <script> 'use strict'; /* ------------------------------ DOM Elements & Data Storage ------------------------------ */ const spotlight_wrapper = document.getElementById('spotlight_wrapper'); const spotlight_modal = document.querySelector('.spotlight-modal'); const spotlight_results = document.querySelector('#spotlight_results'); let spotlight_results_array = []; /* ------------------------------ Show / Hide Spotlight ------------------------------ */ const spotlight_display = () => { spotlight_wrapper.classList.remove('d-none'); requestAnimationFrame(() => { spotlight_wrapper.classList.add('show'); }); spotlight_wrapper.setAttribute('aria-hidden', 'false'); document.querySelector('#spotlight_search').focus(); }; const spotlight_hide = () => { spotlight_wrapper.classList.remove('show'); spotlight_wrapper.setAttribute('aria-hidden', 'true'); setTimeout(() => { spotlight_wrapper.classList.add('d-none'); }, 150); }; /* ------------------------------ Fetch Pages & Store Locally ------------------------------ */ const spotlight_get_pages = async () => { const form = new FormData(document.querySelector('#spotlight_form')); const params = new URLSearchParams(form).toString(); const response = await fetch(`${url}spotlight?global_token=${global_token}`, { method: 'get' }); let data; try { data = await response.json(); } catch (error) { return false; } if(!response.ok || data.status === 'error') { return false; } else { let results = data.details.map(obj => ({ ...obj, clicks: 0 })); localStorage.setItem('50f431c63049cc095d1af93294e10d12_spotlight_results', JSON.stringify(results)); } return data.details; }; /* ------------------------------ Build & Insert All Results Once ------------------------------ */ const build_all_spotlight_results = (pages) => { // Sort them once by clicks (descending) pages.sort((a, b) => b.clicks - a.clicks); // Build in one shot let html = ''; for (const page of pages) { // Include lowercase name/url as data attrs for quick toggling html += ` <a href="${url}${page.url || ''}" target="_blank" class="my-3 p-3 bg-gray-50 rounded-2x position-relative text-decoration-none text-reset" style="display: block" data-spotlight-result-url="${page.url}" data-spotlight-result-name="${page.name}" > <div class="d-flex justify-content-between align-items-center"> <div> <span>${page.name}</span> <div class="small text-muted">${page.url ? '/' + page.url : url}</div> </div> <div> <i class="fas fa-fw fa-lg fa-arrow-right text-muted"></i> </div> </div> </a> `; } spotlight_results.innerHTML = html; document.querySelector('#spotlight_no_data').style.display = pages.length ? 'none' : 'block'; }; /* ------------------------------ Toggle Display Instead of Re-rendering ------------------------------ */ const filter_spotlight_results = (search_value) => { const spotlight_no_data = document.querySelector('#spotlight_no_data'); const lower_search = search_value.toLowerCase(); const links = spotlight_results.querySelectorAll('a[data-spotlight-result-url]'); let matches = 0; links.forEach(link => { const page_name = link.getAttribute('data-spotlight-result-name').toLowerCase(); const page_url = link.getAttribute('data-spotlight-result-url').toLowerCase(); if(page_name.includes(lower_search) || page_url.includes(lower_search)) { link.style.display = 'block'; matches++; } else { link.style.display = 'none'; } }); // If no matches, show #spotlight_no_data spotlight_no_data.style.display = matches ? 'none' : 'block'; }; /* ------------------------------ Initial Load ------------------------------ */ const spotlight_init = async () => { // Show spinner only once, on load spotlight_results.innerHTML = ` <div class="my-3 p-3 bg-gray-50 rounded-2x position-relative d-flex justify-content-center"> <div class="spinner-border spinner-border-lg" role="status"></div> </div> `; // If no local results, fetch from server if(!get_cookie('spotlight_has_results')) { localStorage.removeItem('50f431c63049cc095d1af93294e10d12_spotlight_results'); } if(!localStorage.getItem('50f431c63049cc095d1af93294e10d12_spotlight_results')) { const fetched_pages = await spotlight_get_pages(); spotlight_results_array = fetched_pages || []; } else { spotlight_results_array = JSON.parse(localStorage.getItem('50f431c63049cc095d1af93294e10d12_spotlight_results')); } set_cookie('spotlight_has_results', 1, 90, "\/"); // Now build the entire set build_all_spotlight_results(spotlight_results_array); // Optional: highlight first result if you want const first_link = spotlight_results.querySelector('a'); if(first_link) { first_link.dispatchEvent(new Event('mouseover', { bubbles: true })); } }; /* ------------------------------ Debounced Search on Input ------------------------------ */ let search_timeout; const spotlight_process_search = () => { if(search_timeout) clearTimeout(search_timeout); search_timeout = setTimeout(() => { const search = document.querySelector('#spotlight_search').value; filter_spotlight_results(search); }, 100); }; /* ------------------------------ Track Clicks via Delegation ------------------------------ */ spotlight_results.addEventListener('click', event => { const link = event.target.closest('a[data-spotlight-result-url]'); if(!link) return; const result_url = link.getAttribute('data-spotlight-result-url'); const page_obj = spotlight_results_array.find(p => p.url === result_url); if(page_obj) { page_obj.clicks += 1; localStorage.setItem('50f431c63049cc095d1af93294e10d12_spotlight_results', JSON.stringify(spotlight_results_array)); } }); /* ------------------------------ Keyboard Navigation ------------------------------ */ const navigate_results = direction => { // Only get visible links const focusable_results = Array .from(spotlight_results.querySelectorAll('a')) .filter(a => a.style.display !== 'none'); if(!focusable_results.length) return; // Where is the current focus? let current_index = focusable_results.indexOf(document.activeElement); // If nothing is focused yet, treat it as -1 if(current_index === -1) current_index = -1; // Move up or down among only visible items if(direction === 'down') { current_index = (current_index + 1) % focusable_results.length; } else if(direction === 'up') { current_index = (current_index - 1 + focusable_results.length) % focusable_results.length; } focusable_results[current_index].focus(); }; /* ------------------------------ Global Keydown for CTRL+K, etc. ------------------------------ */ document.addEventListener('keydown', event => { if((event.ctrlKey || event.metaKey) && event.key === 'k') { event.preventDefault(); spotlight_wrapper.getAttribute('aria-hidden') === 'true' ? spotlight_display() : spotlight_hide(); } if(spotlight_wrapper.getAttribute('aria-hidden') === 'false') { if(event.key === 'Escape') { spotlight_hide(); } else if(event.key === 'ArrowDown') { event.preventDefault(); navigate_results('down'); } else if(event.key === 'ArrowUp') { event.preventDefault(); navigate_results('up'); } else if(event.key === 'Enter') { /* handle enter if needed */ } else { document.querySelector('#spotlight_search').focus(); } } }); /* ------------------------------ Hide on Click Outside ------------------------------ */ spotlight_wrapper.addEventListener('click', event => { if(!spotlight_wrapper.classList.contains('d-none') && !spotlight_modal.contains(event.target)) { spotlight_hide(); } }); /* ------------------------------ Attach Debounced Search ------------------------------ */ ['change','paste','keyup'].forEach(event_type => { document.querySelector('#spotlight_search').addEventListener(event_type, spotlight_process_search); }); /* ------------------------------ Submit Form -> Go to First Result ------------------------------ */ document.querySelector('#spotlight_form').addEventListener('submit', event => { event.preventDefault(); const first_visible = Array .from(document.querySelectorAll('#spotlight_results a')) .find(a => a.style.display !== 'none'); if(first_visible) { first_visible.click(); } }); /* ------------------------------ Kick off initial load ------------------------------ */ (async () => { await spotlight_init(); })(); </script> <style> /* Spotlight search */ .spotlight-wrapper { background: hsla(0, 100%, 100%, 0.5); position: fixed; width: 100%; height: 100%; z-index: 200; display: flex; justify-content: center; align-items: center; opacity: 0; transition: opacity .15s; pointer-events: none; } [data-theme-style="dark"] .spotlight-wrapper { background: hsla(0, 100%, 0%, 0.5); } .spotlight-wrapper.show { opacity: 1; pointer-events: auto; } .spotlight-modal { padding: 2rem; border-radius: calc(2*var(--border-radius)); background: var(--gray-100); } .spotlight-results { overflow-y: scroll; max-height: 29rem; } .spotlight-results a { border-radius: calc(2*var(--border-radius)); } .spotlight-results a:focus-visible { outline: none; } </style> </body> </html>