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

О чем должен помнить веб-разработчик, чтобы сделать всё по 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/10_instrumentov_dlya_seo_analiza_kotorye_stoit_ispolzovat'><h3>10 инструментов для SEO-анализа, которые стоит использовать</h3>Эта статья посвящена анализаторам сайта. Для каждого инструмента приведен краткий обзор его функциональных возможностей, а также скриншоты. После того, как вы прочтете эту статью, ваш набор инструментов для SEO-анализа должен существенно расшириться!</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/6_besplatnyh_cdn_dlya_uskoreniya_i_uluchsheniya_bezopasnosti_vashego_sajta'><img src=http://webarty.net/files/tmb/1481122711.jpg><h3>6 бесплатных CDN для ускорения и улучшения безопасности вашего сайта</h3>Улучшите два критически важных показателя вашего сайта — производительность и защищенность, воспользовавшись подходящей сетью доставки контента. Вряд ли кому-то нравится низкая скорость загрузки веб-страниц, которая может стоить миллионы из-за упущенных продаж</a><br><a href='http://webarty.net/service_and_optimisation/para_slov_o_testirovanii_prilozhenij'><img src=http://webarty.net/files/tmb/1478074208.jpg><h3>Пара слов о тестировании приложений</h3>Автоматизированное тестирование основывается на предположении, что программа используется так, как это задумали разработчики. Если полагаться только на автоматические тесты, то вскоре в коде появятся ошибки, и в то же время вы получите слабое представление о качестве интерфейса приложения</a> </div></div><div id='latest'> <div class='r_block'> <h2>Последние статьи</h2> <a href='http://webarty.net/service_and_optimisation/8_pravil_uspeshnogo_frilansera'> <img src="http://webarty.net/files/tmb/1418566112.jpg"/><h3>8 правил успешного фрилансера</h3>Мой последний пост — "Недостатки фриланса", нашел весомый отклик у аудитории хабра (37k просмотров, 380 комментариев). В конце него, я обещал написать новый пост на тему «Как стать успешным фрилансером», для сохранения баланса во Вселенной . </a><br><a href='http://webarty.net/service_and_optimisation/vybiraem_server_na_chto_obratit_vnimanie_chek_list'> <img src="http://webarty.net/files/tmb/1419176491.jpg"/><h3>Выбираем сервер. На что обратить внимание? Чек-лист</h3>Теме выбора сервера («они ведь у всех одинаковые») уделяется слишком мало внимания. Ниже я попытаюсь описать, почему не стоит этим пренебрегать, и на что действительно нужно обратить внимание, а также расскажу об особенностях, которые помогут упростить жизнь администратора и сэкономить деньги. Все ниже описанное является личным мнением, основанным на многолетнем опыте работы</a><br><a href='http://webarty.net/service_and_optimisation/7_navykov_effektivnyh_dizajnerov_moschnye_instrumenty_razvitiya_v_professii'> <img src="http://webarty.net/files/tmb/1529299141.jpg"/><h3>7 навыков эффективных дизайнеров. Мощные инструменты развития в профессии</h3>Молодому специалисту не нужно быть крутым дизайнером, чтобы получить работу в интересном проекте. Крутым дизайнером его сделает практика и регулярное общение внутри. Подбирая новых людей, hr-специалисты и арт-директора смотрят на другие вещи, о которых многие даже не задумываются.</a><br><a href='http://webarty.net/service_and_optimisation/kommercheskie_faktory_v_seo_internet_magazina_i_sajta_uslug'> <img src="http://webarty.net/files/tmb/1481118069.jpg"/><h3>Коммерческие факторы в SEO интернет-магазина и сайта услуг</h3>Подробнейший разбор коммерческих факторов, основанный на анализе через вебвизор поведения посетителей из Яндекс.Толоки, информации из официальных документов поисковых систем и выступлений их сотрудников на конференциях</a><br><a href='http://webarty.net/service_and_optimisation/5_tipichnyh_oshibok_pri_razrabotke_strategii_i_sposoby_borby_s_nimi'> <img src="http://webarty.net/files/tmb/1529299113.jpg"/><h3>5 типичных ошибок при разработке стратегии и способы борьбы с ними</h3>Многим кажется, что стратегия - такая суровая и тяжелая штука, необходимая только крупным корпорациям. Но это популярное заблуждение. Правильная стратегия нужна и маленькому стартапу, разрабатывающему приложение для редактирования фоток, и среднего размера веб-студии с двумя сотнями заказов в год, и крупному системному интегратору с миллиардными оборотами. Разумеется, стратегия для каждого из них будет различаться по масштабам и детализации</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>