Повечето съвременни уебсайтове съдържат JavaScript, което ги прави динамични и интерактивни. Въпреки че ботовете на търсачките са доста интелигентни, те все пак може да не изобразяват голяма част от съдържанието на JavaScript, което се отразява на класирането на страницата.
Съдържанието на JavaScript зависи до голяма степен от начина, по който вашият уебсайт изобразява кода.
Например при изобразяване от страна на сървъра сървърът съдържа съдържанието на уебсайта. При поискване браузърът получава напълно изобразения HTML.
Въпреки това, при изобразяване от страна на клиента, JavaScript се изобразява от браузъра с помощта на DOM.
Третата опция за изобразяване е динамично изобразяване, при което съдържанието, изобразено от страната на клиента, отива в браузъра, докато съдържанието, изобразено от страната на сървъра, отива в търсачката(ите).
Техниките за изобразяване влияят върху начина, по който се изобразява JS и следователно върху класирането на страниците.
За да сте сигурни, че целият ви JS код на уебсайта се изобразява, трябва да следвате правилните практики за SEO на JavaScript. Но първо нека разберем какво е JavaScript SEO.
Съдържание
Какво е JavaScript SEO?
JavaScript SEO улеснява търсачките да обхождат и индексират JavaScript код (динамично съдържание) на уебсайт (или уеб страница). Google или всяка друга търсачка обработва JavaScript на три етапа, т.е. обхождане, изобразяване и индексиране. За да може Google да направи всичко това, съдържанието на JavaScript трябва да е подходящо за SEO, т.е. видимо и достъпно.
Как Google обработва съдържанието на JavaScript на страница
Ето стъпките, които Googlebot следва, за да обработи JavaScript:
- Извлича URL от опашката за обхождане чрез HTTP заявка
- Проверява файла robots.txt за URL адреси, които сайтът не позволява за обхождане
- Пропуска „забранените“ URL адреси, анализира отговора за други URL адреси и ги добавя към опашката за обхождане
- Поставя страниците на опашка за изобразяване, с изключение на тези, които са маркирани като неиндексирани
- Chromium изобразява страницата, изпълнява JavaScript и индексира страницата
- Анализира изобразения HTML отново за връзки
- Поставя URL адресите на опашка за обхождане
Кога Google не индексира JavaScript съдържание?
Google може да индексира JavaScript, когато е внедрен правилно. Например, ако някои от вашите JS и CSS файлове са скрити, Google може да не успее да обходи уебсайта правилно. По същия начин, ако имате връзки в необработения HTML, които не присъстват в изобразения HTML, Google може да пропусне тези връзки от обхождане или индексиране.
Освен това, ако JavaScript не е директно вграден в HTML, Google трябва да изтегли файла за изпълнение. Освен това търсачките може да имат кеширана версия на уеб страница (за по-добра производителност) и JavaScript на страницата може да не е синхронизиран с нея.
Тъй като всеки бит от кода на JavaScript трябва да се чете, прекомерната употреба на JavaScript може да забави скоростта на страницата или да причини грешки при изчакване.
Защо JavaScript SEO е важно?
JavaScript SEO е важно, защото засяга много елементи на страницата и фактори за класиране, които Google (или търсачките) сканират за SEO:
Елемент на страницата
Потенциален проблем със SEO
Възможно SEO решение
Изобразено съдържание
Търсачките (като Google) не могат да визуализират вашата страница, ако нейните ресурси са блокирани във файла robots.txt на вашия сайт. Освен това Google не може да индексира или изобразява JS и CSS файлове, които са блокирани или скрити.
Намалете JavaScript в основното съдържание на страницата, следвайте алтернативни подходи за изобразяване от страна на клиента, като изобразяване от страна на сървъра, динамично изобразяване, хибридно изобразяване (комбинация от страна на клиента и страна на сървъра)
Връзки
Ако някои връзки са вътрешни или JavaScript генерира връзки към URL адрес, когато потребителят кликне върху него, Google не може да открие такива връзки.
Използвайте anchor връзки с атрибута href, описателни anchor текстове за връзките. Псевдовръзките като тагове
Метаданни
Освен ако сайтът не използва Node.js пакети като vue-meta, търсачките може да обхождат същото или, по-лошо, да няма метаданни за всеки изглед или страница.
Използвайте Node.js пакети като react-helmet, vue-meta, react-meta-tags
Мързеливо заредени изображения
Роботът на търсачката не избира съдържание, което е маркирано за отложено зареждане. Търсачката не може да превърта за съдържание и следователно част от съдържанието може никога да не бъде изобразено.
Използвайте IntersectionObserver API, който разбира видимостта и позицията на DOM елементите, след като са налични. Можете също да използвате естествената функция за отложено зареждане на браузъра (Chrome).
Време за зареждане на страницата
Страница с много съдържание на JavaScript може да се зарежда бавно, което може да повлияе на нейното класиране при търсене.
Добавете вграден критичен JS код и отложете некритичния JS код, докато основното съдържание бъде изобразено, намалявайки общия JS код.
Най-добри практики за JavaScript SEO
Следвайки някои от най-добрите практики, можем да накараме търсачките да обхождат и представят страниците по-добре:
Добавете връзки и изображения според определени уеб стандарти
Добавете всички връзки, като използвате ahreftag, а не onclick, #pageurl или window.location.href=’/page-url. Google може лесно да обходи връзките и да ги последва.
<a href=”http://pctechbg.net.com”>Welcome to Geek world</a>
По същия начин добавете изображения, като използвате етикета img src, а не маркера img data-src:
<img src=”myimg.png” />
Предпочитайте изобразяване от страна на сървъра
Уверете се, че съдържанието на вашия уебсайт е достъпно на сървъра, освен в потребителския браузър.
Уверете се, че изобразеният ви HTML има цялото важно съдържание, което искате да покажете
Изобразеният HTML трябва да има правилното заглавие, мета роботи, мета описания, изображения, структурирани данни и канонични тагове.
Направете вашия JavaScript уебсайт SEO лесен за търсене
За да тествате внедряването на JavaScript SEO на вашата уеб страница, можете да следвате стъпките по-долу:
- Знайте колко JavaScript използва уебсайтът ви: За целта можете просто да деактивирате JavaScript в браузъра си. Ако не виждате много съдържание, това означава, че уебсайтът ви до голяма степен разчита на JavaScript.
- Проверете дали Googlebot получава цялото важно съдържание и етикети: Можете да използвате Удобен за мобилни устройства инструмент на Google за тестване или инструмента за тестване на богати резултати, за да проверите как Googlebot използва необработения HTML, за да рендира съдържание.
- Можете също да използвате разширения за хром като Преглед на изобразения източник за да разберете как JavaScript променя страницата и сравнява изходния HTML и изобразения.
- Можете да проверите за важни тагове (заглавие, мета описание и т.н.) в изобразения HTML, като използвате SEO Pro разширение за Chrome.
Заключение
В тази статия научихме как JavaScript може да направи обработката на SEO малко сложна и подходите за решаване на потенциалните проблеми, причинени от добавянето на много JavaScript към вашия код.
Също така видяхме някои най-добри практики и инструменти, за да направите вашия JavaScript уебсайт SEO лесен за оптимизиране. Други страхотни инструменти, които помагат на Google да разпознае и обходи вашето динамично съдържание, са Prerender, AngularJSи Huckabuy.
Можете също така да проверите някои от най-добрите начини за намаляване на времето за зареждане на уебсайта.
Приятно ви е да прочетете статията? Какво ще кажете за споделяне със света?