Блог Андрея

 
 

Подводные камни при внедрении видео с ютуба на сайт

Читая о способах SEO оптимизации страниц в 2019-ом году можно легко найти информацию о том, что видео на сайте - это хорошо.

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

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

Вдохновившись всем прочитанным я решил размещать на страницах блога как можно больше статей содержащих мои (а в перспективе может быть и не только мои) видеоролики.

Однако, сегодня я решил минифицировать assets-контент (это css и js файлы) на страницах сайта и сравнить показания гуглоспидометра до и после. Надо сказать, что и до и после значения для выбранной для тестирования статьи (самой длинной) были примерно одинаковыми, то есть находились в зоне более 95, иногда добираясь до 100.

Сократив всё что можно и добавив lazy-load я уже собирался на сегодня плюнуть на это дело до окончания ремонта отпуска, но тут я по счастливой случайности затестил ссылку на список статей.

Результат обескуражил - цифра имела радикально красный цвет и равнялась 21.

Полез смотреть, тот ли используется шаблон для списка статей, что и для статей - оказалось, тот же.

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

Пришлось заменить код с ифреймами на нехитрый скрипт:

<script>
var s =  '<div style="max-width:100%">
	<iframe src="https://www.youtube.com/embed/fe6qPXoKttU?ecver=2&autoplay=1" allowfullscreen="allowfullscreen"  style="width: 100%;" width="640" height="360" frameborder="0"></iframe>
</div>
<div style="max-width:100%">
	<iframe src="https://www.youtube.com/embed/bWl69QqnJR0?ecver=2" allowfullscreen="allowfullscreen" style="width: 100%;" width="640" height="360" frameborder="0"></iframe>
</div>
<div style="max-width:100%" >
	<iframe src="https://www.youtube.com/embed/4y34IRqXB54?ecver=2" allowfullscreen="allowfullscreen" style="width: 100%;" width="640" height="360" frameborder="0"></iframe>
</div>';
  function showVideo() {
    document.getElementById('video').innerHTML = s;
    var vv = document.getElementById('videoWrap');
    vv.parentNode.removeChild(vv);
}
</script>
<img id="videoWrap" src="/i/cachev1.jpg" onclick="showVideo();" class="btn">
<div id="video"></div>
 
после чего я наконец сумел увидеть оценку 99 и даже иногда 100.

Надеюсь, это будет кому-нибудь полезно.

Кстати, теперь скорее всего надо как-то сообщить поисковой системе о том, что на странице есть видео, ведь ифрейма с видео на ней «по-умолчанию» больше нет.

Но это будет после ремонта отпуска .

Однако, почти вернувшись из отпуска я захотел оформить быдлоскрипт, который быстренько написал выше как компонент Vue 2.

В итоге получился компонент ознакомиться с которым вы можете на гитхабе.