Изпратете запитване

Ще се радваме да обсъдим Вашия проект.

SEO · Технически

Половината ви сайт може да е невидим за Google

от Владислав Влаев ≈ 12 мин четене

Отваряте сайта си, всичко изглежда наред. Google обаче вижда друго — секции без текст, празни блокове и съдържание, което просто го няма. Не защото е блокирано, а защото се появява едва след действие на потребителя.

Открихме го върху собствения си сайт и после върху три клиентски. Проблемът е тих, не дава грешка никъде и се появява точно когато оптимизирате скоростта.

невидимо съдържание за google - секции скрити от javascript при зареждане

Накратко

  • Плъгините за скорост отлагат JavaScript до първо взаимодействие. Ботът не взаимодейства — за него скриптът никога не се изпълнява.
  • Ако анимациите ви започват от opacity: 0 и се показват със скрипт, съдържанието остава скрито при зареждане.
  • Проверката отнема минута — с изключен JavaScript или през инструмента за проверка на URL адрес.
  • Решението не е да махнете анимациите, а да ги обърнете: видимо по подразбиране, скрито само ако скриптът наистина се е изпълнил.
  • Същият капан важи и за менюта, табове, акордеони и листинги, зареждани с JavaScript.

01Какво точно се случва

Модерните сайтове разкриват секциите с плавно появяване при скрол. Схемата е почти винаги една и съща: в CSS елементът е с opacity: 0, а малък скрипт добавя клас, когато елементът влезе в екрана.

Работи безупречно — докато не се намеси оптимизация на скоростта. Плъгините за производителност имат настройка, която отлага изпълнението на JavaScript до първо взаимодействие на потребителя: движение на мишката, докосване, скрол. Дотогава скриптовете стоят като обикновен текст.

Защо това е проблем точно за търсачките

Googlebot не движи мишка и не докосва екрана. За него отложеният скрипт често никога не се изпълнява. Резултатът: елементите остават с opacity: 0, а секциите — визуално празни.

Съдържанието формално е в кода и Google по принцип може да го прочете. Но когато цели блокове се рендерират като невидими, рискувате оценката на страницата да се направи върху видимата ѝ част — а тя изведнъж е доста по-бедна.

Открихме го, докато проверявахме наша страница с автоматизиран браузър: три секции стояха с нулева прозрачност, защото скриптът чакаше взаимодействие, което ботът никога не прави.

Кога се появява най-често

  • След включване на „отложи JavaScript“Класика при оптимизация за Core Web Vitals. Печелите точки в теста и губите видимо съдържание.
  • При теми с вградени анимацииМного премиум теми ползват библиотеки за появяване при скрол със същия модел.
  • При съдържание, зареждано динамичноСписъци със статии, продукти или проекти, които се теглят след зареждането на страницата.
  • При елементи зад взаимодействиеТабове, акордеони и „покажи още“, чието съдържание съществува само след клик.

02Как да проверите за минута

Три метода, подредени от най-бърз към най-точен.

  1. Изключете JavaScript в браузъра

    В инструментите за разработчици отворете командното меню и потърсете „Disable JavaScript“. Презаредете. Това, което виждате, е приблизително минимумът, който получава ботът. Ако липсват секции — имате проблем.

  2. Вижте изгледа в Search Console

    Проверка на URL адрес → тествайте живия адрес → „Показване на тествана страница“ → раздел за екранна снимка. Google показва как е рендерирал страницата. Празните места се виждат веднага.

  3. Проверете с автоматизиран браузър

    Ако имате достъп до такъв инструмент, отворете страницата без взаимодействие и пребройте елементите с изчислена прозрачност под 0.5. При нас това беше проверката, която даде точния отговор: колко елемента остават скрити и кои са.

  4. Погледнете и изходния код

    Ако вашите скриптове са получили тип, различен от обичайния — например заради плъгин за отлагане — това е прекият знак, че няма да се изпълнят без взаимодействие.

Не се доверявайте само на „изглежда добре при мен“. Вие движите мишка в момента, в който отворите страницата — с това отключвате отложените скриптове, без да забележите.

03Правилното решение

Инстинктивната реакция е да се махнат анимациите или да се изключи отлагането на скриптовете. И двете са загуба: първото прави сайта по-беден, второто — по-бавен.

Правилният подход е да се обърне логиката. Съдържанието е видимо по подразбиране, а скриването се прилага само ако скриптът наистина се е изпълнил — и само за елементите, които още не са в екрана.

Как изглежда на практика

Вместо CSS правило, което скрива всичко и чака скрипт да го покаже, скриващият клас се добавя от самия скрипт. Ако той не се изпълни — по каквато и да е причина — страницата просто се вижда, без анимация. Ако се изпълни, поема само елементите под сгъвката, така че видимото при зареждане не мига.

ПодходАко JavaScript не се изпълниЕфект
CSS крие, скриптът показваСъдържанието остава невидимоРисково
Скриптът крие, после показваСъдържанието се вижда нормалноБезопасно
Без анимацияВижда сеБезопасно, но по-скучно
Само CSS анимации при скролВижда сеДобра посока, но с по-слаба поддръжка

Приложихме точно това върху три наши страници. След промяната автоматизираната проверка показа нула невидими елемента без взаимодействие — при запазени анимации за реалните посетители.

Същият принцип важи за всяко съдържание зад JavaScript. Списък от статии или продукти, зареждан динамично, трябва да има и статичен вариант в кода — иначе за търсачката страницата е празна.

04Съседният капан: синтактична грешка

Докато проверявахме това, попаднахме на нещо още по-тихо. Портфолиото на един сайт не показваше нито един проект — списъкът се генерираше с JavaScript и оставаше празен.

Причината: в един регулярен израз липсваха обратни наклонени черти. Изразът се затваряше по-рано, остатъкът от реда се четеше като коментар и целият скриптов блок спираше с грешка. Всичко останало в него — включително списъкът с проекти — не се изпълняваше.

Една липсваща наклонена черта може да изтрие цяла секция от сайта ви — без съобщение, без грешка в администрацията и без някой да забележи седмици наред.

Проверката за такива случаи е механична: извадете скрипта от страницата и го подайте на синтактичен анализ. Ако не е валиден, знаете го за секунда. Броенето на HTML елементи, което много хора правят след масови редакции, не хваща този тип повреда — тагът си е на място, счупено е съдържанието му.

Ако някога сте прекарвали съдържание през скрипт за търсене и замяна, проверете вградените си скриптове. Обратните наклонени черти са първото, което се губи при такива операции.

Изводът

Съдържание, което се вижда само след взаимодействие, е съдържание, което търсачката може и да не отчете. А тъй като никъде не се появява предупреждение, проблемът живее месеци.

Затова към всеки технически преглед добавихме две проверки, които преди не правехме: как изглежда страницата без изпълнен JavaScript и валиден ли е синтаксисът на вградените скриптове. И двете отнемат по минута и хващат неща, които никой отчет не показва.

Ако искате да проверим какво реално вижда Googlebot на вашия сайт — рендериране, отложени скриптове и съдържание зад взаимодействие — това е част от техническия одит. Свързано четиво: какво обхожда Google при вас.

Владислав Влаев
Основател на WP Site BG · WordPress и SEO от 2006 г.

Изгражда и поддържа WordPress сайтове от 2006 г. Днес се грижи за 46 сайта и работи по органичната им видимост — с месечен отчет в реални позиции. Данните в тази статия са от собствени проекти и сървърни логове. Повече за студиото.

Сподели:

Често задавани въпроси

Чете ли Google съдържание, генерирано с JavaScript?
Да, Google рендерира страниците и изпълнява JavaScript, но с ограничения. Рендерирането става на втори етап и не винаги веднага. Ако съдържанието зависи от взаимодействие на потребителя — движение на мишка, клик, скрол — то може изобщо да не бъде видяно.
Вреди ли настройката за отлагане на JavaScript на SEO?
Самото отлагане не е проблем и често подобрява Core Web Vitals. Проблем възниква, когато от отложения скрипт зависи видимостта на съдържание. Тогава ботът вижда празни секции. Решението е съдържанието да е видимо по подразбиране.
Как да проверя какво вижда Google на моята страница?
В Search Console използвайте проверката на URL адрес, тествайте живия адрес и отворете екранната снимка на рендерираната страница. За бърза проверка изключете JavaScript в браузъра и презаредете.
Трябва ли да махна анимациите при скрол?
Не. Достатъчно е да обърнете логиката: съдържанието да е видимо в CSS, а скриващият клас да се добавя от скрипта. Така при неизпълнен скрипт страницата остава четима, а анимацията работи за реалните посетители.
Какво да правя със съдържание в табове и акордеони?
Ако то съществува в кода на страницата и е скрито само визуално, обикновено се отчита, макар и с по-малка тежест. Ако се зарежда динамично след клик, за търсачката то на практика не съществува — тогава е по-добре да е в кода от самото начало.
Как да проверя дали вграден скрипт има синтактична грешка?
Отворете конзолата на браузъра — синтактичните грешки се показват при зареждане. За автоматична проверка извадете съдържанието на скрипта и го подайте на синтактичен анализ. Броенето на HTML елементи не хваща този проблем.

Проверете какво вижда Googlebot

Рендериране, отложени скриптове, съдържание зад взаимодействие и валидност на вградения код — намираме дефектите, които не се появяват в нито един отчет.

Заявете технически одит