Скопируйте этот код в новый текстовый файл и сохраните его на своем компьютере. Задайте для сохраняемого файла имя index.html . Затем откройте этот файл в любом браузере и посмотрите на результат.

Обратите внимание, что по умолчанию любой веб-сервер пытается выдать браузеру именно страницу с названием index.html . Поэтому в 99% случаев исходный код главной страницы сайта сохраняется в файле под таким названием и это считается хорошим тоном.

Полную версию этого простейшего HTML-сайта вы можете скачать в виде архива (10,8Mb) . После распаковки архива запускаем html/index.html .

Ключевые этапы создания сайта

Самостоятельное создание сайта с нуля состоит из трех основных этапов:

• Создание макета сайта . Именно на этом этапе появляется четкое визуальное представление, как будет выглядеть создаваемый интернет-ресурс. Чаще всего используется Adobe Photoshop или другие растровые редакторы.
• Верстка сайта . На этом этапе приступают к верстке сайта из макета .psd , мобильной адаптации и тестированиюна корректное отображение в различных браузерах.
• Внедрение PHP . На этом этапе сайт превращается из статичного в динамический.

Давайте разберемся со всеми этими этапами более подробно.

Создание макета сайта

Чаще всего макет (в данном случае под этим словом стоит понимать визуальное оформление ) сайта создается в программах, которые принято называть графическими редакторами. Наиболее популярными являются Adobe Photoshop и CorelDRAW . Мы рекомендуем использовать именно Photoshop , так как он чуть проще в освоении и при этом обладает богатейшими возможностями. Кроме того, именно им пользуются все веб-дизайнеры.

Создаем новый документ в Adobe Photoshop . Задаем ему имя – MySite .

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

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

Затем устанавливаем цвет фона F7F7C5 в шестнадцатеричном формате или выбираем его с помощью палитры цветов.

После этого выбираем пункт меню «Просмотр » – «Направляющие » и активируем отображение линеек и направляющих.

В пункте меню «Просмотр » - «Привязка к » необходимо проверить, что включена привязка к направляющим и границам документа.

С помощью инструмента «Текст» , вводим текстовое название будущего сайта, слоган под ним, а также контактный номер телефона справа вверху макета.

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

Затем с помощью инструмента «Формы » создаем прямоугольник с закруглёнными краями (радиус – 8 точек ) и с его помощью обозначаем место под изображение, которое будет располагаться в шапке сайта.

Теперь пришло время вставить изображение в шапку сайта.

С помощью инструмента «Текст » , и шрифта Georgia , входящего в стандартный набор операционной системы Windows , создаем навигационное меню и заголовок главной страницы сайта.

Затем, используя инструмент «Текст » и шрифт «Arial » , добавляем текст главной страницы. В данном случае лучше всего использовать блочный текст для последующей работы с ним.

Для заголовка в тексте используем черный шрифт. Для навигационного меню – белый.

Перемещая правую границу основного текстового блока, вставляем изображение в текст страницы (справа от текста ).

Используя инструмент «Формы » - «Прямая » , проводим заключительную линию под текстом страницы.

C помощью инструмента «Текст » (шрифт Arial ) размещаем копирайт в подвале страницы (под линией ).

Нарезаем необходимые для вёрстки сайта фрагменты изображений с помощью инструмента «Раскройка » (мы выделили основную картинку в шапке и картинку в тексте страницы ).

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

Для того чтобы сохранить и использовать результаты проделанной работы в виде изображений для последующей вёрстки сайта, переходим в меню «Файл » и выбираем пункт «Сохранить для Веб » . Затем настраиваем качество выходных изображений и сохраняем их.

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

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

Верстка сайта

Прежде всего, необходимо создать новый текстовой файл и сохранить его под названием index.html .

Первая строка этого файла должна выглядеть следующим образом:

Она сообщит браузеру, как именно обрабатывать содержимое страницы. Далее следует набор тегов:

«Голова» документа «Тело» документа

Пара тегов … говорит о том, что внутри содержится HTML-код .

Внутри … располагаются теги, которые не отображаются в окне браузера пользователя. Как правило, они начинаются со слова meta, и называются мета-тегами, а вот тег отображается в качестве заголовка окна браузера и анализируется поисковыми системами.

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

) и в виде таблиц (… ).

Что касается формата отображения элементов, то он может быть задан как напрямую, с использованием соответствующих тегов, так и с помощью таблиц стилей CSS . При этом именно второй способ является наиболее предпочтительным, так как он позволяет повторно применять стили компонентов. Таблица стилей задается либо в внутри тега , либо в отдельном файле (чаще всего этот файл имеет имя style.css ), ссылка на который также располагается внутри .

В нашем случае структура элементов сайта выглядит следующим образом:

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

Более подробно изучить все основные HTML-теги, их назначение, использование таблиц стилей (CSS ) можно воспользовавшись книгами, представленными в разделе « Языки разметки » , кроме того, полезные советы по организации контента, верстке, CSS приводятся в .

Создание сайта с помощью PHP

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

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

Для создания таких страниц необходимо использовать языки веб-программирования . Среди них наиболее широко распространены PHP, Python и Ruby on Rails для Unix-систем , а для Windows характерна разработка динамического контента с использованием средств .NET .

Это все касается серверной части, а для программирования на клиентской стороне чаще всего используется JavaScript .

В подготовленном нами архиве есть папка php , в которой сохранен файл index.php . Именно он позволяет реализовать три странички нашего тестового сайта с помощью PHP .

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

В рамках этой статьи мы не будем углубляться в дебри PHP-программирования и для наглядности ограничимся простыми вставками фрагментов кода.

Суть этих действий заключается в том, что мы выносим шапку и подвал сайта в отдельные файлы: header.php и footer.php соответственно. А затем на страницах с текстовым содержанием вставляем их в макет сайта с помощью PHP . Сделать это можно с помощью приведенного ниже кода:

...

Попробуйте запустить в браузере файл php/index.php . Не получилось? Конечно нет. Ведь браузер не знает, что ему делать с командами, из которых состоит PHP-файл (он же PHP-скрипт ).

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

Для отладки веб-приложений и реализации полноценного веб-сервера на компьютерах, работающих под управлением операционной системы Windows , был создан бесплатный пакет Denwer (для вашего удобства он присутствует в подготовленном нами архиве ). Он включает в себя веб-сервер Apache , интерпретаторы таких языков веб-программирования как PHP и Perl, базу данных MySQL , а также средства для работы с электронной почтой.

Установка пакета приложений Denwer не требует каких-либо серьезных усилий. Запускаем установочный файл, выполняем все его требования. Выбираем букву виртуального диска для быстрого доступа к веб-серверу, создаем ярлыки. Вот и все! Denwer готов к работе!

Только что установленный нами веб-сервер запускается кликом по ярлыку Start Denwer (у вас он может называться иначе ). После старта веб-сервера скопируйте в папку home/test1.ru/www/ , расположенную на появившемся в системе виртуальном диске (обычно Z ), содержимое папки php из архива , с которым мы работаем, кроме файла index.html .

После этого наберите в адресной строке браузера test1.ru . Знакомая картина? А теперь пройдитесь по ссылкам, расположенным сверху страницы. Работает? Отлично!

Создавать сайт с нуля или на конструкторе сайтов?

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

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

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

Сравнительная характеристика	Сайты, созданные с помощью конструктора	Сайты, созданные самостоятельно с нуля
Простота создания	Просто	Сложно
Скорость создания	Очень быстро	Долго
Возможность редактирования исходного кода	Нет	Есть
Возможность продвижения в поисковых системах	Возможны нюансы	Полная свобода
Гибкость в настройке дизайна и функциональности	Ограничена	Не ограничена
Возможность перенести на другой хостинг	Чаще нет	Есть

Какой же способ создания сайта наиболее предпочтителен?

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

Но если вы хотите создать современный и действительно качественный сайт в предельно короткий срок, мы рекомендуем воспользоваться именно конструкторами сайтов !

Полезные программы для начинающих вебмастеров

Мы перечислим несколько полезных программ, которые значительно облегчат и ускорят процесс самостоятельного создания сайта:

Notepad++ - текстовый редактор, позволяющий создавать и редактировать исходный код создаваемого сайта. Отличная замена программе «Блокнот », входящей в состав операционной системы Windows .

Adobe Dreamweaver - мощная и многофункциональная программа для создания сайтов. Помимо всего прочего она включает в себя возможность предварительного просмотра создаваемого ресурса.

NetBeans – среда разработки приложений, которая позволяет эффективно работать с такими языками разметки и Веб-программирования, как HTML , CSS , JavaScript и PHP .

Публикация созданного сайта в сети Интернет

Допустим, вы уже создали свой первый сайт, но что нужно сделать, чтобы на него мог зайти любой пользователь Всемирной паутины?

Что такое «домен» и зачем он нужен

Домен — это имя сайта. Кроме того, под термином «доме н» зачастую понимают адрес вашего сайта в сети «Интернет ».

Отличным примером домена может быть имя сайта, на котором вы сейчас находитесь — internet-technologies.ru .

Как видно из приведенного выше примера доменное имя сайта состоит из двух частей:

• непосредственно названия сайта — в нашем случае это internet-technologies ;
• выбранной доменной зоны. В нашем случае была выбрана доменная зона «.ru ». Доменная зона указывается в адресе сайта после его названия.

Также стоит отметить, что существуют домены различных уровней. Разобраться в этом очень просто – достаточно посмотреть на количество разделенных точкой частей адреса сайта. Например:

• internet-technologies.ru – домен второго уровня;
• forum.internet-technologies.ru – домен третьего уровня (он же поддомен).

Доменные зоны могут быть разными. Чаще всего выбор доменной зоны зависит от страны или назначения каждого конкретного сайта.

Наиболее часто используются следующие доменные зоны:

• .ru - наиболее популярная доменная зона в рамках русскоязычного сегмента Всемирной паутины;
• .biz - часто доменная зона используется для сайтов бизнес-тематики;
• .com - эта доменная зона чаще всего используется для коммерческих и корпоративных сайтов;
• .info - в этой доменной зоне достаточно часто располагаются именно информационные сайты;
• .net - еще одна популярная доменная зона, подходящая для проектов, связанных с Интернетом;
• .рф - официальная доменная зона Российской Федерациию

Если большая часть целевой аудитории находится в России, мы рекомендуем регистрировать домен в зоне «.ru ».

Как выбрать домен

При выборе домена для собственного сайта мы рекомендуем руководствоваться следующими принципами:

• оригинальность и легкость запоминания;
• максимальна длина – 12 символов;
• легкость набора на латинице;
• отсутствие в имени домена знака «тире» (желательно, но не обязательно).
• Чистота истории домена и отсутствие на нем каких-либо санкций со стороны поисковых систем. Это можно проверить с помощью сервиса «whois history ».

Где можно купить домен?

Мы рекомендуем пользоваться услугами надежного и проверенного временем регистратора доменных имен – WebNames . Мы используем именно его.

Помимо всего прочего, сайт этого регистратора позволяет прямо в режиме онлайн подобрать имя (домен) для своего сайта. Сделать это довольно просто.

Для этого достаточно ввести в соответствующее поле желаемое имя домена и нажать кнопку «Искать домен ».

Что такое «хостинг»

Для того чтобы созданный вами сайт стал доступен всем пользователям Всемирной паутины, помимо домена вашему интернет-ресурсу понадобится еще и хостинг.
Термином «хостинг » обозначается услуга по размещению вашего сайта в Интернете. Предоставлением подобных услуг занимается большое количество компаний, которые принято называть «хостерами ».

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

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

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

Как выбрать хостинг

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

• Стабильная работа . Выбранный вами хостинг должен стабильно работать 24 часа в сутки, 7 дней в неделю. Иначе вы будете нести репутационные потери в глазах посетителей, а также потеряете доверие со стороны поисковых систем. В этой связи стоит обратить особое внимание на такой параметр, как uptime хостинга. Uptime — это время, в течение которого сайт работает в штатном режиме и посетители могут его открыть в своем браузере без каких-либо проблем. Оно должно быть максимально приближено к 100%. В свою очередь время отклика сайта демонстрирует, насколько быстро ваш сайт отвечает на запрос, поступающий от браузера пользователя. Чем меньше время отклика, тем лучше.
• Простота и удобство пользовательского интерфейса . При входе в личный кабинет вся панель управления должна быть не только доступна, но и интуитивно понятна. В частности, вы должны видеть текущий баланс, а также иметь быстрый доступ ко всем основным функциям хостинга.
• Профессиональная русскоязычная служба поддержки . Быстрая, квалифицированная и говорящая на родном для вас языке техническая поддержка очень важна в случае возникновения различных сбоев в работе сайта и необходимости их оперативного устранения.
• Стоимость услуг . Этот аспект важен как для начинающих вебмастеров, которые имеют в своем распоряжении ограниченный бюджет, так и для владельцев масштабных интернет-проектов, требующих использования действительно дорогостоящего хостинга.

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

Размещение готового сайта на сервере

Допустим, вы уже создали сайт, купили домен и хостинг. Что делать дальше?

Теперь нужно разместить все файлы нашего сайта на сервере выбранного вами хостинг-провайдера. Есть сразу несколько способов сделать это. Давайте поговорим о них.

1. Это загрузка содержимого вашего сайта по HTTP-протоколу с помощью панели управления хостингом.
2. По протоколу FTP с помощью так называемого FTP-клиента .

Именно второй способ является наиболее быстрым. Для этой задачи мы рекомендуем один из лучших бесплатных FTP-клиентов – FileZilla .

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

Ответы на распространенные вопросы

С чего начать обучение будущему вебмастеру (создателю сайтов)?

• основы HTML ;
• основы CSS ;
• основы PHP .

Что касается дальнейшего обучения и развития, для создания одностраничных сайтов будет полезно освоить такую программу как Abobe Muse . Если же вы захотите создавать многофункциональные сайты на заказ, обязательно найдите время на освоение CMS WordPress , ведь именно она сейчас является наиболее популярной и распространенной.

Как найти и выбрать специалистов для создания сайта

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

Есть сразу несколько критериев, на которые следует опираться при выборе специалистов для создания сайта. Выделим основные:

• Наличие портфолио успешно завершенных проектов. Если у выбранного вами исполнителя или команды исполнителей нет портфолио, это вызывает вопросы.
• Умение объяснять сложные вещи простым языком. Если вас с самого начала общения «грузят » сложными терминами и не дают им каких-то понятных объяснений, лучше найти другого исполнителя.
• Желательно наличие у исполнителя собственного сайта. Помните выражение «сапожник без сапог »? Часто это аналогия верна, но здесь бывают исключения.
• Положительные отзывы от реальных клиентов. Отлично, если удастся пообщайтесь с клиентами, попросив их контакты у исполнителя.

Как показывает практика, вы всегда сможете найти специалистов, готовых создать вам сайт, на биржах фриланса. Вот лишь некоторые из них:

• fl.ru ;
• weblancer.net ;
• freelance.ru ;
• work-zilla.com .

Где можно пройти профессиональное обучение созданию сайтов?

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

• дизайнер;
• верстальщик;
• программист;
• менеджер.

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

• geekbrains.ru ;
• netology.ru .

Можно ли бесплатно изучить основы сайтостроения?

Можно ли самостоятельно создать собственный сайт?

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

Можно ли создать полноценный сайт абсолютно бесплатно?

Нет, нельзя. Даже если вы будете все разрабатывать сами (с нуля или на CMS ), вам все равно понадобится купить хостинг и домен. Это стоит не больших денег, но все-таки денег.

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

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

Поэтому вложения, пусть и минимальные, потребуются. Но не стоит расстраиваться – стоит это обычно, как пара чашек кофе в месяц.

Можно ли заработать на создании сайтов?

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

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

• накопленный вами опыт работы;
• платежеспособность ваших клиентов;
• умение вести переговоры с потенциальными клиентами и продавать им свои услуги;
• ниша, в которой вы будете работать;
• тип создаваемого сайта.

Да-да, разные типы сайтов (их создание ) стоят по-разному. Если говорить о средних ценах по рынку, на данный момент они таковы:

• создание сайта-визитки – от 100$ ;
• создание корпоративного сайта – от 500$ ;
• создание интернет-магазина – от 1000$ ;
• создание новостного сайта – от 700$ ;
• создание информационного SEO-сайта – от 300$ ;
• создание интернет-портала – от 3000$ ;
• создание одностраничного сайта – от 400$ ;
• создание блога – от 50$ ;
• создание форума – от 300$ .

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

Создать свой сайт бесплатно!

Вместо заключения

Благодарим вас за прочтение этой статьи. Мы будем очень рады, если вам помогут нашими рекомендации. Кроме того, благодарим вас за лайки и шаринги. Оставайтесь с нами, и вы узнаете еще много интересного!

Может быть, у вас есть какие-то вопросы по созданию сайтов? Задайте их в комментариях, и мы постараемся вам помочь!

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

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

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

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

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

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

Только текст

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

На самом деле, поисковики просто обожают любой текст. Они могут читать только HTML код. Если у вас на странице много форм или яваскрипта или чего-нибудь еще, что может блокировать поисковую машину для чтения HTML кода, паук просто будет игнорировать ее.

Что поисковые роботы хотят видеть

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

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

• Ключевые слова
• META теги
• Заглавия
• Ссылки
• Выделенный текст

Читайте как поисковая машина

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

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

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

Мы выпустили новую книгу «Контент-маркетинг в социальных сетях: Как засесть в голову подписчиков и влюбить их в свой бренд».

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

• «Зеркальщики» - распознают повторяющиеся ресурсы.
• «Дятлы» - определяют доступность сайта.
• « » - роботы для считывания часто обновляемых ресурсов. А также программы для сканирования картинок, иконок, определения частоты визитов и других характеристик.

Что робот видит на сайте

1. Текст ресурса.
2. Внутренние и внешние ссылки.
3. HTML-код страницы.
4. Ответ сервера.
5. Файл robots. txt - это основной документ для работы с пауком. В нем вы можете задать одни параметры для привлечения внимания робота, а другие наоборот закрыть от просмотра. Также при повторном заходе на сайт, краулер пользуется именно эти файлом.

В какой форме робот видит страницу сайта?

Есть несколько способов посмотреть на ресурс глазами программы. Если вы являетесь владельцем сайта, то для вас Google придумал Search Console.

• Добавляем ресурс на сервис. Как это можно сделать читайте .
• После этого выбираем инструмент «Просмотреть как Googlebot ».
• Нажимаем «Получить и отобразить».После выполнения сканирования будет вот такой результат.

Этот способ отображает самую полную и верную картину того, как робот видит сайт. Если же вы не являетесь владельцем ресурса то, для вас есть другие варианты.

Самый простой - через сохраненную копию в поисковой системе.

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

• Устанавливаем Mozila Firefox .
• Добавляем в этот браузер плагин .
• Под полем URL появится бар, в котором мы:
  в «Cookies» выбираем «Disable Cookies»;
  в «Disable» кликаем на «Disable JavaScript» и «Disable ALL JavaScript».
• Обязательно перезагружаем страницу.
• Все в том же инструменте:
  в «CSS» жмем на «Disable styles» и «Disable all styles»;
  и в «Images» ставим галочку на «Display ALT attributes» и «Disable ALL images». Готово!

Зачем нужно проверять то, как робот видит сайт?

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

Проверять нужно минимум 15−20 страниц сайта и стараться охватывать все типы страниц.

Бывает, что некоторые хитрецы специально проворачивают такие аферы. Ну, например, вместо сайта о мягких игрушках пиарят какое-нибудь казино «Кукан». Поисковик со временем это (в любом случае) обнаружит и отправит такой ресурс под фильтры.

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

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

1. Диагностика — Диагностика сайта
2. Индексирование — Страницы в поиске

О том, и зачем он нужен, я писала ещё несколько назад. Если вы не знакомы с данным инструментом, ознакомьтесь сначала со статьей по ссылке.

Диагностика сайта

Возможные проблемы

1. В файле robots.txt не задана директива Host

Данное замечание Яндекс примечательно тем, что директива Host не является стандартизированной директивой, ее поддерживает только поисковая система Яндекс. Нужна она в том случае, если Яндекс неправильно определяет зеркало сайта.

Как правило, зеркало сайта определяется Яндексом автоматически на основе URL, которые формирует сама CMS, и на основе внешних ссылок, которые ведут на сайт. Чтобы указать главное зеркало сайта, не обязательно указывать это в файле robots.txt. Основной способ — использовать 301 редирект, который либо настроен автоматически в CMS, либо необходимый код вносится в файл.htachess.

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

CMS, с которыми мне приходилось работать в последнее время, WordPress, Joomla, ModX, по умолчанию редиректят адрес с www на без, если в настройках системы указан адрес сайта без приставки. Уверена, все современные CMS обладают такой возможностью. Даже любимый мной Blogger правильно редиректит адрес блога, расположенного на собственном домене.

2. Отсутствуют мета-теги

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

3. Нет используемых роботом файлов Sitemap

Конечно, лучше эту ошибку исправить. Но обратите внимание, что проблема может возникать и в тех случаях, когда файл sitemap.xml есть, так и в тех, когда его действительно нет. Если файл у вас есть, но Яндекс его не видит, просто перейдите в раздел Индексирование — Файлы Sitemap. И вручную добавьте файл в Яндекс.Вебмастер. Если такого файла у вас вообще нет, то в зависимости от используемой CMS, ищите варианты решения.

Файл sitemap.xml находится по адресу http://vash-domen.ru/sitemap.xml

4. Не найден файл robots.txt

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

Файл robots.txt находится по адресу http://vash-domen.ru/robots.txt

На этом фонтан ошибок на вкладке Диагностика сайта у меня иссяк.

Индексирование

Страницы в поиске

Начнем именно с этого пункта. Так будет легче структурировать информацию.

Выделяем в фильтре «Все страницы»
Опускаемся ниже, справа на странице «Скачать таблицу» Выбираем XLS и открываем файл в Excel.


Получаем список страниц, которые находятся в поиске, т.е. Яндекс о них знает, ранжирует, показывает пользователям.
Смотрим, сколько записей в таблице. У меня получилось 289 страниц.

А как понять, сколько должно быть? Каждый сайт уникален и только вы можете знать, сколько страниц вы опубликовали. Я покажу на примере своего блога на WordPress.
В блоге на момент написания статьи имеется:

• Записи — 228
• Страницы — 17
• Рубрики — 4
• Метки — 41
• + главная страница сайта

В сумме имеем 290 страниц, которые должны быть в индексе. В сравнении с данными таблицы разница всего в 1 страницу. Смело можно считать это очень хорошим показателем. Но и радоваться рано. Бывает так, что математически все совпадает, а начинаешь анализировать, появляются нестыковки.

Есть два пути, чтобы найти ту одну страницу, которой нет в поиске. Рассмотрим оба.

Способ первый. В той же таблице, которую я скачала, я разделила поиск на несколько этапов. Сначала отобрала страницы Рубрик. У меня всего 4 рубрики. Для оптимизации работы пользуйтесь текстовыми фильтрами в Excel.


Затем Метки, исключила из поиска Страницы, в результате в таблице остались одни статьи. И тут, сколько бы статей не было, придется просмотреть каждую, чтобы найти ту, которой нет в индексе.

Обращаю внимание, что в каждой CMS своя структура. У каждого вебмастера свои SEO , canonical, файла robots.txt.

Опять же, если на примере WordPress, обратите внимание, какие разделы сайта у вас индексируются, а какие закрыты. Здесь могут быть и страницы Архива по месяцам и годам, страницы Автора, пейджинг страниц. У меня все эти разделы закрыты настройками мета тега robots. У вас может быть иначе, поэтому считайте все, что у вас не запрещено для индексации.

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

Способ второй. Возвращаемся в Вебмастер, в фильтре выбираем «Исключенные страницы».

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

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

Опять же, на примере своего блога на WordPress я рассмотрю типичные причины исключения.

В полученной таблице нам в первую очередь важна колонка D — «httpCode». Кто не знает, что такое ответы сервера, прочитайте в википедии . Так вам будет легче понять дальнейший материал.

Начнем с кода 200. Если вы можете попасть на какую-то страницу в интернете без авторизации, то такая страница будет со статусом 200. Все такие страницы могут быть исключены из поиска по следующим причинам:

1. Запрещены мета тегом robots
2. Запрещены к индексации в файле robots.txt
3. Являются неканоническими, установлен мета тег canonical

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

Настраиваем фильтры, выбираем в колонке D — 200

Теперь нас интересует колонка E — «status», сортируем.

Статус BAD_QUALITY — Недостаточно качественная. Самый неприятный из всех статус. Давайте разберем его.

У меня в таблице оказалось всего 8 URL со статусом Недостаточно качественная. Я их пронумеровала в правой колонке.

URL 1, 5, 7 — Страницы фида, 2,3,4,5,8 — служебные страницы в директории сайта wp-json. Все эти страницы не являются HTML документами и в принципе не должны быть в этом списке.

Поэтому внимательно просмотрите свой список страниц и выделите только HTML страницы.

Статус META_NO_INDEX. Из индекса исключены страницы пейджинга, страница автора, из-за настроек мета тега robots

Но есть в этом списке страница, которой не должно быть. Я выделила url голубым цветом.

Статус NOT_CANONICAL. Название говорит само за себя. Неканоническая страница. На любую страницу сайта можно установить мета тег canonical, в котором указать канонический URL.

Руководство по переходу для пользователей старой версии

Мы разрабатываем новую версию Search Console, которая со временем заменит старый сервис. В этом руководстве мы расскажем об основных различиях между старой и новой версиями.

Общие изменения

В новой версии Search Console мы реализовали следующие улучшения:

• Данные о поисковом трафике можно просматривать за 16 месяцев вместо прежних трех.
• Теперь в Search Console представлены подробные сведения о конкретных страницах. К этой информации относятся канонические URL, статус индексирования, степень оптимизации для мобильных устройств и т. д.
• В новой версии реализованы инструменты, которые позволяют отслеживать сканирование ваших веб-страниц, исправлять связанные с этим ошибки и отправлять запросы на повторное индексирование.
• В обновленном сервисе доступны как совершенно новые инструменты и отчеты, так и улучшенные старые. Все они описаны ниже.
• Возможно использование сервиса на мобильных устройствах.

Сравнение инструментов и отчетов

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

Старая версия отчета	Аналог в новой версии Search Console	Сравнение
Анализ поисковых запросов		В новом отчете представлены данные за 16 месяцев, а работать с ним стало удобнее.
Полезные подсказки	Отчеты о статусе расширенных результатов	Новые отчеты содержат подробную информацию, которая помогает в устранении ошибок, и позволяют с легкостью отправлять запросы на повторное сканирование.
Ссылки на ваш сайт Внутренние ссылки	Ссылки	Мы объединили два старых отчета в один новый и повысили точность подсчета ссылок.
Статус индексирования	Отчет об индексировании	В новом отчете есть все данные из старого, а также подробная информация о статусе в индексе Google.
Отчет по файлам Sitemap	Отчет по файлам Sitemap	Данные в отчете остались прежними, но мы улучшили его оформление. Старый отчет поддерживает тестирование файла Sitemap без его отправки, а новый – нет.
Ускоренные мобильные страницы (AMP)	Отчет о статусе AMP-страниц	В новом отчете добавлены новые типы ошибок, по которым можно просматривать сведения, а также реализована отправка запроса на повторное сканирование.
Меры, принятые вручную	Меры, принятые вручную	В новом варианте отчета приводится история мер, принятых вручную, включая сведения об отправленных запросах на проверку и результатах проверок.
Сканер Google для сайтов	Инструмент проверки URL	В инструменте проверки URL можно посмотреть информацию о версии URL, включенной в индекс, и версии, доступной онлайн, а также отправить запрос на сканирование. Добавлены сведения о канонических URL, блокировках noindex и nocrawl и наличии URL в индексе Google.
Удобство просмотра на мобильных устройствах	Удобство просмотра на мобильных устройствах	Данные в отчете остались прежними, но работать с ним стало более удобно. Также мы добавили возможность запросить повторное сканирование страницы после того, как на ней будут исправлены проблемы с просмотром на мобильных устройствах.
Отчет об ошибках сканирования	Отчет об индексировании и инструмент проверки URL	Ошибки сканирования на уровне сайта показаны в новом отчете об индексировании. Чтобы найти ошибки на уровне отдельных страниц, воспользуйтесь новым инструментом проверки URL. Новые отчеты помогают вам определять приоритеты неполадок и группировать страницы с похожими проблемами, чтобы выявлять общие причины. Старый отчет показывал все ошибки за последние три месяца, включая неактуальные, временные и несущественные. Новый отчет выделяет важные для Google проблемы, обнаруженные за последний месяц. Вы увидите только те проблемы, которые могут привести к удалению страницы из индекса или препятствуют ее индексированию. Проблемы показываются в зависимости от приоритетов. Например, ошибки 404 обозначены как ошибки, только если вы запрашивали индексирование страницы через файл Sitemap или другим способом. Благодаря этим изменениям вы сможете больше внимания уделять проблемам, от которых зависит положение вашего сайта в индексе Google, а не разбираться со списком всех ошибок, которые робот Googlebot когда-либо обнаруживал на вашем сайте. В новом отчете об индексировании следующие ошибки были преобразованы или более не показываются:​ Ошибки URL – для пользователей компьютеров Старый тип ошибки Аналог в новой версии Ошибка сервера В отчете об индексировании все ошибки сервера указываются с пометкой Ошибка сервера (5xx) . Ложная ошибка 404 Ошибка: отправленный URL возвращает ложную ошибку 404. Исключено: ложная ошибка 404. Доступ запрещен В отчете об индексировании указывается одна из следующих категорий в зависимости от того, запросили ли вы обработку для этого типа ошибки: Ошибка: отправленный URL возвращает ошибку 401 (неавторизованный запрос). Исключено: страница не проиндексирована вследствие ошибки 401 (неавторизованный запрос). Не найдено В отчете об индексировании указывается одним из следующих способов в зависимости от того, запросили ли вы обработку для этого типа ошибки: Ошибка: отправленный URL не найден (404). Исключено: не найдено (404). Другое В отчете об индексировании указывается как Ошибка сканирования . Ошибки URL – для пользователей смартфонов В настоящее время ошибки, возникающие на смартфонах, не показываются, но мы надеемся в будущем включить в отчет и их. Ошибки сайта В новой версии Search Console ошибки сайта не показываются.
Отчет о проблемах безопасности	Новый отчет о проблемах безопасности	В новом отчете о проблемах безопасности сохранена большая часть функций старого отчета и добавлена история неполадок на сайте.
Структурированные данные	Инструмент проверки расширенных результатов и отчеты о статусе расширенных результатов	Для обработки отдельных URL используйте инструмент проверки расширенных результатов или инструмент проверки URL. Сведения по всему сайту можно найти в отчетах о статусе расширенных результатов для вашего сайта. Пока представлены ещё не все типы данных для расширенных результатов, но число отчетов постоянно растет.
Оптимизация HTML	–	Аналогичного отчета в новой версии нет. Чтобы создавать информативные заголовки и описания страниц, следуйте нашим рекомендациям .
Заблокированные ресурсы	Инструмент проверки URL	Возможности просмотреть заблокированные ресурсы по всему сайту нет, но с помощью инструмента проверки URL можно увидеть заблокированные ресурсы для каждой отдельной страницы.
Приложения Android	–	С марта 2019 г. Search Console перестанет поддерживать приложения Android.
Наборы ресурсов	–	С марта 2019 г. Search Console перестанет поддерживать наборы ресурсов.

Не указывайте одни и те же данные дважды. Данные и запросы, содержащиеся в одной версии Search Console, автоматически дублируются и в другой. Например, если вы отправили запрос на повторную проверку или файл Sitemap в старом сервисе Search Console, не нужно отправлять его ещё раз в новом.

Новые способы выполнения привычных задач

В новой версии Search Console по-другому выполняются некоторые прежние операции. Ниже перечислены основные изменения.

Функции, которые в настоящее время не поддерживаются

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

• Статистика сканирования (число просканированных за день страниц, время их загрузки, количество скачанных за день килобайт).
• Проверка файла robots.txt.
• Управление параметрами URL в Google Поиске.
• Инструмент "Маркер".
• Чтение сообщений и управление ими.
• Инструмент "Изменение адреса".
• Указание основного домена.
• Связывание ресурса Search Console с ресурсом Google Аналитики.
• Отклонение ссылок.
• Удаление устаревших данных из индекса.

Эта информация оказалась полезной?

Как можно улучшить эту статью?