بوکمارکلت

بوکمارکلت ها و کاربرد آنها در بررسی صفحات

اگر در زمینه بهینه سازی برای موتورهای جستجو فعالیت می کنید و یا به هر دلیلی مشغول بررسی صفحات سایت ها با دیدگاه سئو هستید، حتما از ابزارهای تحت وب، اپلیکیشن ها و افزونه های مختلف استفاده کرده اید. برخی از افزونه ها روی مرورگر ها نصب می شوند و برخی قابلیت ها را به شما می دهند. ولی آیا برای هر نوع بررسی باید به دنبال افزونه باشیم؟

آیا تا به حال به این موضوع فکر کرده اید که اگر یک ایده ای با جاوا اسکریپت قابل انجام بود ولی افزونه ای برای آن وجود نداشت، به چه روشی می شود به سادگی آن را پیاده سازی کرد؟ در ادامه خواهم گفت که چطور می شود به سادگی و با استفاده از bookmarklet، بسیاری از ایده ها را به سادگی در مرورگر گوگل کروم یا مرورگر های بر پایه Chromium به سرانجام رساند.

Bookmarklet چیست؟

بوکمارکلت های شبیه افزونه های مرورگر و البته ساده تر هستند و نیازی به نصب ندارند. بوکمارکلت ها معمولا با یکی از کاربردهای زیر مورد استفاده قرار می گیرند:

  • استخراج اطلاعات از یک صفحه وب
  • تغییر ظاهر در صفحه وب
  • جستجوی یکی از عبارت های صفحه در اینترنت
  • به اشتراک گذاری صفحه وب در شبکه های اجتماعی

نحوه ایجاد و استفاده از بوکمارکلت در مرورگر

برای ایجاد یک bookmarklet در مرورگر گوگل کروم یا دیگر مرورگر های بر پایه کرومیوم، سه مرحله زیر را انجام دهید:

  1. فانکشن جاوا اسکریپت مد نظرتان را بنویسید.
  2. یک صفحه وب را بوکمارک کنید.‌ (همچنین می توانید از Bookmark manager مرورگر جهت ایجاد بوکمارک استفاده کنید)
  3. آدرس بوکمارک را ادیت کرده و آدرس URL آن را با فانکشن جاوا اسکرپت مد نظر جایگزین کنید.
  4. نام مناسبی برای بوکمارک انتخاب کنید.
‌‌Google Chrome Bookmark Manager
‌‌Google Chrome Bookmark Manager

همان طور که گفته شد، به این نوع بوکمارک، بوکمارکلت گفته می شود. حال اگر در هر صفحه ای، روی بوکمارکلت مورد نظر کلیک کنید، فانکشن جاوا اسکریپت مربوطه اجرا خواهد شد.

بوکمارکلت های کاربردی جهت بررسی صفحه از دیدگاه سئو

همان طور که گفته شد، بوکمارکلت ها می توانند کاربردهای مختلفی داشته باشند. یک متخصص SEO جهت بررسی صفحه معمولا مواردی مانند Alt عکس ها، هدینگ ها، متا ها، لینک ها، تعداد المنت ها و موارد متعدد دیگر را بررسی می کند. همچنین در فرایند بررسی صفحات، بسیاری از مواقع یک متخصص یا کارشناس سئو، صفحات را در گوگل سرچ کنسول یا ابزارهای تست مختلف گوگل بررسی می کند.

در ادامه تعدادی از بوکمارکلت های با کاربرد SEO جهت استفاده قرار داده شده که می تواند راحتی و سرعت را در حین بررسی صفحات به ارمغان آورد.

کاربرد بوکمارکلتکاربرد بوکمارکلت
1فیلتر کردن صفحه در سرچ کنسول9نمایش آدرس canonical و meta robots صفحه
2ارسال صفحه به ابزار تست Rich Result گوگل10نمایش تعداد و آدرس preconnect، dns-prefetch، preload و prefetch صفحه
3ارسال صفحه به ابزار تست AMP گوگل11نمایش تعداد کل المنت های صفحه به همراه تعداد برخی از المنت ها
4ارسال صفحه به ابزار PageSpeed Insights گوگل12استخراج و نمایش اسکیماهای صفحه در یک تب دیگر
5نمایش تعداد تگ های a و هایلایت کردن آنها13نمایش cookie های صفحه
6نمایش تعداد انکر تکست ها و هایلایت کردن آنها14ارسال دامین صفحه به archive.org
7نمایش Alt عکس روی آن15نمایش اموجی 🏃 و 🏃‍♀️ در حال دویدن در پایین صفحه
8نمایش نوع هدینگ در کنار هر تگ <h>16نمایش اموجی های رندوم که از بالا به پایین صفحه می افتند

تک تک فانکشن هایی که در ادامه معرفی شده اند را می توانید قبل از ذخیره کردن به عنوان بوکمارکلت، در کنسول مرورگر گوگل کروم کپی و پیست کنید و پس از enter کردن از عملکرد آنها آگاه شوید.

1. Bookmarklet برای فیلتر کردن صفحه در سرچ کنسول

در صورت کلیک بر روی این بوکمارکلت، صفحه ای که در آن هستید در گزارش Performance سرچ کنسول با فیلتر URLs containing فیلتر می شود.

javascript: (function() {
    window.open(`https://search.google.com/search-console/performance/search-analytics?resource_id=${encodeURIComponent(window.location.origin)}&page=*${encodeURIComponent(window.location.href)}`)
})();

برای استفاده از این بوکمارکلت باید به پراپرتی از نوع URL Prefix دامین مورد نظر در گوگل سرچ کنسول دسترسی داشته باشید.

برای آشنایی با گزارش پرفورمنس، صفحه آموزش گزارش Performance سرچ کنسول را مطالعه بفرمایید.

اما اگر قصد فیلتر کردن صفحه با فیلتر Exact URL در گزارش پرفورمنس سرچ کنسول را داشتید، از بوکمارکلت زیر استفاده کنید.

javascript: (function() {
    window.open(`https://search.google.com/search-console/performance/search-analytics?resource_id=${encodeURIComponent(window.location.origin)}&page=!${encodeURIComponent(window.location.href)}`)
})();

با توجه به دو نمونه بالا، در صورت استفاده از page=*$ در آدرس، فیلتر URLs containing و در صورت استفاده از page=!$ در آدرس، فیلتر Exact URL در گزارش پرفورمنس سرچ کنسول استفاده خواهد شد.

2. Bookmarklet برای ارسال صفحه به ابزار تست Rich Result گوگل

با کلیک بر روی این بوکمارکلت، تب جدیدی باز شده و صفحه ای که در آن هستید توسط ابزار تست Rich Result گوگل بررسی خواهد شد.

javascript: (function() {
    window.open(`https://search.google.com/test/rich-results?url=${encodeURIComponent(window.location.href)}`)
})();

3. Bookmarklet برای ارسال صفحه به ابزار تست AMP گوگل

با کلیک بر روی این بوکمارکلت، تب جدیدی باز شده و صفحه ای که در آن هستید توسط ابزار تست AMP گوگل بررسی خواهد شد.

javascript: (function() {
    window.open(`https://search.google.com/test/amp?url=${encodeURIComponent(window.location.href)}`)
})();

4. Bookmarklet برای ارسال صفحه به ابزار PageSpeed Insights گوگل

javascript: (function() {
    window.open(`https://pagespeed.web.dev/analysis?url=${encodeURIComponent(window.location.href)}`)
})();

5. Bookmarklet برای هایلایت کردن تگ های <a> صفحه

javascript: (function() {
    var anchorElements = document.querySelectorAll('a');
    anchorElements.forEach(function(anchor) {
        anchor.style.background = 'yellow';
        anchor.style.border = '2px solid blue';
        anchor.style.padding = '2px';
    });
    if (anchorElements.length > 0) {
        alert('Links highlighted on the page.');
    } else {
        alert('No anchor elements found on this page.');
    }
})();

6. Bookmarklet برای نمایش تعداد تگ های <a> و هایلایت کردن آنها

javascript: (function() {
    var anchorElements = document.querySelectorAll('a');
    anchorElements.forEach(function(anchor, index) {
        var backgroundColor = getRandomColor();
        anchor.style.background = backgroundColor;
        anchor.style.border = '2px solid #000';
        anchor.style.padding = '2px';
        anchor.setAttribute('data-link-index', index + 1);
    });
    var totalLinks = anchorElements.length;
    if (totalLinks > 0) {
        alert('Total links on the page: ' + totalLinks);
    } else {
        alert('No anchor elements found on this page.');
    }
    function getRandomColor() {
        return '#' + Math.floor(Math.random() * 16777215).toString(16);
    }
})();

7. Bookmarklet برای نمایش Alt عکس روی آن

javascript: (function() {
    var images = document.querySelectorAll('img');
    images.forEach(function(img) {
        var altText = img.alt || 'N/A';
        var altOverlay = document.createElement('div');
        altOverlay.style.position = 'absolute';
        altOverlay.style.top = '0';
        altOverlay.style.left = '0';
        altOverlay.style.background = 'rgba(255, 255, 255, 0.9)';
        altOverlay.style.padding = '5px';
        altOverlay.style.border = '1px solid #ccc';
        altOverlay.style.zIndex = '9999';
        altOverlay.textContent = 'Alt Text: ' + altText;
        img.style.position = 'relative';
        img.parentNode.insertBefore(altOverlay, img);
    });
})();

8. Bookmarklet برای نمایش نوع هدینگ در کنار هر تگ <h>

javascript:(function() {
  var headings = document.querySelectorAll('h1, h2, h3, h4, h5, h6');
  headings.forEach(function(heading) {
    var headingTypeContainer = document.createElement('div');
    headingTypeContainer.style = 'position: relative; display: inline-block; margin-left: 10px;';
    var headingTypeLabel = document.createElement('div');
    headingTypeLabel.style = 'position: absolute; top: -20px; right: 0; background-color: #000; color: #fff; padding: 5px;border-radius:5px;';
    headingTypeLabel.textContent = heading.tagName.toLowerCase();
    headingTypeContainer.appendChild(headingTypeLabel);
    heading.appendChild(headingTypeContainer);
  });
})();

9. Bookmarklet برای نمایش آدرس canonical و meta robots صفحه

javascript:(function() {
    function getMetaContentByName(name) {
        var metaTag = document.querySelector('meta[name="' + name + '"]');
        return metaTag ? metaTag.getAttribute('content') : null;
    }
    var canonicalUrl = getMetaContentByName('canonical');
    var canonicalMessage = canonicalUrl ? 'Canonical URL:' + '\n' + canonicalUrl : 'Canonical URL does not exist! 🤔';
    var metaRobots = getMetaContentByName('robots');
    var robotsMessage = metaRobots ? 'Meta Robots:' + '\n' + metaRobots : 'Meta Robots does not exist! 🤔';
    alert(canonicalMessage + '\n' + '\n' + robotsMessage);
})();

10. Bookmarklet برای نمایش تعداد و آدرس preconnect، dns-prefetch، preload و prefetch صفحه

javascript:(function() {
  function getLinkInfo(linkType) {
    var linkElements = document.querySelectorAll('link[rel="' + linkType + '"]');
    var linkCount = linkElements.length; 
    if (linkCount > 0) {
      var linkInfo = Array.from(linkElements).map(function(link) {
        return link.href;
      }).join('\n');
      alert(linkType + ' links (' + linkCount + '):\n' + linkInfo);
    } else {
      alert('No ' + linkType + ' links found on this page! 🤔');
    }
  }
  getLinkInfo('preconnect');
  getLinkInfo('dns-prefetch');
  getLinkInfo('preload');
  getLinkInfo('prefetch');
})();

11. Bookmarklet برای نمایش تعداد کل المنت های صفحه به همراه تعداد برخی از المنت ها

در فانکشن زیر می توانید به راحتی المنت های مورد نظر را حذف و یا المنت های دیگر را به لیست اضافه کنید.

javascript: (function() {
    var elementsCount = document.querySelectorAll('*').length;
    var resourcesCount = window.performance.getEntries().length;
    var totalSize = 0;
    window.performance.getEntries().forEach(function(entry) {
        totalSize += entry.encodedBodySize || 0;
    });
    var totalSizeFormatted = (totalSize / (1024 * 1024)).toFixed(2) + ' MB';
    var metaTagsCount = document.querySelectorAll('meta').length;
    var headingsCount = document.querySelectorAll('h1, h2, h3, h4, h5, h6').length;
    var h1Count = document.querySelectorAll('h1').length;
    var h2Count = document.querySelectorAll('h2').length;
    var h3Count = document.querySelectorAll('h3').length;
    var h4Count = document.querySelectorAll('h4').length;
    var h5Count = document.querySelectorAll('h5').length;
    var h6Count = document.querySelectorAll('h6').length;
    var anchorTagsCount = document.querySelectorAll('a').length;
    var cssTagsCount = document.querySelectorAll('link[rel="stylesheet"]').length;
    var jsTagsCount = document.querySelectorAll('script[src]').length;
    var canonicalTagsCount = document.querySelectorAll('link[rel="canonical"]').length;
    var imgCount = document.querySelectorAll('img').length;
    var pictureCount = document.querySelectorAll('picture').length;
    var videoCount = document.querySelectorAll('video').length;
    var breakCount = document.querySelectorAll('br').length;
  
    alert('Elements: ' + elementsCount + ' | ' + 'Resources: ' + resourcesCount + ' | ' + 'Size: ' + totalSizeFormatted + '\n' + 'Meta: ' + metaTagsCount + '\n' + 'Headings: ' + headingsCount + ' | ' + 'H1: ' + h1Count + ' | ' + 'H2: ' + h2Count + ' | ' + 'H3: ' + h3Count + ' | ' + 'H4: ' + h4Count + ' | ' + 'H5: ' + h5Count + ' | ' + 'H6: ' + h6Count + '\n' + 'Anchor: ' + anchorTagsCount+ '\n' + 'CSS: ' + cssTagsCount + '\n' + 'JS: ' + jsTagsCount + '\n' + 'Canonical: ' + canonicalTagsCount + '\n' + 'img: ' + imgCount + ' | ' + 'picture: ' + pictureCount + ' | ' + 'video: ' + videoCount + '\n' + '<br>: ' + breakCount);
  })();

12. Bookmarklet برای استخراج و نمایش اسکیماهای صفحه در یک تب دیگر

javascript:(function() {
  function extractJsonLd() {
    const jsonLdScripts = document.querySelectorAll('script[type="application/ld+json"]');
    const extractedData = [];
    jsonLdScripts.forEach(script => {
      try {
        const json = JSON.parse(script.textContent);
        extractedData.push(json);
      } catch (error) {
        console.error('Error parsing JSON-LD:', error);
      }
    });
    if (extractedData.length > 0) {
      const jsonString = JSON.stringify(extractedData, null, 2);
      const highlightedJsonString = jsonString.replace(/(".*schema\.org.*")/g, '<span style="background-color: lightgreen;">$1</span>');
      const blob = new Blob([highlightedJsonString], { type: 'text/html' });
      const objectURL = URL.createObjectURL(blob);
      const newTab = window.open();
      newTab.document.write('<pre>' + highlightedJsonString + '</pre>');
      newTab.document.close();
    } else {
      console.log('No JSON-LD Schema Markup found on this page.');
    }
  }
  extractJsonLd();
})();

13. Bookmarklet برای نمایش cookie های صفحه در یک modal

javascript:(function() {
  function createCookieModal() {
    var modalContainer = document.createElement('div');
    modalContainer.style.position = 'fixed';
    modalContainer.style.top = '50%';
    modalContainer.style.left = '50%';
    modalContainer.style.transform = 'translate(-50%, -50%)';
    modalContainer.style.backgroundColor = 'white';
    modalContainer.style.padding = '20px';
    modalContainer.style.border = '1px solid #222';
    modalContainer.style.boxShadow = '0 0 10px rgba(0, 0, 0, 0.3)';
    modalContainer.style.zIndex = '9999';
    modalContainer.style.width = '1000px';
    modalContainer.style.direction = 'ltr';
    modalContainer.style.textAlign = 'left';
    modalContainer.style.wordWrap = 'break-word';
    var closeButton = document.createElement('button');
    closeButton.textContent = 'Close';
    closeButton.style.padding = '5px 10px';
    closeButton.style.marginTop = '10px';
    closeButton.style.cursor = 'pointer';
    closeButton.style.right = '10px';
    closeButton.style.top = '10px';
    closeButton.style.position = 'fixed';
    closeButton.addEventListener('click', function() {
      modalContainer.style.display = 'none';
    });
    var cookies = document.cookie.split(';');
    for (var i = 0; i < cookies.length; i++) {
      var cookieLine = document.createElement('div');
      cookieLine.textContent = cookies[i].trim();
      modalContainer.appendChild(cookieLine);
    }
    modalContainer.appendChild(closeButton);
    document.body.appendChild(modalContainer);
  }
  createCookieModal();
})();

در صورتی که طبق نمونه زیر، به جای alert در انتهای فانکشن از console.log استفاده کنید، نتیجه در کنسول مرورگر نمایش داده خواهد شد.

    alert('Cookies:\n' + cookieInfo);  // نمایش ریزالت به صورت آلرت

    console.log('Cookies:\n' + cookieInfo);  // نمایش ریزالت در کنسول مرورگر

    const newTab = window.open();
    newTab.document.write('<pre>' + 'Cookies:\n' + cookieInfo + '</pre>');  // نمایش ریزالت در تب جدید

14. Bookmarklet برای ارسال دامین صفحه به archive.org

javascript:(function() {
  var currentDomain = window.location.origin;
  var waybackURL = 'https://web.archive.org/web/*/' + decodeURIComponent(currentDomain);
  window.open(waybackURL, '_blank');
})();

برای خستگی در کردن، دو بوکمارکلت fun نیز در انتها برای شما قرار دادم.

15. Bookmarklet برای نمایش اموجی 🏃 و 🏃‍♀️ در حال دویدن در پایین صفحه

javascript:(function() {
    function createRunningEmoji(emoji) {
      var runningElement = document.createElement('div');
      runningElement.innerHTML = emoji;
      runningElement.style.cssText = 'position: fixed; bottom: 0px; font-size: 60px; animation: run-animation 10s linear infinite;';
      document.body.appendChild(runningElement);
    }
    function animateRunningWoman() {
      setTimeout(function() {
        createRunningEmoji('🏃');
      }, 2000);
    }
    createRunningEmoji('🏃‍♀️');
    animateRunningWoman();
    var style = document.createElement('style');
    style.textContent = `
      @keyframes run-animation {
        0% { right: 0; }
        100% { right: calc(100vw - 20px); }
      }
    `;
    document.head.appendChild(style);
  })();

16. Bookmarklet برای نمایش اموجی های رندوم که از بالا به پایین صفحه می افتند

javascript: (function() {
    var emojis = ['😂', '😜', '🤔', '😎', '🚀', '🎉', '👾', '🤣', '🥳', '😺', '❤️'];
    var emojiContainer = document.createElement('div');
    emojiContainer.style.cssText = 'position: fixed; top: 0; left: 0; pointer-events: none; z-index: 1000;';
    function createEmoji() {
        var emojiElement = document.createElement('div');
        var randomEmoji = emojis[Math.floor(Math.random() * emojis.length)];
        emojiElement.innerHTML = randomEmoji;
        emojiElement.style.cssText = 'position: absolute; font-size: 40px; opacity: 0.8;';
        emojiElement.style.left = Math.random() * window.innerWidth + 'px';
        emojiElement.style.animation = 'falling-emoji 5s linear infinite';
        emojiContainer.appendChild(emojiElement);
    }
    function animateEmojis() {
        setInterval(function() {
            createEmoji();
        }, 3000);
    }
    document.body.appendChild(emojiContainer);
    var style = document.createElement('style');
    style.textContent = `    @keyframes falling-emoji {      0% { transform: translateY(0) rotate(0deg); }      100% { transform: translateY(calc(100vh - 20px)) rotate(360deg); }    }  `;
    document.head.appendChild(style);
    createEmoji();
    animateEmojis();
})();

روش دیباگ کردن بوکمارکلت

در صورتی که بوکمارکلت شما دارای ایراد باشد، جهت بررسی آن، ابتدا کنسول مرورگر خود را بررسی کنید که مطمئن شوید اروری در کنسول وجود ندارد و اگر وجود داشت، آن را بررسی و رفع کنید.

اگر فانکشن استفاده شده در بوکمارکلت را در کنسول مرورگر کپی کرده و enter بزنید، اجرا خواهد شد و می توانید راحت تر مشکل آن را بررسی کنید.

پرسش های متداول در مورد بوکمارکلت

تفاوت بوکمارک و بوکمارکلت در چیست؟

بوکمارک ها صرفا به عنوان میانبر برای باز کردن یک آدرس هستند ولی بوکمارکلت ها به جای آدرس URL، حاوی فانکشن جاوا اسکریپت هستند و با کلیک بر روی آنها، فانکشن جاوا اسکریپت اجرا خواهد شد.

آیا امکان استفاده از بوکمارکلت روی گوشی موبایل وجود دارد؟

بله. بوکمارکلت ها روی مرورگرهایی که امکان اجرای جاوا اسکریپت را دارند وجود دارد.

🔗 منبع: GitHub

نوشته‌های مرتبط

پاسخی بگذارید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *