SEO + Программирование

🔧 Инструменты для разработчиков:

• Форматирование кода — забудьте про кривой JSON, PHP или HTML. Вставляете код, нажимаете кнопку, и всё красиво.

• Генерация .htaccess — создание настроек сервера за пару секунд. Больше не нужно ломать голову над синтаксисом.

• Случайные имена в стиле Docker — никаких больше container123 или superproject1. Ваши контейнеры будут стильными!

• Генератор паролей — больше не тратьте время на изобретение сложных комбинаций.

🎨 Графика и визуал:

• AI-генератор изображений — создавайте картинки с помощью искусственного интеллекта. Подходит даже тем, кто не умеет рисовать.

• Оптимизация изображений — ужмите картинки без потери качества, чтобы ваш сайт грузился быстрее.

• Генератор favicon — идеально для ленивых фронтенд-разработчиков (да, я про нас 😅).

• QR-коды — не только для визиток, но и для Wi-Fi настроек, ссылок и прочего.

🔐 Инструменты безопасности:

• Проверка JWT-токенов — быстрое декодирование и проверка.

• Base64-конвертер — для шифрования и декодирования.

• Генерация хэшей: MD5, SHA1, SHA256 и даже SHA512. Всё на одном экране.

📊 SEO и тексты:

• Генератор robots.txt — задавайте параметры для поисковых ботов.

• DNS проверка — проверяйте настройки домена, чтобы не гадать, почему сайт не открывается.

• Анализ редиректов — полезно, если у вас сложная структура сайта.

• Генератор Lorem Ipsum — создавайте текст-заполнители для макетов и прототипов.

• Статистика текста — подсчёт символов, слов и других параметров текста.

🎁 Почему CoderKit — это находка?

1. Бесплатно. Ни копейки за функционал. Даже никаких ограничений "N раз в месяц".

2. Удобно. Лаконичный интерфейс, который не заставляет лезть в документацию. Всё просто.

3. Все в одном месте. Больше не нужно собирать инструменты с десятков сайтов. Здесь есть всё.

4. Подходит всем. Разработчикам, дизайнерам, безопасникам, SEO-специалистам — найдется что-то полезное для каждого.

Так что, друзья, если вы устали от рутинных задач, зайдите на coderkit.ru и попробуйте сами. Это место, где магия программирования становится реальностью, а рутина — щелчком пальца.

CoderKit уже облегчил мне жизнь. А как вы экономите время на мелочах? Пишите в комментариях, давайте делиться лайфхаками! 🚀

Первоначальная оценка по Google Page Speed была не очень - 36 на мобильных устройствах и 80 на компьютере.

Вроде бы на компьютерах выглядит всё адекватно, но не тут то было. Сейчас все поисковики смотрят скорость именно по мобильным устройствам и акцент делают именно на них.

Наша цель - довести показатели на мобилках до максимума.

Поехали проводить аналитику по шагам.

Шаг 1. Ставим расширение на Laravel для оптимизации запросов.

Идём на гитхаб и устанавливаем через композер расширение. Там всего пару кликов, каждый уважаемый программист сделает самостоятельно.

https://github.com/barryvdh/laravel-debugbar

После успешной установки при заходе на страницу (не забудьте в настройках в файле .env поставить APP_DEBUG=true) внизу слева страницы появится иконочка, при клике на которую откроется панель с кучей вкладок.

Шаг 2. Тюнинг базы и запросов.

Залазим во вкладку Queries и смотрим все запросы, которые есть на странице. Получается что-то такое.

Я использую PHPStorm для работы с базой. Вы же можете использовать что-то иное, это не принципиально.

На этой вкладке нужно проанализировать вызов запросов. Для начала я увидел, что при выводе списка статей в цикле вызывается ещё один дополнительный запрос. Сделал всё в 1 запросе. Это практически минус 12 запросов со страницы. Такие моменты нужно анализировать глазками и оптимизировать под каждый проект самостоятельно.

Далее я взял КАЖДЫЙ запрос и проанализировал план его выполнения. Вот пример:

Как видим здесь нет никаких индексов. Лечится это легко. Смотрим по каким полям у нас происходят условия и с какой сортировкой. Затем создаём индекс по этим полям и смотрим результат. Вот что получилось у меня:

Мы оптимизировали запрос с 17к до 207. И это только один пример.

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

Ещё я советую проанализировать таблицы, которые можно было бы разбить на партиции.

Пример: у нас есть аналитика по годам в одной таблице с 1 миллионом записей. Вы постоянно забираете аналитику на текущий год и выводите пользователю. Здесь так и напрашивается деление таблицы по годам, а может даже и по месяцам. В результате запрос будет идти по ограниченному набору данных, а не по всем данным за всё время.

Как видим уже есть сподвижки. Работаем дальше.

Шаг 3. Подрубаем кеширование.

Сайт грузит очень большое количество различных картинок, css'ов и js'ов. Пришла мысль всё это дело закешировать, чтобы быстро отдавать из оперативной памяти, а не лезть на жёсткий диск.

Для своих проектов я использую VarnishCache, т.к. уже привык и у него очень гибкая настройка.

Если вы используете Laravel, то есть вот такое расширение, чтобы подружить варниш с ларкой:

https://github.com/spatie/laravel-varnish

А вот здесь есть классное руководство по настройке:

https://freek.dev/663-using-varnish-on-a-laravel-forge-provisioned-server

А вот ещё ссылочка с конфигом. Если у вас другая версия варниша - поменяйте в урле версию и будет вам счастье.

https://github.com/mattiasgeniar/varnish-6.0-configuration-templates/blob/master/default.vcl

https://www.linkedin.com/pulse/managing-high-traffic-websites-varnish-laravel-david-ariens

Я добавил в кеш все js, css и картинки. Будьте крайне внимательны с настройкой. Можно, например, закешировать POST-запросы с формами или какие-то JSON-Ответы. Советую прогонять тестами сайты после добавления таких модулей.

Шаг 4. Анализируем сервер.

Здесь шаг очень простой. Нужно проанализировать утилизацию ресурсов на вашем сервере. Посмотрите сколько используется процессора, памяти, места. Я на этом этапе просто взял и купил сервер в 2 раза мощнее, дабы мне хватило ресурсов с лихвой.

Шаг 5. Анализируем JS + CSS.

У меня в проекте использовался дефолтно сборщик webpack и правила на нём были крайне простыми - берём все файлы и засовываем в единый файл bundle.

Представьте, что на КАЖДОЙ странице забираются все js-библиотеки и css. Это очень сильно усложняет вывод страницы, при этом делает работу программиста легче. Не надо думать что и когда подрубить. Просто подключаешь любую компоненту и она работает! Ну не прелесть ли. Но не для поисковиков.

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

Шаг 6. Поднимаем пул коннектов к базе.

Классным дополнением будет пул коннектов к базе. Для PostgreSQL я использую PgBouncer. Можете скачать по ссылке ниже.

https://www.pgbouncer.org/

Пул коннектов позволяет держать постоянные соединения с базой данных для уменьшения потерь при подключений к ней. Вот здесь можете почитать официальную документацию:

https://postgrespro.ru/docs/postgrespro/10/pgbouncer

Шаг 7. Оптимизация вёрстки для мобилок.

Я установил расширение на Laravel для отлова мобильных устройств. качал отсюда:

https://github.com/phattarachai/laravel-mobile-detect

Далее в коде для мобилок сделал другую вёрстку, более простую, чем в версии для компьютеров. Вырезал половину анимации, блоки с картой, ненужные слайдеры. Такой вариант поможет уменьшить DOM страницы и ускорит её отображение.

Результат оптимизации

Смотрим полученный результат

Можно ещё пытаться оптимизировать файлы и запросы. Я не использовал Reddis для кеширования запросов, но вы можете тоже использовать этот метод.

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

Буду благодарен за подписку на мой tg-канал, если материал был полезен.

https://t.me/itpriton

Перестройка сайта, счастье, и оглушительное падение

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

Я настроил потоки, оптимизировал страницы под поиск и почувствовал себя самым настоящим царем, ведь трафик сайта взлетел примерно до 5 тысяч уников в день, а AdSense, которым я монетизировал сайт, стал приносить примерно по 15-30 долларов в день. И это все практически на полном пассиве.

В голове стали генерироваться новые идеи, я строил грандиозные планы, но в один день все умерло. Я не смог зайти на сайт, на почте увидел сообщение от хостинга о требовании заблокировать сайт по решению Роскомнадзора. Еще позже я увидел сообщение от «Матч ТВ», в котором мне мягко намекнули, что я охренел и ворую их контент. Были попытки писать напрямую в Роскомнадзор, «Матч ТВ» и другие структуры, но ни одна из них не ответила.

Выводы

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

В качестве благодарности, если не сложно, подключайтесь к моей телеге, где на этот раз все безопасно: statsandmaps

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

*Специалистов по поисковой оптимизации ещё называют: сеошниками, поисковыми оптимизаторами, seo специалистами, seo-оптимизаторами и специалистами по ранжированию сайтов.

Регистрация в Яндекс.Вебмастере и Google Console

Перед оптимизацией новый сайт требуется зарегистрировать в “поисковых мастерских”, они помогают поисковым системам быстро проинформировать поисковики о выходе нового сайта, ускорять индексацию новых страниц и редакцию старых. В настоящее время, существует две наиболее популярных поисковых систем в мире Google и Яндекс, в расчет не берем закрытый поисковик у Китая. Регистрация в Яндекс.Вебмастере и Google Console проста, достаточно только почты и доступ к сайту.

Регистрация сайта в Яндекс.Вебмастера

Переходим на сайт Яндекс.Вебмастер (webmaster.yandex.ru), нажимает кнопку перейти, нажимаем на кнопку добавить сайт и вводим свой домен.

Сразу после добавления сайта в Яндекс.Вебмастер запросит подтверждения прав на сайт, сделать это можно несколькими способами:

• Загрузить html файл в корень сайта;

• Добавление кода метатега на сайт;

• Добавление DNS записи в домен (TXT — запись).

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

Регистрация сайта в Google Console

Регистрация сайта в Гугл Консоли схожа с регистрацией в Яндекс.Вебмастере, переходим на официальный сайт (https://search.google.com/) и в левом верхнем углу выбираем “добавить ресурс” после указываем доменный ресурс и жмём продолжить.

Домен был добавлен в аккаунт, но он ещё не подтвержден, как и в Яндекс.Вебмастере выбираем удобный способ подтверждение прав (файл в корень сайта, запись DNS, метатег) и после жмём подтвердить.

Поздравляем регистрация в поисковых мастерских” завершена, можно приступать к оптимизации сайта, на первых шагах достаточно следовать рекомендациям.

Первоначальная оптимизация сайта

Первоначальная поисковая оптимизация сайта — сниппеты, контент, изображение и скорость сайта. Реализация будет наиболее удобной, если разбить действия на этапы и расписать, что называется стратегией seo продвижения.

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

Формирование сниппетов для поисковой выдачи

Одна из важнейших задач при оптимизации, формирование сниппетов для поисковой выдачи. Классический сниппет состоит из двух компонентов: тайтл (заголовок) и дескрипшн (описание).

Сниппет — краткое содержание страницы с основным ключевым словом. На прямую влияет не только на позицию сайта в выдаче, но и на CTR страницы за счет своей привлекательности.

Существуют рекомендации по количеству символов:

• Заголовок до 65 символов;

• Описание до 185 символов.

Отвечая на вопрос почему так, то данное количество символов — видимая часть сниппета в поисковой выдачи.

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

Требуется учитывать, что на для большинства сайтов сниппет формируется автоматически, а данными действиями мы можем только дать рекомендации, в некоторых случаях он применяется автоматически.

Формирование структуры страницы

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

Такой вид структуры считается наиболее оптимальным для чтения и усвоения беглым просмотром.

Оптимизация изображений на странице

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

Для сжатия изображений с малой потерей качества существуют следующие сервисы:

• iloveImg;

• TinyPNG;

• Toolur;

• Imagify.

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

Проведение первоначального аудита

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

• Первый этап: внешний аудит;

• Второй этап: технический аудит;

• Третий этап: внутренний аудит.

Внешний аудит

Самостоятельный внешний аудит включает в себя анализ карт (скроллинга, кликов и ссылок) из Яндекс.Метрики, данный этап помогает понять логику просмотра клиентов, поменять местами интересные блоки для повышения статистики и избавить от нерентабельных блоков.Начать аудит можно с карты ссылок, таким образом вы сразу поймете у какой ссылки, какой вес и популярность, если вы увидите, что ссылка не имеет рентабельности, то ее лучше всего заменить или удалить

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

У ссылок так же имеется тепловая разметка, чем ярче выделена ссылка (красный) тем большим весом и популярностью она обладает, бледные ссылки обозначают, что ссылка не популярна и обладает меньшим весом.

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

У карты скроллинга имеется тепловая карта, она располагается в правом нижнем углу, а информация о среднем времени просмотра и количестве расположена в левом верхнем углу.

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

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

Карта форм используется индивидуально, там отображается количество визитов на форму, кликов и отправленных форм, таким образом можно понять на сколько удачно подобрана форма для страницы.

Технический аудит

Технический аудит предназначен для технической проверки составляющей сайта по seo, к такому виду аудита относятся наличие файлов robots.txt, sitemap.xml, .htaccess. Проверка на наличие файлов не точка в данном аудите, проверяется и правильность их составление, с работа способностью.

Файл robots.txt содержит правила индексации сайта для поисковых роботов. При помощи файла можно ограничить сайт для индексации полностью или частично.

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

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

Файл Sitemap.xml, файл с картой сайта и параметрами важности страниц с датами их публикации, сообщает поисковикам актуальную структуру сайта.

Составление файла sitemap.xml помогает быстрее индексировать важные страницы, а менее важные оставлять на последнюю очередь.

Для фиксации файла его следует отправить на переход в Яндекс.Вебмастер, после проверки файл сразу будет учитываться при индексации.

Файл .htaccess создан для настройки переадресации страниц для лучшей индексации и бесперебойной работы сайта, через файл можно настроить редиректы по определенным кодам.

Данный файл нельзя откладывать в долгий ящик, его следует настраиваться стразу при первой необходимости, для данного файла имеется свой синтаксис:

• ^ — начало строки;

• $ — конец строки;

• . — любой символ;

• — любое количество любых символов;

• ? — один определенный символ;

• [0-9] — последовательность символов, например, от 0 до 9;

• | — символ «или», выбирается или одна группа, или другая;

• () — используется для выбора групп символов.

Файл позволяет избегать 404 ответов у перенесенных страниц, не терять вес страницы путем перенаправления заходов по старому URL по 301 ответу на новый.

Пример группового перенаправления по 301 ответу, на данном примере мы переносим не только основную страницу, но и все которые включены в данный раздел.

В RewriteCond мы указали старый путь и отметили все вложенные страницы, а в RewriteRule мы указали новый путь для данного раздела, в конце указали какой ответ мы должны отдавать серверу 301.

Подведем итоги по продвижению сайтов

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

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