Подборка полезных публикаций для веб-мастеров и заказчиков

О чем должен помнить веб-разработчик, чтобы сделать всё по SEO-феншую

18.07.2018 | habr.com

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

Так о чём же надо помнить, чтобы делать работу качественно, и SEO-специалисты были довольны вашей работой?

Подтягиваем общие знания

В первую очередь, пожалуй, следует подтянуть собственные знания по SEO (а может, и контекстной рекламе). Такие вещи в сфере интернет-маркетинга никогда не помешают, а вам дадут преимущество — делать всё осознанно, а не просто “как в ТЗ написано”. Кроме того, полезно и для самопроверки. Это — общая канва, на которую наслаиваются остальные пункты.
 

Закрываем ссылки от индексации


Если вы работаете с SEO-аудитами, наверняка вы знаете что такое внешние ссылки, циклические ссылки и висячие узлы. 

В общем случае: внешние ссылки — это те, которые ведут на другие сайты и получается уводят ваших посетителей в другое место; циклические ссылки — ведут на самих себя (тоже плохо); висячие узлы — например, ссылки на скачивание документов, которые никуда не ведут на другие страницы. Всем таким ссылкам мы добавляем атрибут ‘rel=”nofollow”’, которые даст поисковым роботам понять, что по этой ссылке идти не надо и учитывать её не стоит. Таким образом мы сохраняем вес страницы. Внешним ссылкам лучше вообще добавить target=”_blank” — так ваш сайт останется открытым у пользователя, и шанс на его возвращение будет больше.

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

Наиболее типичные внешние ссылки — ссылка на разработчика сайта в подвале, ссылки на соцсети, источники новостей, клиенты компании, телефоны, почты и т д.
 

Склеиваем зеркала


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


То есть существует три основных вида зеркал: по протоколу (http / https), по наличию слеша в конце страниц и по наличию заветных трёх букв “www”.

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

Если у вас работают сортировки \ фильтры \ постраничная навигация через GET-параметры, как правило, это тоже создает дубль для поисковой системы. Поэтому на такие страницы лучше хотя бы вешать склейку. Для этого в добавляется специальная ссылка . Такая ссылка говорит роботу, что эта страница — не основная, а основная находится по адресу в атрибуте href. Это позволит избавиться как правило от многих дублей ваших страниц.
 

Устанавливаем правильные мета-теги и микроразметку


Не менее важны при разработке мета-теги страниц. Свойства title и description должны быть заполнены как минимум у основных страниц (главная, о компании, контакты, каталог, услуги), лучше — заранее позаботиться о правилах формирования мета-тегов у добавляемых впоследствии категорий, товаров или новостей. В качестве title можно брать название, а в качестве description — добавлять к названию общую информацию в стиле .

В идеальном мире можно сразу внедрить микроразметку. Ну хотя бы Open Graph. Чем дальше, тем чаще встречается этот пункт в различных аудитах на внедрение, делается обычно быстро и просто, но может дать приличный value в плане отображения сайта и его привлекательности для клиентов. Про микроразметку можно почитать тут.

Также создаем стандартный robots.txt. Обычно на просторах интернета можно найти такой для CMS, которую вы используете — для всех он разный. Во многих CMS есть автоматический генератор, либо плагины, которые возьмут этот пункт на себя.
 

Оптимизируем скорость загрузки сайта


Одним из основных факторов привлекательности сайта для пользователя является скорость его загрузки. Это и понятно — ждать по 2 минуты загрузки страницы было нормально в 2000-х, но сегодня скорость потребления информации в разы выше, как и потребности пользователя. Если тебе приходится больше 5 секунд смотреть на прелоадер, это начинает раздражать. Часто в вопросе скорости загрузки SEO-специалисты ориентируются на инструмент Google PageSpeed Insights.

Основное, на что делается упор в этом аудите — оптимизация изображений. Сейчас просто неприлично заливать огромные картинки, никаких их не обрабатывая и не сжимая. Если ваша картинка весит 2-3 мегабайта, обычно это говорит о том, что ваша страница будет грузиться намного дольше, чем могла бы, и вы не заботитесь о своём продукте. Этот пункт сразу отберет у вашей страницы порядка 40 очков (если всё совсем плохо) в том же PageSpeed Insights.

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

Выглядит это примерно так:
 

ExpiresActive on ExpiresDefault "access plus 6 hour" ExpiresByType image/jpeg "access plus 7 day" ExpiresByType image/gif "access plus 7 day" ExpiresByType image/png "access plus 7 day" ExpiresByType image/x-icon "access plus 7 day" ExpiresByType text/css "access plus 6 hour" ExpiresByType application/javascript "access plus 6 hour" ExpiresByType application/x-javascript "access plus 6 hour" ExpiresByType application/x-shockwave-flash "access plus 6 hour" SetOutputFilter DEFLATE


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

Создаем страницу для 404 ошибки


Все несуществующие страницы должны отдавать код ответа 404. Многие о ней забывают, но на этой страницы рекомендуется иметь общие элементы навигации (шапка \ меню), чтобы пользователь мог с нее перейти на интересующую страницу, и несколько ссылок — обычно на главную и на предыдущую страницу. Важно, чтобы пользователь понимал, что попал на несуществующую страницу, но его при этом не сбивало и вовсе покинуть ваш сайт.
 

Не забываем про адаптивную / мобильную версию


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

Закрываем от индексации среду разработки


Если вы разрабатываете новый сайт или работаете на поддомене, необходимо закрыть его для индексации, чтобы не попасть под аффилирование (несколько одинаковых сайтов, из которых система определит основной, и только у него все будет нормально). Обычно это делается через специальный файл robots.txt, в котором вся информация закрывается от всех роботов.

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

Вишенка на торте (страницы пагинации)


Для желающих особо выделиться и перфекционистов — прорабатываем страницы постраничной пагинации. Список действий при этом достаточно простой:
 

  1. Склеиваем тегом canonical страницы с основной ().
  2. Добавляем в специальные мета-теги, которые скажут роботу, где находятся предыдущая и следующая страницы. Для этого используем (на всех страницах, кроме последней), и (на всех страницах, кроме первой). При этом если мы находимся на второй странице, к первой не должно добавляться параметров пагинации.
  3. На всех страницах, кроме первой, добавляем подписи “ — страница N” к тегам , <description>, <h1> (где N — номер страницы). Это поможет нам избежать еще целой серии дублирования контента.</li> </ol> <h2>Комментируем правильно</h2> <p><br /> Часто клиент решает убрать какой-либо баннер или просто блок, который пока не может наполнить. Но через полгода, а то и год “чудесным образом” о нем вспоминает и просит вернуть. Каким образом вы его достанете — это уже ваша проблема. Поэтому если надо скрыть какие то вещи, которые впоследствии могут оказаться опять нужными, лучше их закомментировать или сделать копию файла. Причем комментарий не должен быть вида <!----->, т.е. обычным html. Такой комментарий будет выводиться в коде страницы, его увидит поисковик и вполне возможно посчитает мусорным кодом. Кроме того, это увеличивает объем загружаемого html-кода. Поэтому лучше обернуть этот комментарий например в комментарий php. И не забывайте подписать, к чему он относится! Ибо не факт, что через год вы сами будете об этом помнить.<br />  </p> <h2>Итоговый чек-лист</h2> <p><img src=http://webarty.net/files/img/1529299149.png /></p> <p><br /> Итого. Можем составить примерный чек-лист для себя любимого:<br />  </p> <ul> <li>Закрываем циклические ссылки (меню, логотип, хлебные крошки), внешние ссылки (соцсети, источники, клиенты, телефоны, почты) и висячие узлы (документы для скачивания)</li> <li>Склеиваем зеркала (www, http, /), а также страницы с GET-параметрами (фильтры, сортировка)</li> <li>Проверяем, что все редиректы на сайте являются 301</li> <li>Устанавливаем правила для мета-тегов</li> <li>Микроразмечаем в максиразмерах</li> <li>Оптимизируем скорость загрузки сайта (сжатие ресурсов, кеш браузера, оптимизация изображений, минифицированные версии скриптов и стилей, скрипты внизу страницы)</li> <li>Не забываем проверять мобильную версию</li> <li>Закрываем от индексации среду разработки</li> <li>Оптимизируем страницы постраничной пагинации под поисковые системы</li> <li>Комментируем код не в html-формате, а в php либо бэкапим отдельно</li> <li>Не забываем создать страницу с ошибкой 404</li> </ul> <p>Это, пожалуй, основные моменты, которые следует держать в уме при разработке \ оптимизации сайта, чтобы познать дзен поискового продвижения (ну, насколько это можно сделать разработчику).</p> </div> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <!-- webarty_adaptiv --> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-5069960541624971" data-ad-slot="5846100282" data-ad-format="auto"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> <div id='soc'> <span>сохранить ссылку</span>   <span class='icon'><script src='http://webarty.net/plugins/soc/soc.js' type='text/javascript'></script></span> </div></div></div> </section> <aside class='rsect'> <div class='r_block' style='margin-top:25px;'> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <!-- 300x250 --> <ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-5069960541624971" data-ad-slot="3575682285"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script></div> <div id='similar'> <div class='r_block'> <h2>Похожие статьи</h2> <a href='http://webarty.net/service_and_optimisation/strategiya_ispolzovaniya_faqs_chast_2'><img src=http://webarty.net/files/tmb/1419616102.jpg><h3>Стратегия использования FAQs. Часть 2</h3>Информация – ваш друг. Топ менеджеры компании, часто упоминаемые в новостях, служащие, которые занимаются мониторингом вопросов к компании, задаваемых на форумах, в блогах и в службе поддержки, а также аналитики компании, они все хотели бы стать первыми, кто узнает о вновь возникающих серьезных проблемах. Создайте для этого им базу откуда они могут черпать информацию.</a><br><a href='http://webarty.net/service_and_optimisation/pravilnaya_strategiya_email_marketinga'><img src=http://webarty.net/files/tmb/1418228622.jpg><h3>Правильная стратегия Email-маркетинга</h3>Работа с электронной почтой очень важна для вашего дела. Для того, чтобы сделать email вашим союзником необходимо: Отвечать на письма! Отвечать на письма быстро! Отвечать на письма полностью! Отвечать на письма с грацией и стилем!</a><br><a href='http://webarty.net/service_and_optimisation/komu_mozhet_ponadobitsya_vashe_domennoe_imya'><img src=http://webarty.net/files/tmb/1418226892.jpg><h3>Кому может понадобиться ваше доменное имя.</h3>Практически у всех компаний с известными названиями, товарными знаками, наконец, у просто знаменитых людей в Интернете вполне могут возникнуть или уже возникли проблемы. К моменту решения о своем присутствии в Интернете вы можете обнаружить, что собственное доменное имя и сходные с ним уже заняты. Ниже приведен далеко не исчерпывающий перечень тех, кому может понадобиться ваше доменное имя. Действительно, великолепная семерка...</a><br><a href='http://webarty.net/service_and_optimisation/roboty_i_kak_s_nimi_borotsya'><img src=http://webarty.net/files/img/1418227935.jpg><h3>Роботы и как с ними бороться</h3>Очень важная тема – взаимоотношения с поисковыми и прочими роботами. Давно известно, что не всем роботам мы рады. Еще не так давно рунет лихорадило от лихих наскоков индексатора поисковой системы Webalta (спи спокойно, дорогой товарищ, недолгим было наше знакомство). На совести этого робота заблокированные сайты из-за слишком частых и многочисленных запросов без паузы...</a><br><a href='http://webarty.net/service_and_optimisation/5_tehnik_opredeleniya_prioritetov_dlya_it_komand'><img src=http://webarty.net/files/tmb/1521109450.jpg?=947><h3>5 техник определения приоритетов для IT команд</h3>Всегда ли просто определить приоритеты в задачах крупного проекта? А если в приоритете находятся пять срочных задач? Десять?</a> </div></div><div id='latest'> <div class='r_block'> <h2>Последние статьи</h2> <a href='http://webarty.net/service_and_optimisation/menedzher_proekta_s_tz_v_rukah_eto_eschyo_ne_priznak_upravleniya_proektom'> <img src="http://webarty.net/files/tmb/1529299267.jpg"/><h3>Менеджер проекта с ТЗ в руках — это ещё не признак управления проектом</h3>В любой компании рано или поздно стартует проект. Это может быть вывод нового продукта или услуги, создание новогодней рекламной кампании, внедрение программного обеспечения, запуск новой линии производства и т.д. Тогда настаёт момент выбрать менеджера проекта (координатора) среди сотрудников либо нанять специалиста и сделать всё в лучшем виде. Но выглядит весь этот процесс далеко не безоблачно.</a><br><a href='http://webarty.net/service_and_optimisation/prodvizhenie_internet_magazina_chto_pridetsya_ispravlyat'> <img src="http://webarty.net/files/tmb/1529299265.jpg"/><h3>Продвижение интернет-магазина: что придется исправлять</h3>Интернет-магазины на продвижении, по нашему опыту, оказываются одновременно и более перспективными, и более проблемными проектами, чем обычные сайты.</a><br><a href='http://webarty.net/service_and_optimisation/pyat_prichin_provala_seo_analiz_neudachnogo_opyta_prodvizheniya_s_primerami'> <img src="http://webarty.net/files/tmb/1529299257.jpg"/><h3>Пять причин провала SEO. Анализ неудачного опыта продвижения с примерами</h3>Вы легко можете что-то упустить в том случае, если не ожидаете проблем изначально. Прописанные и отработанные сценарии взаимодействия решают задачу, но только частично. Важно добиться высокого уровня доверия и понимания специфики процесса всеми участниками. А сделать это можно, только построив максимально прозрачную и понятную схему работы.</a><br><a href='http://webarty.net/service_and_optimisation/4_prichiny_prokrastinacii_tekstom'> <img src="http://webarty.net/files/tmb/1529299250.jpg"/><h3>4 причины прокрастинации (текстом)</h3>Когда нет стимула, понукающего выполнять работу, которая связана пусть даже в незначительными отрицательными эмоциями, мы попадаем в ситуацию, когда действует программа. Наше поведение в значительной степени неосознанно. Автоматизировано. Распознаются условия — возникает ответ. Если нет стимула, что обязывает работать, автоматически делам то, что вознаграждается позитивными эмоциями. </a><br><a href='http://webarty.net/service_and_optimisation/rezervnoe_kopirovanie_bolshogo_kolichestva_raznorodnyh_web_proektov'> <img src="http://webarty.net/files/tmb/1529299229.jpg"/><h3>Резервное копирование большого количества разнородных web-проектов</h3>Казалось бы, тема избитая – про резервное копирование сказано и написано многое, поэтому нечего изобретать велосипед, просто бери и делай. Тем не менее, каждый раз, когда перед системным администратором web-проекта встает задача настроить бэкапы, для многих она повисает в воздухе большим вопросительным знаком. Как правильно собрать бэкап данных?</a> </div></div> </aside> <footer id='footer' class='clearfix'> При использовании материала с сайта, ссылка на источник обязательна </footer> </div></div></body> <script> window.onscroll = function() {scrollFunction()}; function scrollFunction() { if (document.body.scrollTop > 500 || document.documentElement.scrollTop > 500) { document.getElementById("myBtn").style.display = "block"; } else { document.getElementById("myBtn").style.display = "none"; } } function topFunction() { document.body.scrollTop = 0; document.documentElement.scrollTop = 0; } </script> </html>