Техническая оптимизация – правильная настройка сайта для максимально качественного взаимодействия с поисковыми системами. Ее необходимо делать сразу после установки движка и во время работы с первичным заполнением сайта контентом. Сейчас я расскажу, на какие важные аспекты оптимизации нужно обратить внимание и сделать в первую очередь.
Содержание статьи:
Правильная организация структура сайта
Любой сайт должен иметь максимально удобную структуру. Как и люди, поисковые системы смотрят на сайт и оценивают удобство его использования. Любой интернет-ресурс должен иметь вложенность не более трех страниц. То есть с главной, максимум в три клика, у пользователя должно получиться добраться до любой страницы.
Наиболее правильной и простой структурой для информационного сайта будет:
Категории определяют разделы. Если сайт о различных болезнях, то категории могут быть такие: Кардиология, Неврология, Хирургия…
Для более сложных проектов, охватывающих больше информации, структура может быть:
Таким образом расширяется структура, но остается понятной и логичной. Пример, на этом сайте в категории Кардиология могут содержаться подразделы Болезни сердца и Болезни сосудов. Не запрещается размещать материал, относящийся к двум и более разделам.
Например, материал о Гепатите может находиться в категории Гепатология и Вирусология одновременно. Главное — соблюдать иерархию материалов. Построение правильной структуры продумывается на этапе планирования и сбора семантического ядра.
Правильная перелинковка страниц сайта
Более углубленный материал о перелинковке я уже готовлю и в скором времени выложу. Перелинковка – простановка ссылок внутри сайта для удобной навигации пользователей и передачи веса страниц.
Чтобы увидеть пример перелинковки, откройте любую статью в Википедии. Каждая содержит много ссылок на другие статьи. Есть даже шутка, что с любой статьи в Википедии в пять кликов можно добраться до статьи о Гитлере. Конечно, на вашем сайте в статье не должно быть по 20 ссылок на другие материалы, но 2-4 ссылки нужны.
Важным свойством перелинковки является передача веса на другие страницы. Когда все страницы будут связаны друг с другом, то вес распределиться равномерно и общие позиции будут расти. А когда продвигается одна конкретная страница, то тогда передается вес с других материалов на нее. Чтобы было более понятно, предположим, что нужно продвинуть страницу медицинского сайта с услугой «Осмотр педиатра». Для этого мы в блоге напишем несколько статей о детских болезнях и везде, где будем упоминать о необходимости осмотра педиатром, поставим ссылки на нашу услугу.
Добавить хлебные крошки и улучшить юзабилити
Хорошая структура ничто, если ее не видит пользователь. Во главу угла при создании сайта необходимо ставить его полезность для конечного человека и удобство использования. Если зашедший к вам на сайт, потеряется и не сможет найти для себя еще интересные материалы, значит, у вас проблемы с юзабилити.
Хлебные крошки – это навигационные элементы, которые показывают, где находится пользователь относительно всей структуры площадки. Эти элементы обычно размещаются перед заголовком статей и позволяют в один клик перейди на главную, в категорию размещения статьи или в ее подкатегорию.
Хлебные крошки можно реализовать с помощь простых плагинов или сделав правки в коде. Если они не предусмотрены используемым шаблоном. А вот над юзабилити придется поработать. Нужно правильно продумать меню. Сделать его визуально заметным и удобным для использования. Продумать разные мелочи, ведь даже обычная кнопка подъема вверх страницы намного облегчает жизнь пользователя, позволяя в один клик перейди к шапке, а не прокручивать уже прочитанный материал роликом.
Оптимизация кода сайта html, js, css, php
Сегодня пользователи стали нетерпеливыми и если сайт открывается хоть на секунду дольше, чем у конкурента, они уйдут к нему. Об этом в курсе и поисковые системы, использующие скорость загрузки как один из факторов ранжирования. Поэтому важно сделать сайт максимальнго быстрым. Этому не способствуют тяжелые картинки, невалидный код верстки, неправильные ответы сервера.
Оптимизация кода сайта
Сейчас я расскажу об оптимизации кода в общем, чтобы вы получили начальное представление. Также подготовлю материал, где подробно расскажу и сделаю пошаговое руководство по оптимизации кода. Итак, чтобы оптимизировать код и сделать сайт наиболее привлекательным для поисковых систем, нам нужно:
- Сжать картинки на, уменьшив вес, что сделает загрузку быстрее. Нередко неопытные вебмастера загружают на сервер картинки большого разрешения. Которые потом посредством CSS сжимаются для отображения. Верно же загружать картинки в том разрешении, в котором они и будут показываться на странице. Можно вручную сжимать картинки, пересохраняя их в Фотошопе, или воспользоваться одним из множества сервисов, умеющих сжимать картинки.
- Оптимизировать html, js и css. Нужно сделать код страниц максимально простым. Касательно html, то убрать все комментирование кода, сделать нормальный перенос по строкам. Для скриптов js размещать их после контента, чтобы значимая информация появлялась на экране раньше, чем загрузятся скрипты. Исключение – скрипт и нужен для отображения контента. Будет нелишним помесить все скрипты в один файл. CSS – использовать таблицы стилей для всего. Любой вывод информации должен в идеале происходить через CSS, а не загружаться каждый раз громоздким кодом.
- Настроить правильные редиректы, чтобы все страницы отвечали 200. А там, где нужен редирект с переносом веса страницы, например, при смене ее адреса, отдавался код 301. Исключить ошибки 5хх, а если они повторяются, то найти причину в хостере, сторонних плагинах и тому подобном и решить ее.
Заключение
Техническая оптимизация сайта – это процесс достаточно трудоёмкий и требующий специальных знаний. Но используя общепринятые рекомендации и инструкции, настроить сайт сможет даже тот, кто вчера впервые заливал движок на хостинг.
-
Читайте статьи по этой теме:
Мы выпустили новую книгу «Контент-маркетинг в социальных сетях: Как засесть в голову подписчиков и влюбить их в свой бренд».
Существует масса способов продвинуть сайт. И хороший сеошник знает все эти способы, ну, или хотя бы большую часть. Лучшие сеошники цепляются за каждую возможность, которая может положительно повлиять на ранжирование в поисковиках. Сегодня мы обсудим еще один способ улучшить показатели своего ресурса. Речь пойдет о
валидности кода
.
Для многих не новость, но поверхностно затронем что такое html и .
HTML
– аббревиатура HyperText Markup Language, что в переводе с забугорного, язык разметки . Это стандартный язык, на котором построено подавляющее большинство веб-страниц в интернете. HTML достаточно прост в изучении. В особенности если вам нужны лишь базовые знания для продвижения сайта. У языка разметки есть компаньон в лице CSS.
CSS
– это язык внешнего вида страниц, написанных на HTML. Расшифровывается как Cascading Style Sheets, что в переводе - каскадные таблицы стилей. CSS в изучении еще проще, чем язык разметки. Каскадные таблицы построены по принципу: атрибут – значение; атрибут – значение и так далее. Загвоздка в том, что этих самых атрибутов очень много и все их запомнить крайне тяжело. Плюсом будет знание английского, хотя бы широкий вокабуляр.
В чем важность
HTML и CSS для SEO
Работая с сайтами клиента либо с собственным сайтом, который вам сделали на заказ, нередко появляется необходимость что-либо поправить, подвинуть, изменить. И тут базовые знания html пригодятся.
Дальше код страницы должен быть валидным, иными словами, соответствовать принятым стандартам. Поисковые роботы эти стандарты знают и, сталкиваясь с невалидным кодом, могут неправильно распознать контент страницы и сделать плохие выводы. Вплоть до исключения страницы из индекса. Чтобы понять, правильно ли написан код страницы, есть ли в нем ошибки и поймет ли его поисковая система – нужно владеть базовыми знаниями html и css.
Что такое теги в HTML
Итак, что такое тег – это своеобразная метка или элемент языка, который сообщает браузеру, как нужно интерпретировать содержание того или иного элемента, чтобы правильно отобразить информацию на странице. Все они пишутся в треугольных скобках . Существуют парные теги и одиночные. Парные имеют второй, закрывающий тег со слешом внутри:
…содержание…
Закрывающий тег показывает браузеру, где оканчивается содержание.
Многие теги обладают свойствами, а те – значениями. Свойства прописываются внутри квадратных скобок открывающего тега, а значение указывается после знака = в кавычках “…”. Конструкция такая:
…Содержание…
Пример с нашего блога:
…много всего…
Главные три html тега, которые вы встретите в любом документе
- Первый это … - этот тег сообщает вашему браузеру, что дальше будет идти документ формата HTML.
- Вторым станет … - внутри данного тега расположена служебная информация для браузеров и поисковых машин, не видимая для пользователя. Исключение: … - заголовок страницы, о нем поговорим ниже.
- Третий - … - видимая для пользователя часть страницы. Внутри располагается весь контент: текст, картинки, видео и так далее.
Основные
SEO теги в HTML
Внутри содержатся два основных тега:
и .
В
, как уже говорилось, может входить достаточно много других тегов. Разберем основные из них, полезные для SEO:
1.
заголовок страницы, который виден, если навести на вкладку в браузере. Также тайтл возглавляет сниппет страницы в результатах поиска. Один из важнейших для
</span><span>SEO <a href="/solving-problems/kak-v-html-sdelat-optimizaciyu-vybiraem-luchshii-onlain-servis-po-szhatiyu-css/">оптимизации HTML</a>
</span> тегов.
</p>
<p>2. Тег <meta> получил название мета-тег, нас интересуют его свойства. <meta name=”description” content=”>Описание страницы, часто используются поисковиком в формировании сниппета. Иногда описанием сниппета становятся фрагменты текста на странице, более подходящие под запрашиваемую пользователем фразу.</p>
<p>Итак, мы указали два свойства.
</p>
<ul><li><span>name=”description” – означает, что следующее свойство
</span></li>
<li>content=”…”,
<span> является описанием. Тогда, когда
</span> content=”…”
<span>содержит текст самого описания.
</span></li>
<li><span>Обратите внимание – тег непарный.
</span></li>
</ul><p><img src='https://i0.wp.com/semantica.in/wp-content/uploads/2016/01/e90bcf84df.jpg' align="center" width="100%" loading=lazy></p>
<p>3. <link> отвечает за связь с внешними файлами, вроде шрифтов, а чаще стилей. Как и остальные теги, обладает рядом атрибутов. Подключить файл со стилями можно с помощью конструкции:</p><p>
<link rel="stylesheets" href="/адрес/документ.css">
</p><p>Конструкция, где rel= атрибут и его свойство “stylesheets” (что в переводе - таблица стилей)
</p>
<p>4. Атрибут тега <link> под названием Canonical. Конструкция такова:
</p><p>
<link rel="canonical" href="http://site.ru/statja_nomer_odin">
</p><p>Суть в том, что указав канонический адрес страницы, мы можем обезопасить себя от нежелательных дублей. К примеру, на вашем сайте есть две очень похожие страницы, либо вообще одинаковые. Но обе нужны. Вы можете написать в каждой странице канонический (главный) адрес. Тогда поисковые системы будут оценивать только одну страницу, адрес которой будет указан в конструкции выше.
</p>
<h2><span>Теги в теле документа <body>...</body>
</span></h2>
<p>Как уже говорилось, в <body> находится видимая для посетителя информация. Перейдем сразу к главному:
</p>
<ol><li><span>Теги h1...h6. Это заголовки страницы, которые разбивают текст по смыслу. Поисковые роботы любят, когда страница структурирована и оформлена. Используйте на страницы только один заголовок <h1>...</h1> и он должен быть первым (выше всех) на странице. Последующие подзаголовки можно использовать несколько раз, но важно, чтобы они шли по очереди. От <h2> до <h6>. Чаще всего Используют всего три типа заголовка: <h1>, <h2> и <h3>.
</span></li>
<li><span>Оформление текста. Для того, чтобы разбить текст на параграфы используйте тег .
</span></li>
<li><span>Выделить жирный текст <strong>
</span><b>текст текст текст
</b></strong>
</li>
<li>Курсив: <em>
<i><span>текст текст текст
</span>
</i></em>
</li>
<li><span> начало и конец маркированного списка.
</span></li>
<li><span> строка списка.
</span></li>
<li><span> нумерованная строка.
</span></li>
<li><span>Картинки. Чтобы добавить изображение нужно воспользоваться тегом <img> и его атрибутами src и alt. Конструкция такова:
</span></li>
</ol> <img src='https://i1.wp.com/site.ru/content/kartinka_1.jpg' loading=lazy>
<p>
текст ссылки
</p><p>*Нежелательные ссылки можно закрывать атрибутом rel=”nofollow”, добавив его к другим атрибутам. В таком случае робот не будет переходить по этой ссылке. Добавив атрибут rel=”noindex”, вы скажите поисковику, что данная ссылка не должна индексироваться поисковым роботом.
</p>
<p>10. Один из самых распространенных тегов <div>...</div>. Это слой, которому можно указать определенные параметры отображения на странице с помощью атрибута class=”значение”. А значит, все что расположено между <div> и </div> будет перенимать эти параметры.
</p>
<p>Несколько важных моментов, не вошедших в основную статью:
</p>
<ul><li><span>Всегда закрывайте парные теги. Не закрытие какого-либо тега может привести к тому, что весь последующий код не будет понятен поисковому роботу.
</span></li>
<li><span>Следите за правильной вложенностью тегов. Иногда это может выглядеть запутано. Просто придерживайтесь принципа:
</span><p> <i>
</i>
</p><p>Открылся первым - закрылся последним.</p></li>
<li><span>Следите, чтобы в html коде не было стилей. Обычно они закрадываются в теге <style>...</style> или атрибутом в других тегах style=”color:...” и так далее. Если такие строки встречаются в коде вашего клиента или вашего сайта - выносите стили в отдельные файлы.css и подключайте их с помощью конструкции:
</span></li>
</ul> <link rel="stylesheets" href="/адрес/файла.css"> между тегами <head>...</head>
<p>Между тегами <head>...</head></p>
<ul><li><span>Пишите все теги и атрибуты маленькими буквами
</span></li>
<li><span>Не используйте много выделений текста, вроде <strong> и <italic>
</span></li>
<li><span>Заполняйте атрибут alt=”...” у картинок в теге <img>
</span></li>
<li><span>Используйте понятные названия картинок. Например,
</span>
<img src='https://i2.wp.com/site.ru/ponyatnoe-nazvanie-kartinki.jpg' loading=lazy></li>
<li>Проверяйте
<span>валидность кода html
</span><span> на наличие ошибок с помощью сервисов, вроде validator.w3.org
</span></li>
<li><span>Следите, чтобы ссылки навигационного меню были оформлены обычным тегом <a>
</span></li>
<li><span>Всегда следите, чтобы была последовательная структура заголовков и на страницы был только один <h1>
</span></li>
</ul><p><i><span>Изучение html и css - процесс достаточно длительный. В этой статье я постарался понятным языком изложить основные моменты на которые нужно обращать внимание при продвижении сайта. Пользуйтесь советами, читайте код и делайте правильные выводы, цепляясь за очередную возможность получить плюсик в карму сайта от поисковиков.
</span>
</i></p>
<p>Приветствую друзья, из данной статьи вы узнаете - как очистить HTML код, как оптимизировать картинки, как правильно оформить и оптимизировать метатеги, как сделать сайт быстрее, узнаете для чего нужно оптимизировать скрипты находящиеся на сайте.
</p>
<p>Одним из важных мероприятий по внутренней оптимизации сайта является <b>оптимизация кода страниц
</b>. За счет этого можно улучшить общее качество ресурса, увеличить скорость загрузки страниц, повысить эффективность работы интерактивных функций.</p>
<h2><span>Валидация и стандартизация HTML
</span></h2>
<p>Принципиально важно для поискового продвижения и обеспечения положительного пользовательского опыта, чтобы сайт мог одинаково хорошо работать в любых браузерах, на разных операционных системах, в мобильных и стационарных компьютерах.</p>
<p>Для достижения общей унификации все сайты разрабатываются на основе стандартных версий HTML. Наиболее актуальными сегодня являются версии HTML 4.1 и HTML5. Последняя хотя все еще и находится в стадии разработки, в сети уже опубликовано огромное количество таких сайтов.</p>
<p>Все самые популярные браузеры – <i>Opera, <a href="/the-types-of-wireless-networks/kak-ubrat-rekomendacii-v-chrome-udalenie-google-chrome-na-android-otklyuchenie-v-hrome-na/">Google Chrome</a>, <a href="/bluetooth-setup/nastroiki-konfidencialnosti-tor-browser-poyavyatsya-v-firefox-ustanovka/">Mozilla Firefox</a>
</i> в своих <a href="/wi-fi/kakaya-poslednyaya-versiya-gugl-hroma-hochu-poslednyuyu-versiyu-google-chrome/">последних версиях</a> используют поддержку нового гиперязыка HTML5. Важность использования HTML5 для создания сайтов еще и в том, что <a href="/configuring-wi-fi/programma-podklyucheniya-fly-ff177-k-kompyuteru-komp-ne-vidit-telefon-flai-podklyuchenie-mobilnogo-tel/">мобильные компьютеры</a> на базе операционной <a href="/wi-fi/samyi-modnyi-launcher-na-android-samye-luchshie-funkcionalnye/">системы Android</a> не поддерживают технологию Flash и пользователи не смогут просматривать видео в формате SWF.</p>
<p>Сайты на основе HTML5 способны воспроизводить видео без необходимости загрузки и установки <a href="/the-device/tips-tricks-in-adobe-illustrator-tryuki-v-illyustratore-vozmozhnosti-sozdaniya-grafiki-v/">Adobe Flash</a> Player. Тенденция к отказу от флеш расширяется, поэтому для нормальной работы сайтов полезно постепенно отказываться от использования флеш-видео и анимированных баннеров этого формата.</p>
<p><b>Проверить валидность HTML-кода сайта
</b> можно бесплатно на официальном сайте Консорциума Всемирной Паутины, вот например этот
</p><p>validator.w3.org</p><p>Встроенные валидаторы имеются в хороших конструкторах сайтов и системах управления контентом.</p>
<h2>Очистка HTML-кода
</h2>
<p>В процессе создания и последующего редактирования веб-страниц программист второпях оставляет на страницах технические заметки, комментарии, забывает удалять лишние теги. Все это не только замедляет работу сайта, но и снижает <a href="/configuring-wi-fi/tyunery-dlya-cifrovogo-televideniya-dvb-t2-soni-luchshie-pristavki/">функциональные возможности</a>. За счет простого <b>удаления HTML-мусора
</b> можно ускорить загрузку страниц сайта буквально на 35%.</p>
<p>К вредоносному мусору относятся также битые, неработающие ссылки, которые никуда не ведут, потому что реципиент был удален. Такие ссылки очень не нравятся поисковым системам. Наличие битых ссылок может негативно отражаться на поисковом провождении ресурса.</p>
<p><img src='https://i1.wp.com/babosik.ru/uploads/posts/2015-04/1429084149_ssylki.jpg' width="100%" loading=lazy></p>
<p>Поскольку битые ссылки имеют свойство время от времени возникать сами собой, необходимо регулярно проводить их поиск и удаление. Это относится как к внешним, так и внутренним ссылкам. Если система управления контентом не имеет опции поиска битых ссылок – можно воспользоваться бесплатными онлайн-сервисами.</p>
<p>http://creatingonline.com/site_promotion/broken_link_checker.htm</p>
<p>http://anybrowser.com/linkchecker.html</p>
<h3><span>Оптимизация графического контента
</span></h3>
<p>Важно уделять внимание оптимизации графики, поскольку для публикации на страницах сайта все изображения должны быть соответствующим образом обработаны.</p>
<ul><li>Для публикации фотографий целесообразно использовать <a href="/security/redaktirovanie-pdf-v-jpg-onlain-kak-perevesti-pdf-v-jpeg-format-kak-konvertirovat/">формат JPEG</a>, поскольку этот тип файлов обеспечивает <a href="/security/professionalnye-printery-hp-designjet-s-fotograficheskim-kachestvom/">лучшее качество</a> при минимальном весе.</li>
</ul><ul><li>Для сохранения картинок, для которых качество не очень важно, можно выбрать <a href="/bluetooth/perevod-iz-png-v-jpg-onlain-kak-skonvertirovat-izobrazheniya-v/">формат PNG</a> при весе файлов не более 100 или 200 КБ.</li>
</ul><ul><li>Все <a href="/general-information/kak-iz-vizio-peremestit-v-vord-kak-konvertirovat-peredelat/">графические файлы</a> нужно, по современным стандартам, сохранять в сжатом виде и в отдельной директории на сервере, но не внедрять в веб-страницы.</li>
</ul><p>После редактирования страницы, содержащей изображения, необходимо проверить скорость загрузки. Страница должна появиться в браузере не более чем в течение пяти секунд. Иначе показать отказов резко возрастает.</p>
<p>Все картинки и фотографии имеют метатеги, которые необходимо оптимизировать добавлением ключевых слов и этим улучшить их поиск в интернете. Основное требование к оптимизация метатегов изображений – уникальность. У всех картинок должны разные названия, всплывающие подсказки и альтернативные тексты.</p>
<h3><span>Метатеги веб-страницы
</span></h3>
<p>Метатеги для разных страниц сайта должны быть в обязательном порядке уникальными. При обнаружении дублированных тегов поисковая система их склеивает и часть страниц таким образом не будет проиндексирована. Эксперименты показали, что уникализация метатегов сайта улучшает ранжирование и повышает посещаемость примерно на 18%.</p>
<h3><span>Особое внимание следует уделить оптимизации тегов Title и Description
</span></h3>
<ol><li>Заголовок страницы должен состоять не более чем из разрешенного поисковой системой количества символов и содержать главное ключевое слово.</li>
<li>Оптимальное количество слов для заголовка – шесть.</li>
<li>Описание страницы оформляется как своего рода продающий текст для <a href="/security/posadochnye-stranicy-i-tochki-vhoda-v-chem-raznica-prodvizhenie-bankovskih/">посадочной страницы</a> и обычно составляется из двух коротких предложений. В первом предложении содержится главное ключевое слово, а во втором – дополнительное.</li>
<li>Метатеги Keywords не очень важны, но должны быть на всякий случай.</li>
</ol><p>Я у себя например вообще удалил из самого движка часть кода который отвечает за метатеги.</p>
<h3><span>Оптимизация программных элементов – скриптов
</span></h3>
<p>Принципы оптимизации скриптов такие же, ка для графики – на странице не размещать, сохранять в сжатом виде в особой директории.</p>
<p>Ваша страница должна быть чистой, робот заходящий на ваш сайт должен видеть только чистую страницу, на которой будет только статья, ну и необходимые метатеги. Поэтому нужно все скрипты, счетчики и т.д. поместить в отдельный файл.</p>
<h3><span>Оптимизация текстового контента
</span></h3>
<p>SEO-специалистам уже давно известно, что наряду с внешними и внутренними факторами ранжирования сайтов в <a href="/the-device/skachat-i-ustanovit-poslednyuyu-versiyu-google-chrome-ot-poiskovoi/">поисковых системах</a> на позиции в SERP’е влияют и т.н. поведенческие (пользовательские) факторы. Несмотря на это последним уделяют недостаточное внимание. Причин этому множество. Во-первых, не все SEO-компании, особенно занимающиеся «конвейерным» клиентским продвижением, могут выделить ресурсы на анализ влияния поведенческих факторов, мониторинг показателей отказов и количество просмотров страниц, анализ трафика, идущего на сайт и т.д. Во-вторых, специалисты среднего уровня до сих пор работают по принципу «сделал — купил ссылки — жду позиции». В третьих, некоторые оптимизаторы не уделяют внимание пользовательским факторам по той причине, что не считают это нужным, ленятся или просто не знают о них.</p>
<p>Тем не менее, на оптимизаторских конференциях представители Яндекса дают понять, что роль поведенческих факторов становится для поисковой системы все более значимой. Среди множества критериев, влияющих на эти факторы, является <b>оптимизация кода страниц сайта
</b>, которой, к сожалению, очень часто не уделяют внимания при организации продвижения интернет-ресурсов.</p>
<h2><b>Зачем это нужно?
</b></h2>
<p>Ответ прост. Оптимизация кода не только ускорит загрузку страниц, но и сделает сайт более дружелюбным к поисковым системам — код станет чистым и красивым, а его элементы будут располагаться в нужных местах. Кроме того, изначально скептически воспринятое оптимизаторами в ноябре 2009 заявление Google о том, что скорость загрузки web-документа является одним из факторов ранжирования, только подтверждает тот факт, что оптимизацией кода страниц следует заниматься. Тем более, что на этот фактор оптимизатор может влиять сам.</p>
<h2><b>Составляющие оптимизации кода
</b></h2>
<p>Ни для кого не секрет, что поисковые роботы не видят дизайн страницы — они читают её код, причем делают это также как и человек — сверху-вниз, слева-направо. Информации, находящейся вверху кода тех или иных элементов, поисковые системы дают больший приоритет. Таким образом, при SEO-вёрстке наиболее важные элементы или страницы следует располагать выше второстепенных элементов. Ниже даны некоторые рекомендации для оптимизации кода страниц, которые позволят сделать кампанию по его продвижению в поисковых системах более эффективной.</p>
<h3><b>1. Title,
</b><b>Description и
</b><b>Keywords — располагаем сразу после тега <
</b><b>head>.
</b></h3>
<p>На поведенческие факторы существенное влияние может оказать некроссбраузерная верстка. Сайт должен одинаково хорошо отображаться во всех современных браузерах при разных разрешениях. Довольно часто можно увидеть, когда браузер <a href="/bluetooth/nastroika-i-ispolzovanie-veb-brauzerov-nastroika-i-ispolzovanie/">Internet Explorer</a> некорректно отображает содержимое сайта, причем отличия с Firefox и Opera кардинальные. Если на таком сайте процент пользователей IE составит 20%, то вероятность того, что показатель отказов значительно увеличится, возрастает. Пользователь не проведет много времени на таком сайте, вероятно, сразу же закроет вкладку и никогда не вернется на сайт повторно. Верстку сайта следует поручать профессионалам, для которых понятия «валидность» и «кроссбраузерность» — не пустые звуки.</p>
<h3><b>8. Оптимизация картинок под
</b><b>web.
</b></h3>
<p><img src='https://i2.wp.com/seonews.ru/upload/7_skrin_ivan-artasov.jpg' align="left" height="100" width="200" loading=lazy>Этот пункт относится больше к юзабилити, но не сказать о нем нельзя. Некоторые вебмастера не уделяют оптимизации картинок под web должного внимания. Тем не менее, каждый пользователь интернета хоть раз попадал на сайт, где текстовый контент загружался быстро, а графические изображения открывались с огромным трудом.</p>
<p>Выяснялось, что дело не в не самой быстрой скорости подключения к интернету, а в том, что кажущиеся мини-картинки на самом деле имеют огромные разрешения, но вместо того, чтобы сжать изображение в <a href="/solving-problems/osnovnye-graficheskie-redaktory-vektornoi-grafiki/">графическом редакторе</a>, верстальщик в коде страницы прописал атрибутам картинок «width» и «height» значения, в 15 раз, меньшие, чем реальное разрешение фотографий. Иногда доходит до того, что в веб-документе используют изображения в формате.bmp, как известно, имеющие гораздо большие объёмы в сравнении с идентичными изображениями в форматах.jpg или.gif. В качестве примера можно привести страницу о популярном сейчас биатлоне — http://magdalena-neuner.narod.ru/nowfoto.html . Чтобы посмотреть в подгружаемом все фотографии, пользователь вынужден будет скачать порядка 20 Мб трафика, поскольку 90% изображений там выполнено в bmp-формате.</p>
<h2><b>Как быть и что делать в нынешних условиях?
</b></h2>
<p>В большинстве случаев, на практике выходит так, что клиент заказывал создание сайта в одной веб-студии или у фрилансеров (к сожалению, данные категории не всегда имеют правильное и современное представление о SEO-верстке), а продвигать решил в одной из SEO-компаний, которые, как правило, такие проблемы не решают и продвигают то, что есть своими «конвейерными» методами. В успешной SEO-кампании в Яндексе в нынешних реалиях мелочей не бывает. Поэтому специалисты, оказывающие профессиональные услуги продвижения сайтов по высококонкурентным запросам обязательно должны иметь в своём арсенале отдел программистов и верстальщиков, а также оказывать и услуги по созданию сайтов. Заказчикам, в свою очередь, желательно ориентироваться на подрядчиков, успешно занимающихся и созданием, и продвижением сайтов одновременно или, как минимум, имеющих хорошую техническую поддержку.</p>
<p>Стоит отметить, что оптимизация кода страниц не гарантирует повышения позиций по ключевым запросам, но не уделять этому внимания в условиях MatrixNet и поведенческих факторов нельзя, а работать над этим нужно уже сейчас.</p>
<i>
</i>
<p>Оптимизировать код HTML и каскадные таблицы стилей (CSS) нужно для того, чтобы ускорить процесс загрузки сайта и контента, размещенного на нем. Экономия времени и трафика, в целом, спустя долгий срок после оптимизации, получится существенной, даже если внешне изменение скорости будет не очень заметно.</p>
<h2><span>Оптимизация HTML-кода
</span></h2>
<p>Для того чтобы HTML-код способствовал быстрой загрузке сайта, он должен соответствовать нескольким условиям:</p>
<ul><li>Быть простым и информативным. Проверив его на валидность, нужно исправить ошибки, чтобы ботам было легче анализировать его. Код должен четко представлять структуру страницы.</li>
<li>Основные составляющие страниц, такие как заголовки, указатели, блоки информации должны быть легко и быстро определяемы.</li>
<li>Освобождение кода от лишних сведений, вынесение их в <a href="/equipment/skachat-programmu-dlya-snyatiya-skrinshota-s-ekrana-net-vozmozhnosti/">отдельные файлы</a> (например, можно вынести CSS и JS), повысит скорость загрузки, что также упрощает работу ботов.</li>
</ul><p>Добившись выполнения этих условий, сайт можно сделать более быстрым, удобным и повысить эффективность индексации его ботами поисковых систем.</p>
<p><span class="pK4wAjzpJ_E"></span> <span class="pK4wAjzpJ_E"></span></p>
<h2><span>Уменьшение объема кода и оптимизация CSS
</span></h2>
<p>Сделать код сайта проще можно, уменьшив его объем. Для этого нужно выполнить несколько операций.</p>
<p>Прежде всего, следует избегать флеш-технологий, JavaScript, фреймов, текста, представленного картинкой. Все элементы, какие возможно, следует оформить в отдельных, внешних файлах (например, CSS и JS, как уже отмечалось выше). Помогут для оптимизации кода специальные плагины. К примеру, можно установить плагин Autoptimize, который автоматически оптимизирует код HTML, CSS, JS (если поставить соответствующие галочки). Необходимо настроить грамотную и удобную навигацию по сайту, которая будет понятна пользователям и корректно распознаваема поисковиками. Это увеличит скорость, качество загрузки и индексации сайта.</p>
<p>Что касается оптимизации CSS, то ее можно сделать самостоятельно или доверить это специальному ресурсу или программе. Ручная оптимизация – трудоемкий и длительный процесс, к тому же можно пропустить какие-то ошибки. Программа или сервис для оптимизации качественнее устранят недостатки, но могут нарушить некоторые функции, которые работали на сайте, и после проверки может некорректно отображаться контент, поэтому их работу нужно корректировать.</p>
<p><img src='https://i0.wp.com/znet.ru/wp-content/uploads/2018/01/31fb66eaf90f42ca76368845de2a1bdc54c3d812.png' width="100%" loading=lazy></p>
<p>Некоторые способы улучшить структуру CSS в ручном режиме:</p>
<ul><li>Удалить лишние пробелы и разрывы строк, которые перегружают файл CSS и затрудняют работу роботов;</li>
<li>Прописывать обобщающие свойства вместо несколько раз повторяющихся похожих команд;</li>
<li>Использовать лаконичные, понятные описания в комментариях;</li>
<li>Необычные шрифты прописывать при помощи стилей, а не изображений;</li>
<li>Для картинок создавать alt и title (разные для каждого изображения), чтобы их содержание распознавалось ботами поисковых систем;</li>
<li>Применять к заголовкам инструменты H1 – и далее, чтобы они корректно распознавались при индексации;</li>
<li>Прописывать в keywords только те <a href="/configuring-wi-fi/pozicii-klyuchevyh-slov-v-yandekse-proverit-pozicii/">ключевые слова</a>, которые используются на странице, минимизировать их количество;</li>
<li>Использовать разнообразные и краткие мета-теги.</li>
</ul><p><span class="TKDoAZvl1D8"></span> <span class="TKDoAZvl1D8"></span></p>
<h2><span>CSS и HTML оптимизаторы
</span></h2>
<p>Удобно и быстро осуществить оптимизацию непосредственно в браузере можно при помощи специальных сервисов, например:</p>
<ul><li>CleanCSS.com;</li>
<li>CSS Optimizer;</li>
<li>CSS Compressor;</li>
<li>CY-PR.com;</li>
<li>плагин Autoptimize.</li>
</ul><p>Специалисты в SЕО и IT советуют пользоваться CleanCSS.com, так как он позволяет выбрать степень сжатия от низкой до высочайшей или подобрать индивидуальные настройки. После высокого и <a href="/bluetooth-setup/pochemu-govoryat-nad-urovnem-morya-chto-znachit-uroven-morya-samyi-vysokii/">высочайшего уровней</a> оптимизации код сайта принимает практически нечитаемый вид, и вносить в него изменения будет практически невозможно. Поэтому для начала следует воспользоваться стандартной оптимизацией. Можно выбрать режимы сжатия конкретного контента или оптимизацию отдельных параметров: сжатие шрифтов, изображений, удаление пробелов.</p>
<p><img src='https://i2.wp.com/znet.ru/wp-content/uploads/2018/01/html-text.jpg' width="100%" loading=lazy></p>
<p>На ресурсе CY-PR.com также есть похожий инструмент для оптимизации, который облегчает структуру CSS на 25-30%, но здесь нет возможности сформировать файл с кодом после выполнения операции.</p>
<p>Остальные сервисы достаточно радикально могут поменять код так, что некоторые функции на сайте перестанут работать. Поэтому с их помощью лучше производить только локальные изменения в конкретных параметрах сайта.</p>
<p>После оптимизации следует проверить работоспособность сайта, корректное отображение дизайна, скорость загрузки. Нормальной считается ситуация, когда страницы и пользовательские опции сайта загружаются не более 3-5 секунд.</p>
<p>Для того чтобы проверить степень оптимизации и понять, насколько эффективно теперь прописан HTML-код, можно воспользоваться такими сервисами, как:</p>
<ul><li>optimization.com;</li>
<li>Портал seo-чеклист;</li>
<li>плагин Firebug.</li>
</ul><p>Эти инструменты помогут проверить, все ли сделано для уменьшения объема HTML-кода и улучшения его структуры. На ресурсе SEO-чеклист можно проверять по списку, что уже было сделано для оптимизации, а что – еще нет, и устанавливать пометку на совершенных делах.</p>
<p><img src='https://i0.wp.com/znet.ru/wp-content/uploads/2018/01/html.jpg' width="100%" loading=lazy></p>
<h2>Валидация
</h2>
<p>Проверить код сайта на наличие ошибок можно при помощи сервисов проверки валидации – валидаторов. Эффективная проверка кода осуществляется с помощью validator.w3c.org</p>
<p>Если система при первой проверке выдаст более полутысячи ошибок, не стоит расстраиваться. После исправления определенного недочета, можно запускать проверку снова и ошибок станет намного меньше, так как один недостаток влечет за собой другие и при его исправлении они исчезнут.</p>
<p>Сайт с исправленным и оптимизированным кодом имеет больше шансов на высокие позиции в выдаче, чем ресурс с перегруженным HTML-кодом, в котором присутствуют ошибки.</p>
<script>document.write("<img style='display:none;' src='//counter.yadro.ru/hit;artfast_after?t44.1;r"+
escape(document.referrer)+((typeof(screen)=="undefined")?"":
";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth?
screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+
";"+Math.random()+
"border='0' width='1' height='1' loading=lazy>");</script>
</div>
</div>
</div>
</div>
<div class="right -is-sticky">
<div class="articles-conseilles">
</div>
</div>
</div>
<div class="a-decouvrir">
<h3>Рекомендуем почитать</h3>
<div class="featured">
<div class="view view-articles view-id-articles view-display-id-block_4 view-dom-id-169dc93f512a102548b755435ccd1346">
<div class="view-content">
<div class="row">
<article class="preview-article">
<header class="preview-article__header">
<a href="/solving-problems/kak-nastroit-gromkost-zvuka-na-noutbuke-propal-zvuk-na/">
<figure class="">
<img src="https://i0.wp.com/sovets.net/photos/uploads/120/8110495-2razrabotanyi-spetsialnyie-programmyi-kotoryie-testiruyut-audio-drayveryi-soundcheck.jpg" alt="Пропал звук на ноутбуке — что делать?" loading=lazy>
</figure>
</a>
</header>
<div class="preview-article__content">
<div class="views-field views-field-title"> <span class="field-content"><a href="/solving-problems/kak-nastroit-gromkost-zvuka-na-noutbuke-propal-zvuk-na/">Пропал звук на ноутбуке — что делать?</a></span> </div>
<div class="views-field views-field-body">
<div class="field-content">
<p>
Каждый современный человек владеет ноутбуком, но как самому убрать возникающие...
</p>
</div>
</div>
<div class="views-field views-field-field-article-categorie">
<div class="field-content"> <span class="preview-article__category se-soigner">
</span>
</div>
</div>
</div>
</article>
<article class="preview-article">
<header class="preview-article__header">
<a href="/the-device/boty-treidery-v-ks-go-obmen-igrovyh-veshchei-s-pomoshchyu-cs-money-sovety/">
<figure class="">
<img src="https://i1.wp.com/miped.ru/uploads/posts/2017-02/thumbs/1487091265_screenshot_7.png" alt="Обмен игровых вещей с помощью CS money — Советы по работе с Cisco" loading=lazy>
</figure>
</a>
</header>
<div class="preview-article__content">
<div class="views-field views-field-title"> <span class="field-content"><a href="/the-device/boty-treidery-v-ks-go-obmen-igrovyh-veshchei-s-pomoshchyu-cs-money-sovety/">Обмен игровых вещей с помощью CS money — Советы по работе с Cisco</a></span> </div>
<div class="views-field views-field-body">
<div class="field-content">
<p>
На сегодняшний день ценность внутриигровых вещей в Counter-Strike: Global...
</p>
</div>
</div>
<div class="views-field views-field-field-article-categorie">
<div class="field-content"> <span class="preview-article__category se-soigner">
</span>
</div>
</div>
</div>
</article>
<article class="preview-article">
<header class="preview-article__header">
<a href="/solving-problems/kak-ustanovit-vremya-na-nokia-3310-kak-ustanovit-datu-i-vremya-na-nokia/">
<figure class="">
<img src="https://i0.wp.com/mobile-review.com/review/image/nokia/3310-2017/pic/03.jpg" alt="Как установить дату и время на Nokia" loading=lazy>
</figure>
</a>
</header>
<div class="preview-article__content">
<div class="views-field views-field-title"> <span class="field-content"><a href="/solving-problems/kak-ustanovit-vremya-na-nokia-3310-kak-ustanovit-datu-i-vremya-na-nokia/">Как установить дату и время на Nokia</a></span> </div>
<div class="views-field views-field-body">
<div class="field-content">
<p>
Статьи и ЛайфхакиВопрос о том, как установить дату и время на Nokia
, волнует...
</p>
</div>
</div>
<div class="views-field views-field-field-article-categorie">
<div class="field-content"> <span class="preview-article__category se-soigner">
</span>
</div>
</div>
</div>
</article>
</div>
</div>
</div>
</div>
</div>
</div>
<a href="#skip-link" class="visually-hidden visually-hidden--focusable" id="main-menu" tabindex="-1">Наверх</a>
</div>
</section>
<div class="region region-bottom">
<div class="block block-block first last odd" id="block-block-7">
<ul>
<li><a href="/category/bluetooth/">Bluetooth</a></li>
<li><a href="/category/additionally/">Дополнительно</a></li>
<li><a href="/category/equipment/">Оборудование</a></li>
<li><a href="/category/security/">Безопасность</a></li>
<li><a href="/category/the-device/">Устройства</a></li>
<li><a href="/category/solving-problems/">Решение проблем</a></li>
</ul>
<p><a href="/" id="choosit"><img alt="" height="13" src="/sites/all/themes/lanutrition/img/logo-choosit.svg" width="50" / loading=lazy></a></p>
</div>
</div>
<div class="search-modal" id="search-modal"><button class="close-button" id="close-search" aria-label="Close reveal" type="button"><span aria-hidden="true">×</span></button>
<div class="search-modal__content">
<div class="block block-search first odd" role="search" id="block-search-form">
<form class="search-form" role="search" action="/" method="get" id="search-block-form" accept-charset="UTF-8">
<div>
<div class="container-inline">
<h2 class="element-invisible">Поиск по сайту</h2>
<div class="form-item form-type-textfield form-item-search-block-form">
<input title="" class="custom-search-box form-text" placeholder="введите слово" type="text" id="edit-search-block-form--2" name="s" value="" size="15" maxlength="128" />
</div>
<div class="form-actions form-wrapper" id="edit-actions"><input type="submit" id="edit-submit" name="op" value="Rechercher" class="form-submit" /></div>
</div>
</div>
</form>
</div>
</div>
</div>
</body>
</html> 