SEO букмарклети: 14 скриптів, які допоможуть прискорити оптимізацію сайту
31.12.2020
Редакція: Ольга Коцофане. Автор: Ярослав Бешта
31.12.2020
Ярослав Бешта, SEO-спеціаліст Webpromo
У цій статті ми поговоримо про те, що таке SEO букмарклет, навіщо вони потрібні і як ними користуватися. А також я приведу приклади найпопулярніших скриптів для браузера, які SEO фахівці, в тому числі і я, найчастіше використовують у своїй роботі для того, щоб прискорити процес оптимізації необхідного сайту.
Що таке «seo букмарклети»?
SEO букмарклет ― це інструмент, який полегшує роботу seo-фахівця при виконанні рутинних (шаблонних) завдань. Кожен букмарклет являє собою якийсь JavaScript-код, який зберігається в закладках браузера і певним чином розширює його функціонал. Букмарклет можна використовувати в SEO наступним чином:
- швидко коригувати сторінку і робити її більш зручною для сприйняття (міняти розмір тексту, колір фону, збільшувати поля введення);
- вивантажувати дані з сторінки, які цікавлять фахівця;
- дізнаватися назву стилів і класів елементів DOM дерева, а також отримувати інформацію про властивості певних елементів;
- швидко відправляти URL сторінок на перевірку в сервіси Google такі як: інструмент перевірки структурованих даних, PageSpeed Insights, Mobile Friendly Tools.
Як встановити букмарклет у браузер
Установка SEO букмарклета практично нічим не відрізняється від установки будь-який інший закладки. Якщо в браузері відключена панель закладок, викликати її можна простою комбінацією клавіш Ctrl + Shift + B для Windows або Command + Shift + B для Mac. В іншому випадку цей крок можна пропустити.
Відкритий у вікні букмарклет лівою кнопкою миші перетягуємо на панель закладок. Для того, щоб змінити назву закладки, необхідно скористатися правою клавішею мишки і вибрати дію «Змінити».
Переваги використання інструменту в SEO
Букмарклет користуються багато seo-фахівці і не дарма, адже вони мають безліч переваг і значно спрощують роботу. Ось кілька основних переваг:
- Може працювати в будь-якому браузері: Google Chrome, Mozilla Firefox, Opera, Safari і багатьох інших;
- Оперативна пам’ять комп’ютера не перевантажується, оскільки користувач самостійно запускає скрипт в міру необхідності;
- SEO букмарклет легко встановити. Зробити це можна прямо в використовуваному браузері. Завантаження додаткових програм і плагінів не потрібно.
SEO букмарклети для робіт з Google
Нижче розглянемо найпопулярніші скрипти, які значно спрощують роботу seo-фахівця з Google і його сервісами.
- Google Index ― перевіряє проіндексована чи сторінка в Google через оператор site: URL.
Код:
javascript:(function()%7Bwindow.open(%27https://www.google.ru/search%3Fq%3Dsite:%27%2Blocation.host)%7D)()%3B
- Кеш Google ― використовує кеш Google для того, щоб дістати версію сторінки, яка в останній раз була доступна пошуковому роботу. Даний скрипт дає картинку необхідної сторінки навіть якщо вона не завантажується в звичайному режимі і допомагає проаналізувати всі зміни.
Код:
javascript:(function()%7Bwindow.open(%27http://webcache.googleusercontent.com/search%3Fq%3Dcache:
%27%2BencodeURIComponent(location.href))%7D)()%3B
- Перевірка швидкості завантаження сторінок Google ― за допомогою сервісу PageSpeed Insights відбувається тестування швидкості завантаження відкритої сторінки.
Код:
javascript:(function()%7Bwindow.open(%27https://developers.google.com/speed/pagespeed/insights/
%3Furl%3D%27%2BencodeURIComponent(location.href))%7D)()%3B
- Перевірка для мобільних пристроїв Google ― тест оптимізації сторінки для перегляду з мобільного пристрою.
Код:
javascript:(function()%7B window.open(%27https://www.google.ru/webmasters/tools/mobile-friendly/
%3Furl%3D%27%2BencodeURIComponent(location.href))%7D)()%3B
- Перевірка мікророзмітки Google ― відправляє URL сторінки в сервіс «Інструмент перевірки структурованих даних», де користувач може перевірити коректність мікророзмітки встановленої на перевіреній сторінці.
Код:
javascript:(function()%7b window.open('https://search.google.com/structured-data/
testing-tool/u/0/?url='+encodeURIComponent
(location.href))%7d)();
SEO букмарклети для роботи з сайтом
Для безпосередньої роботи з сайтами використовуються інші скрипти, які значно спрощують виконання рутинних завдань.
- Підсвітка заголовків ― одним кліком виділяє все заголовки на сторінці (Н1-Н6) різними кольорами, за винятком прихованих в display: none. За допомогою повторного використання скрипта можна прибрати всі зміни.
Код:
javascript:(function()%7Bvar style%3Ddocument.getElementById(%27bstrongemhighlight%27)%3Bif(style)
%7Bstyle.remove()%3B%7Delse%7Bvar bStngEm%3Ddocument.createElement(%27style%27)%3BbStngEm.setAttribute(%27type%27,%27text/css%27)
%3BbStngEm.setAttribute(%27id%27,%27bstrongemhighlight%27)%3BbStngEm.innerHTML%3D%27h1:before
%7Bcontent: %5Cu0022H1 - %5Cu0022 !important%3B%7D h2:before %7Bcontent: %5Cu0022H2 - %5Cu0022
!important%3B%7D h3:before %7Bcontent: %5Cu0022H3 - %5Cu0022 !important%3B%7D h4:before %7Bcontent: %5Cu0022H4 - %5Cu0022
!important%3B%7D h5:before %7Bcontent: %5Cu0022H5 - %5Cu0022 !important%3B%7D h6:before %7Bcontent: %5Cu0022H6 - %5Cu0022
!important%3B%7D h1 %7Bbackground-color: pink !important%3B border: solid !important%3B padding: 2px !important%3B color: black
!important%3B%7D h2 %7Bbackground-color: orange !important%3B border: solid !important%3B padding: 2px !important%3B
color: black !important%3B%7D h3 %7Bbackground-color: yellow !important%3B border: solid !important%3B
padding: 2px !important%3B color: black !important%3B%7D h4 %7Bbackground-color: aquamarine !important%3B border: solid
!important%3B padding: 2px !important%3B color: black !important%3B%7D h5 %7Bbackground-color: lightskyblue
!important%3B border: solid !important%3B padding: 2px !important%3B color: black !important%3B%7D h6 %7Bbackground-color:
plum !important%3B border: solid !important%3B padding: 2px !important%3B color: black
!important%3B%7D%27%3Bdocument.getElementsByTagName(%27body%27)%5B0%5D.appendChild(bStngEm)
%3B%7D%7D)()%3Bvoid(0)%3B
- Words Counter ― скрипт створений для підрахування кількості слів і символів на виділеному фрагменті тексту.
Код:
javascript:(function()%7Bfunction f(d)%7Bvar t%3Bif(d.getSelection)t%3Dd.getSelection()%3Belse
if(d.selection)t%3Dd.selection.createRange()%3Bif(t.text!%3Dundefined)t%3Dt.text%3Bif(!t%7C%7Ct%3D%3D%27%27)%7Bvar
a%3Dd.getElementsByTagName(%27textarea%27)%3Bfor(var i%3D0%3Bi < a.length%3B%2B%2Bi)
%7Bif(a%5Bi%5D.selectionStart!%3Dundefined%26%26a%5Bi%5D.selectionStart!%3Da%5Bi%5D.selectionEnd)
%7Bt%3Da%5Bi%5D.value.substring(a%5Bi%5D.selectionStart,a%5Bi%5D.selectionEnd)%3Bbreak%3B%7D%7D%7D
return t%3B%7D%3Bfunction g(d)%7Bvar t%3Btry%7Bt%3Df(d)%3B%7Dcatch(e)%7B%7D%3Bif(!t%7C%7Ct%3D%3D%27%27)%7Bvar
fs%3Dd.getElementsByTagName(%27frame%27)%3Bfor(var i%3D0%3Bi < fs.length%3B%2B%2Bi)%7Bt%3Dg(fs%5Bi%5D.contentDocument)
%3Bif(t%26%26t.toString()!%3D%27%27)break%3B%7D if(!t%7C%7Ct.toString()%3D%3D%27%27)
%7Bfs%3Dd.getElementsByTagName(%27iframe%27)%3B
for(var i%3D0%3Bi < fs.length%3B%2B%2Bi)%7Bt%3Dg(fs%5Bi%5D.contentDocument)%3Bif(t%26%26t.toString()!%3D%27%27)
break%3B%7D%7D%7Dreturn t%3B%7D%3Bvar t%3Dg(document)%3Bif(!t%7C%7Ct%3D%3D%27%27)alert(%27please select some text%27)
%3Belse alert(%27Символов: %27%2Bt.toString().length%2B%27%5Cn
Символов без пробелов: %27%2Bt.toString().replace(/%5Cs%2B/g, %27%27,%27%27).length%2B%27%5Cn
Слов: %27%2Bt.toString().match(/(%5CS%2B)/g).length)%3B%7D)()
- Last Modified/If-Modifies-Since ― тестує коректність налаштувань заголовків Last-Modified / If-Modified-Since на відкритій сторінці.
Код:
javascript:(function()%7Bvar xhr%3Dnew XMLHttcodequest()%3Bvar url%3Dlocation.protocol%2B%27//
%27%2Blocation.hostname%2Blocation.pathname%2Blocation.search%3Bxhr.open(%27GET%27,url,true)%3Bxhr.send()
%3Bxhr.onload%3Dfunction()%7Bvar lm%3Dthis.getResponseHeader(%27Last-Modified%27)%3Bif(lm)
%7Blm%3DDate.parse(lm)%2B1%3Blm%3Dnew Date(lm).toString()%3Blm%3Dlm.replace(/%5E(.%7B3%7D)/gi,%27%241,%27)%3Bvar
xhr2%3Dnew XMLHttcodequest()%3Bxhr2.open(%27GET%27,url,true)%3Bxhr2.setRequestHeader(%27If-Modified-Since%27,
%27Tue, Oct 09 2018 17:10:30 GMT%27)%3Bxhr2.send()%3Bxhr2.onload%3Dfunction()%7Bvar c%3D(xhr2.status%3D%3D304)%3F%27✓
%27:%27— %27%3Balert(%27✓ Документ вернул заголовок Last-Modified%5Cn%27%2Bc%2B%27
Код ответа документа с заголовком If-Modified-Since: %27%2Bxhr2.status)%3B%7D%7Delse%7Balert
(%27— Документ не вернул заголовок Last-Modified%27)%3B%7D%7D%7D)()%3Bvoid(0)%3B
- Sitemap.xml ― після запуску скрипта в новій вкладці виводиться файл sitemap.xml відкритого сайту.
Код:
javascript:void(window.open(location.protocol %2B %27//%27 %2B location.host %2B %27/sitemap.xml%27))
- Robots.txt ― фахівець може побачити файл robots.txt поточного сайту в новій вкладці.
Код:
javascript:void(window.open(location.protocol %2B %27//%27 %2B location.host %2B %27/robots.txt%27))
- WHOIS ― дозволяє дізнатися основну інформацію про реєстрацію домену. Збір даних здійснюється через сервіс reg.ru.
Код:
javascript:(function()%7Bwindow.open(%27https://www.reg.ru/whois/%3Fdname%3D%27%2Blocation.host)%7D)()%3B
- Webarchive ― дозволяє подивитися історію сайту через сервіс web.archive.org.
Код:
javascript:(function()%7B window.open(%27http://web.archive.org/web/*/%27%2Blocation.href)%7D)()%3B
- Перевірка SSL сертифікату ― скрипт тестує правильність установки SSL сертифікату.
Код:
javascript:(function()%7Bwindow.open(%27https://www.ssllabs.com/ssltest/analyze.html%3Fd%3D%27%2Blocation.host)%7D)()%3B
- Перевірка коду відповіді у bertal.ru ― після запуску скрипт відправляє URL адреса відкритої сторінки на сервіс Bertal, щоб протестувати код відповіді сервера.
Код:
javascript:(function()%7B var form %3D document.createElement(%27form%27)%3B form.action %3D %27http://www.bertal.ru/index.php%27%3B form.target %3D %27_blank%27%3Bform.id%3D%27bertal_form%27%3Bform.method%3D%27POST%27%3Bvar url%3Ddocument.createElement(%27input%27)%3Burl.name%3D%27url%27%3Burl.value%3Dwindow.location%3Bvar subm%3Ddocument.createElement(%27input%27)%3Bsubm.type%3D%27submit%27%3Bsubm.id%3D%27bertal_id%27%3Bvar ua%3Ddocument.createElement(%27input%27)%3Bua.name%3D%27ua%27%3Bua.value%3D%27Mozilla/5.0 (compatible%3B YandexBot/3.0%3B %2Bhttp://yandex.com/bots)%27%3Bvar code%3Ddocument.createElement(%27input%27)%3Bcode.name%3D%27body%27%3Bcode.value%3D%27on%27%3Bform.appendChild(url)%3Bform.appendChild(ua)%3Bform.appendChild(code)%3Bform.appendChild(subm)%3Bvar body%3Ddocument.body%3Bbody.appendChild(form)%3Bsubm.click()%3Bbody.removeChild(form)%3B%7D)()%3B
Висновок
Букмарклет ― дуже корисна річ для будь-якого seo-фахівця. Принцип їх роботи нагадує звичайні плагіни, тільки користуватися ними можна в будь-якому браузері. Установка займає всього кілька секунд. Вони можуть виконувати як легкі, так і більш складні завдання, що сильно прискорює роботу по автоматизації процесів просування сайту і значно підвищує її якість.
