Игра
Seo

Букмарклеты для SEO-специалиста: что это и как ими пользоваться

Закладка в браузере, которая вместо адреса хранит маленькую программу. Один клик — и видно title, заголовки, картинки без alt и закрытые ссылки. Восемь готовых букмарклетов с кодом и инструкцией по установке.

Содержание
  1. Что такое букмарклет
  2. Зачем и кому
  3. Как это устроено
  4. Как установить букмарклет
  5. Восемь букмарклетов для SEO
  6. Как проверить, что всё работает
  7. Частые ошибки
  8. Чек-лист
  9. Частые вопросы

Что такое букмарклет

Букмарклет — это закладка в браузере, в которой вместо адреса сайта записан небольшой код на JavaScript. Название сложено из двух английских слов: bookmark — закладка и applet — маленькая программа. Нажимаешь на такую закладку, и код выполняется на странице, которая сейчас открыта.

Пример: ты открыл страницу конкурента и нажал закладку «SEO-данные». В углу экрана появилась табличка: title и его длина, description, canonical, meta robots, все H1 и число слов на странице. Без расширений, сервисов и просмотра кода.

Зачем и кому

  • SEO-специалисту — для быстрой проверки страниц: своих, клиентских, конкурентских.
  • Контент-менеджеру и копирайтеру — проверить заголовки, alt у картинок и мета-теги после публикации.
  • Владельцу сайта — убедиться, что подрядчик сделал то, что обещал.

Чем удобны букмарклеты:

  • ничего не нужно устанавливать — это обычные закладки;
  • работают в Chrome, Яндекс Браузере и других современных браузерах на компьютере;
  • код открыт, видно, что именно делает закладка;
  • не нужен доступ к сайту: проверить можно любую открытую страницу.

Это не замена краулерам и большим сервисам: букмарклет смотрит одну страницу. Зато мгновенно. У SEO-специалиста таких мелких проверок много, и экономия на каждой из них заметна.

Как это устроено

Когда ты нажимаешь на букмарклет, браузер выполняет его код на текущей странице так, будто этот код был частью сайта. Код может прочитать заголовки, мета-теги и текст, подсветить нужные элементы, открыть новую вкладку.

Все изменения происходят только у тебя в браузере. На самом сайте ничего не меняется: обнови страницу (F5), и всё станет как было.

Ни один букмарклет из этой статьи не отправляет данные на сторонние сайты и не загружает чужие скрипты. Два из них делают фоновый запрос к тому же сайту, на котором ты находишься: один читает robots.txt, другой — ответ сервера на текущую страницу.

Как установить букмарклет

Классический способ — зажать кнопку-ссылку с букмарклетом и перетащить её на панель закладок. Но это работает, только если букмарклет оформлен ссылкой. Здесь код дан текстом, поэтому ставим вручную. В Chrome и Яндекс Браузере это делается одинаково.

  1. Включи панель закладок: Ctrl+Shift+B.
  2. Открой любую страницу и добавь её в закладки: Ctrl+D. Папка — панель закладок.
  3. Нажми на новую закладку правой кнопкой мыши и выбери «Изменить».
  4. В поле с названием напиши понятное имя, например «robots.txt».
  5. В поле с адресом (URL) сотри всё и вставь код букмарклета целиком — от javascript: до последних символов })();.
  6. Сохрани. Перейди на любой сайт и нажми на закладку — протестируй.

Названия пунктов меню в разных версиях браузеров могут немного отличаться, но поле с адресом у закладки есть всегда.

Если букмарклет не срабатывает. На некоторых сайтах стоит строгая политика безопасности — Content Security Policy (CSP). Она может блокировать букмарклеты: нажимаешь, а ничего не происходит. Это защита сайта, а не поломка закладки. Ещё букмарклеты не работают на служебных страницах браузера — на новой вкладке и в настройках.

Восемь букмарклетов для SEO

Каждый код — одна строка. Копируй её целиком.

1. Открыть robots.txt

Что делает: открывает в новой вкладке файл robots.txt того сайта, на котором ты находишься.

Когда полезен: при первом знакомстве с сайтом, после переезда или выкладки новой версии. Сразу видно, не закрыт ли сайт целиком строкой Disallow: / и где лежит карта сайта.

javascript:(function(){window.open(location.origin + '/robots.txt', '_blank');})();

2. Открыть sitemap.xml

Что делает: ищет в robots.txt строку Sitemap: и открывает в новой вкладке указанную там карту сайта. Если такой строки нет, открывает стандартный адрес /sitemap.xml.

Когда полезен: проверить, есть ли у сайта карта, открывается ли она и какие страницы в неё попали. Адрес карты зависит от движка сайта, поэтому букмарклет сначала смотрит в robots.txt. Если открылась страница 404, а строки Sitemap: в robots.txt нет, карта либо лежит по нестандартному адресу, либо её нет. Посмотри, какой адрес указан в Вебмастере: «Индексирование» → «Файлы Sitemap».

javascript:(function(){var fallback = location.origin + '/sitemap.xml';var tab = window.open('about:blank', '_blank');function go(url){if (!tab) {location.href = url; return;} try {tab.location.href = url;} catch (e) {location.href = url;}}fetch(location.origin + '/robots.txt').then(function(r){return r.ok ? r.text() : '';}).then(function(text){var m = text.match(/^\s*sitemap\s*:\s*(\S+)/im);go(m ? new URL(m[1], location.href).href : fallback);}).catch(function(){go(fallback);});})();

3. SEO-данные страницы

Что делает: показывает в правом верхнем углу табличку:

  • title и description с длиной в символах;
  • canonical и совпадает ли он с адресом страницы;
  • meta robots;
  • все H1 и их количество;
  • число слов на странице и отдельно в основном блоке (main или article), если он есть.

Клик по табличке или повторный клик по закладке её закрывает.

Когда полезен: быстрый осмотр любой страницы — своей после правок, клиентской на аудите, конкурентской при анализе выдачи. Как составлять title и description, разобрано в статье про мета-теги.

Число слов на странице считается по всему видимому тексту, включая меню и подвал, поэтому оно обычно больше, чем в самой статье. Для оценки текста смотри число в основном блоке.

javascript:(function(){var old = document.getElementById('xseo-seo-box');if (old) {old.remove(); return;}function meta(name){var el = document.querySelector('meta[name="' + name + '" i]'); return el ? (el.getAttribute('content') || '').trim() : '';}function words(el){return el ? el.innerText.split(/\s+/).filter(function(w){return /[\p{L}\p{N}]/u.test(w);}).length : 0;}var title = document.title.trim();var desc = meta('description');var robots = meta('robots');var link = document.querySelector('link[rel~="canonical" i]');var canonical = link ? link.href : '';var here = location.origin + location.pathname + location.search;var h1 = Array.prototype.map.call(document.querySelectorAll('h1'), function(h){return h.innerText.trim() || '(пустой)';});var main = document.querySelector('main, article, [role="main"]');var lines = ['Title (' + title.length + ' симв.): ' + (title || 'НЕТ'),'Description (' + desc.length + ' симв.): ' + (desc || 'НЕТ'),'Canonical: ' + (canonical ? canonical + (canonical === here ? ' (эта же страница)' : ' (другой адрес!)') : 'не указан'),'Meta robots: ' + (robots || 'не указан'),'H1 (' + h1.length + ' шт.): ' + (h1.length ? h1.join(' / ') : 'НЕТ'),'Слов на странице: ' + words(document.body) + (main ? ', в основном блоке: ' + words(main) : '')];var box = document.createElement('div');box.id = 'xseo-seo-box';box.title = 'Клик — закрыть';box.textContent = lines.join('\n\n');var s = box.style;s.position = 'fixed'; s.top = '12px'; s.right = '12px'; s.zIndex = '2147483647';s.maxWidth = '460px'; s.maxHeight = '80vh'; s.overflow = 'auto'; s.padding = '12px 14px';s.background = 'white'; s.color = 'black'; s.border = '2px solid black'; s.borderRadius = '6px';s.font = '14px/1.45 Arial, sans-serif'; s.textAlign = 'left'; s.whiteSpace = 'pre-wrap'; s.cursor = 'pointer';box.addEventListener('click', function(){box.remove();});document.body.appendChild(box);})();

4. Подсветка заголовков H1–H6

Что делает: обводит каждый заголовок рамкой своего цвета и ставит перед ним метку уровня: H1, H2 и так далее. Потом показывает, сколько заголовков каждого уровня на странице и сколько из них скрыто. Повторный клик убирает подсветку.

Когда полезен: проверить структуру страницы. Один ли H1, не перепутаны ли уровни, не оформлены ли заголовками куски меню, подвала и всплывающих окон. Скрытые заголовки на экране не видны — о них скажет итоговое сообщение.

javascript:(function(){var marks = document.querySelectorAll('[data-xseo-hl]');var heads = document.querySelectorAll('h1, h2, h3, h4, h5, h6');if (marks.length) {marks.forEach(function(m){m.remove();}); heads.forEach(function(h){h.style.outline = ''; h.style.outlineOffset = '';}); return;}var colors = {H1: 'crimson', H2: 'darkorange', H3: 'green', H4: 'royalblue', H5: 'purple', H6: 'gray'};var count = {H1: 0, H2: 0, H3: 0, H4: 0, H5: 0, H6: 0};var hidden = 0;heads.forEach(function(h){var tag = h.tagName.toUpperCase();count[tag]++;if (!h.getClientRects().length) {hidden++;}h.style.outline = '2px solid ' + colors[tag];h.style.outlineOffset = '2px';var label = document.createElement('span');label.setAttribute('data-xseo-hl', '1');label.textContent = tag;var s = label.style;s.display = 'inline-block'; s.margin = '0 6px 0 0'; s.padding = '1px 5px'; s.borderRadius = '3px';s.background = colors[tag]; s.color = 'white'; s.font = 'bold 12px/1.4 Arial, sans-serif';s.verticalAlign = 'middle'; s.textTransform = 'none'; s.letterSpacing = 'normal';h.insertBefore(label, h.firstChild);});setTimeout(function(){alert('H1: ' + count.H1 + '   H2: ' + count.H2 + '   H3: ' + count.H3 + '   H4: ' + count.H4 + '   H5: ' + count.H5 + '   H6: ' + count.H6 + (hidden ? '\nСкрытых, не видных на экране: ' + hidden : ''));}, 100);})();

5. Картинки без alt

Что делает: обводит сплошной красной рамкой картинки, у которых вообще нет атрибута alt, и оранжевым пунктиром — картинки с пустым alt. Показывает итог, а адреса этих картинок выводит в консоль браузера: F12, вкладка Console.

Когда полезен: при проверке карточек товаров, статей, портфолио. Пустой alt нормален для декоративных картинок — иконок, фонов, разделителей. А у фотографий товаров и иллюстраций в статьях alt должен описывать изображение. Подробнее — в статье про оптимизацию изображений.

Картинки, заданные фоном через CSS, букмарклет не видит: атрибута alt у них не бывает.

javascript:(function(){var none = [], empty = [];Array.prototype.forEach.call(document.images, function(img){var alt = img.getAttribute('alt');var name = img.currentSrc || img.src || img.outerHTML.slice(0, 150);if (alt === null) {none.push(name); img.style.outline = '4px solid red'; img.style.outlineOffset = '-4px';}else if (!alt.trim()) {empty.push(name); img.style.outline = '4px dashed orange'; img.style.outlineOffset = '-4px';}});console.log('Без alt:', none);console.log('Пустой alt:', empty);setTimeout(function(){alert('Картинок на странице: ' + document.images.length + '\nБез атрибута alt (красная рамка): ' + none.length + '\nС пустым alt (оранжевый пунктир): ' + empty.length + '\nАдреса этих картинок — в консоли (F12, вкладка Console).');}, 100);})();

6. Ссылки с nofollow

Что делает: подсвечивает ссылки с атрибутом rel="nofollow" и показывает, сколько их среди всех ссылок страницы. Если nofollow стоит в meta robots, отдельно предупреждает: тогда для роботов закрыты все ссылки страницы.

Когда полезен: проверить, не закрыты ли по ошибке ссылки на важные разделы — например, в меню или каталоге. Или посмотреть, открыта ли ссылка на твой сайт на чужой площадке. Как ссылки внутри сайта помогают продвижению, разобрано в статье про перелинковку.

javascript:(function(){var links = document.querySelectorAll('a[href]');var nofollow = document.querySelectorAll('a[href][rel~="nofollow" i]');nofollow.forEach(function(a){a.style.outline = '2px dashed red'; a.style.outlineOffset = '2px'; a.style.backgroundColor = 'rgba(255, 0, 0, 0.15)';});var pageRule = Array.prototype.some.call(document.querySelectorAll('meta[name="robots" i], meta[name="yandex" i]'), function(m){return /\b(nofollow|none)\b/i.test(m.getAttribute('content') || '');});setTimeout(function(){alert('Ссылок на странице: ' + links.length + '\nС rel="nofollow" (красный пунктир): ' + nofollow.length + (pageRule ? '\nВнимание: в meta robots стоит nofollow или none, для роботов закрыты все ссылки этой страницы.' : ''));}, 100);})();

7. Правила индексирования

Что делает: заново запрашивает текущую страницу у сервера и показывает:

  • код ответа и был ли редирект;
  • заголовок X-Robots-Tag;
  • canonical в HTTP-заголовке Link, если он там есть;
  • meta-теги для роботов — общий robots и отдельные для Яндекса (yandex) и Google (googlebot);
  • canonical из кода страницы.

Когда полезен: страница не попадает в индекс, а в коде всё чисто. Запрет может прийти из заголовка X-Robots-Tag — его не видно ни на странице, ни в её коде. Яндекс учитывает и meta-тег с name="yandex", и X-Robots-Tag.

Не закрыта ли страница в robots.txt, надёжнее проверить в Вебмастере: «Инструменты» → «Анализ robots.txt».

javascript:(function(){var old = document.getElementById('xseo-index-box');if (old) {old.remove(); return;}var url = location.origin + location.pathname + location.search;var metas = Array.prototype.map.call(document.querySelectorAll('meta[name="robots" i], meta[name="yandex" i], meta[name="googlebot" i]'), function(m){return m.getAttribute('name') + ' = ' + (m.getAttribute('content') || '');});var link = document.querySelector('link[rel~="canonical" i]');var lines = ['Адрес: ' + url];function show(){var box = document.createElement('div');box.id = 'xseo-index-box';box.title = 'Клик — закрыть';box.textContent = lines.join('\n\n');var s = box.style;s.position = 'fixed'; s.top = '12px'; s.right = '12px'; s.zIndex = '2147483647';s.maxWidth = '460px'; s.maxHeight = '80vh'; s.overflow = 'auto'; s.padding = '12px 14px';s.background = 'white'; s.color = 'black'; s.border = '2px solid black'; s.borderRadius = '6px';s.font = '14px/1.45 Arial, sans-serif'; s.textAlign = 'left'; s.whiteSpace = 'pre-wrap'; s.cursor = 'pointer';box.addEventListener('click', function(){box.remove();});document.body.appendChild(box);}fetch(url, {cache: 'no-store'}).then(function(r){lines.push('Ответ сервера: ' + r.status + (r.redirected ? ', был редирект на ' + r.url : ''));lines.push('X-Robots-Tag: ' + (r.headers.get('x-robots-tag') || 'нет'));var header = r.headers.get('link');if (header && /canonical/i.test(header)) {lines.push('Canonical в HTTP-заголовке Link: ' + header);}}).catch(function(){lines.push('Ответ сервера получить не удалось: сайт не разрешил запрос.');}).then(function(){lines.push('Meta-теги для роботов: ' + (metas.length ? metas.join('; ') : 'нет'));lines.push('Canonical в коде: ' + (link ? link.href : 'нет'));show();});})();

8. Страница без CSS

Что делает: отключает стили страницы. Повторный клик включает их обратно.

Когда полезен: увидеть страницу «голой» — в каком порядке идут блоки в коде, сколько на ней текста на самом деле, какие меню и блоки спрятаны стилями. Стили, прописанные прямо в атрибутах элементов, при этом остаются.

javascript:(function(){var off = window.xseoCssOff;if (off) {off.forEach(function(sheet){sheet.disabled = false;}); window.xseoCssOff = null; return;}off = [];var sheets = Array.prototype.slice.call(document.styleSheets).concat(Array.prototype.slice.call(document.adoptedStyleSheets || []));sheets.forEach(function(sheet){if (!sheet.disabled) {sheet.disabled = true; off.push(sheet);}});window.xseoCssOff = off;})();

Как проверить, что всё работает

  1. Открой любой сайт и нажми «robots.txt» — в новой вкладке должен открыться файл.
  2. Нажми «SEO-данные» — в правом верхнем углу появится табличка. Клик по ней закрывает её.
  3. Сверь данные с исходным кодом страницы: Ctrl+U, затем Ctrl+F и поиск по <title или canonical.
  4. Для важных решений перепроверяй данные в инструментах поисковиков. В Яндекс Вебмастере есть «Проверка ответа сервера» и «Анализ robots.txt», в Google Search Console — «Проверка URL».

Частые ошибки

  • Вставляют код в адресную строку. Браузер отрезает javascript:, и ничего не запускается.
  • Копируют не целиком. Код начинается с javascript: и заканчивается на })(); — без начала или конца он не сработает.
  • Пересылают код через мессенджер или текстовый редактор. Они могут заменить прямые кавычки на «ёлочки» или типографские — и код сломается. Копируй прямо со страницы.
  • Ждут работы на служебных страницах браузера или в открытом в браузере PDF.
  • Принимают число слов за объём статьи. Букмарклет считает весь видимый текст, включая меню и подвал.
  • Делают выводы только по букмарклету. Прежде чем закрывать или открывать страницы для индексации, проверь данные в Вебмастере и Search Console.

Чек-лист

  • Панель закладок включена (Ctrl+Shift+B).
  • Восемь закладок созданы, у каждой понятное название.
  • robots.txt на любом сайте открывается в новой вкладке.
  • Табличка «SEO-данные» появляется и закрывается по клику.
  • Данные букмарклета хотя бы раз сверены с исходным кодом (Ctrl+U).
  • Помнишь: F5 возвращает страницу в исходный вид.

Частые вопросы

Это безопасно?

Букмарклет выполняется с теми же правами, что и код самой страницы: видит всё, что открыто во вкладке, в том числе в личном кабинете, куда ты вошёл. Поэтому ставь только те букмарклеты, код которых можешь прочитать или которым доверяешь. Код из этой статьи не передаёт данные на сторонние сайты, и это видно по нему самому.

Почему букмарклет не работает на некоторых сайтах?

Чаще всего из-за строгой политики безопасности (CSP), которая блокирует посторонний код. Другие причины — служебная страница браузера или ошибка при копировании. Проверь закладку на другом сайте: если там работает, дело в странице.

Работают ли букмарклеты на телефоне?

С оговорками. В Chrome на Android закладку с кодом можно запустить так: начни вводить её название в адресной строке и выбери закладку в подсказках. Но удобнее всего букмарклеты на компьютере.

Чем это лучше расширений?

Расширение умеет больше, но его нужно устанавливать и обновлять, и оно получает доступ к страницам, которые ты открываешь. Букмарклет — короткий код, который ты видишь целиком и который запускается, только когда ты на него нажал. Хорошая связка: краулеры и расширения для глубокого аудита, букмарклеты — для быстрых проверок на ходу.

Почему число слов не совпадает с сервисами анализа текста?

Сервисы считают по-разному: одни берут только основной текст, другие — весь HTML, третьи не учитывают предлоги. Букмарклет считает весь видимый текст страницы и отдельно — основной блок. Для глубокого разбора текста есть текстовый анализ.

Ещё в разделе «Seo»