×

Дополнительные материалы бесплатно предоставляются только зарегистрированным пользователям.

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

Для тех кто не зарегистрирован, можно это сделать на вкладке Регистрация.

  • Рубрики
  • Слайдер статей
  • Тест сайта
  • Подписка
  • Сайдбар
  • Прокрутка вверх
  • Как сделать сайт с нуля своими руками (вводная часть)

    1. Причины создания пошаговой инструкции по разработке самописного сайта
    2. Тема создаваемого сайта
    3. В чем будет заключаться монетизация
    4. Функционал
    5. Этапы создания
    6. Текущее состояние создаваемого сайта

    Здравствуйте уважаемый посетитель!

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

    Причем чтобы такой интернет-ресурс был создан не на каком-нибудь стандартном шаблоне бесплатной СMS (Content management system - система управления контентом) типа WordPress, Drupal, Joomla и т.п., а заточенный под себя, с возможностью обеспечить ему должную безопасность и реализовать все свои индивидуальные потребности.

    Часто такие сайты, созданные под конкретные задачи на основе языка разметки веб-страниц HTML, стилей CSS и других инструментов веб-программирования (PHP, JavaScript и т.п.), называют самописными.

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

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

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

  • Текущее состояние создаваемого сайта

    1. Проверка при малых разрешениях экрана
    2. Проверка при больших разрешениях экрана
    3. Проверка на выделенном домене

    Здравствуйте уважаемый посетитель!

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

    Для этого предусмотрена возможность оценивать его работу в двух вариантах: с использованием зеркала сайта на поддомене текущего ресурса и на реальном интернет-ресурсе, размещенном на выделенном домене "avtobezugona.ru.

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

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

Самописный сайт своими руками!

Текущее состояние создаваемого сайта

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

Где в дополнительных материалах можно бесплатно скачать исходные файлы сайта с таблицами MySQL.

Вы здесь: Главная → Сборник статей → Изображения → SEO-оптимизация изображений


Автор: / Дата:

SEO-оптимизация изображений

Здравствуйте уважаемый посетитель!

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

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

В данном случае речь идет о некоторых правилах назначения наименований файлов с использованием ЧПУ и формирования атрибутов alt и title тега <img>, предназначенного для непосредственного размещения графических элементов на HTML-странице. Что мы и рассмотрим в данной статье.

Содержание


  • Определяем названия изображений
  • Формируем ЧПУ наименований файлов
  • Формируем атрибуты alt
  • Формируем атрибуты title
  • Исходные файлы сайта

Определяем названия изображений


Аббревиатура SEO исходит из Search Engine Optimization, что в дословном переводе означает "оптимизация поисковой системы". Иными словами можно сказать, что под SEO подразумевается оптимизация сайтов с целью повышения позиций страниц в поисковых системах по определенным запросам.

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

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

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

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

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

  • Угон автомобилей наиболее распространенное преступление в России
  • Блокировка колес для защиты автомобиля
  • Противоугонная маркировка стекол автомобиля
  • Замена стекол автомобиля
  • Противоугонная маркировка повышает риск быть пойманным с поличным
  • Маркировка легкосъемных частей для защиты дорогостоящих деталей
  • Выполнение противоугонной маркировки в сервис-центрах
  • Самостоятельное нанесение противоугонной маркировки

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

Формируем ЧПУ наименований файлов


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

Ранее в разделе URL для людей мы довольно подробно рассматривали этот вид представления словосочетаний, составленных с использованием "транслита". Где применяли эту технологию при формировании адресной структуры сайта. Но в данном случае мы будем это использовать для смыслового представления содержания изображений по названию соответствующего файла.

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

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

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

скриншот 28

И делается это совсем просто. Для этого всего лишь надо открыть по вышеуказанной ссылке транслитератор, ввести (скопировать) нужный текст на русском языке, а затем после нажатия на кнопку "ПЕРЕВЕСТИ" получить готовый результат.

Ниже на скриншоте показано получение ЧПУ названия файла для первого изображения.

Для увеличения / уменьшения размера изображения кликните по картинке
Угон автомобилей наиболее распространенное преступление в России

Рис.1 Получение ЧПУ наименований файлов

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

  • ugon-avtomobilej-naibolee-rasprostranennoe-prestuplenie-v-rossii
  • blokirovka-koles-dlya-zashchity-avtomobilya
  • protivougonnaya-markirovka-stekol-avtomobilya
  • zamena-stekol-avtomobilya
  • protivougonnaya-markirovka-povyshaet-risk-byt-pojmannym-s-polichnym
  • markirovka-legkosemnyh-chastej-dlya-zashchity-dorogostoyashchih-detalej
  • vypolnenie-protivougonnoj-markirovki-v-servis-centrah
  • samostoyatelnoe-nanesenie-protivougonnoj-markirovki

И теперь все эти полученные ЧПУ словосочетания можно использовать для переименования картинок, предназначенных для размещения в статье. Таким образом, изменив названия файлов, сохраним их на сервере в следующей директории: "/images/article/main/" (окончательный вариант полученных изображений можно найти в соответствующей папке в дополнительных материалах в разделе Исходные файлы сайта).

Формируем атрибуты alt


Далее перейдем к формированию атрибутов alt и title тега <img>. И начнем с обязательного - alt.

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

Мы же здесь пойдем по второму варианту, и будем формировать теги <img>, используя в значении alt ранее сформированные наименования картинок. А в качестве атрибута src, указывающего путь к файлу, полученные наименования файлов изображений вместе с директорией "/images/article/main/" и соответствующим расширением, в данном случае ".jpg" или ".png".

Ниже показан пример тега <img>, соответствующего первой картинки. Для остальных теги <img> формируются аналогичным образом.

  1. <img src="/images/article/main/ugon-avtomobilej-naibolee-rasprostranennoe-prestuplenie-v-rossii.jpg" alt="Угон автомобилей наиболее распространенное преступление в России">

Рис.2 Тег <img> с атрибутом alt для 1-ой картинки

Можно обратить внимание, что здесь не используются атрибуты width и height, определяющие ширину и высоту изображения. Это обусловлено тем, что в нашем сайте используется резиновая верстка, поэтому размеры всех изображений области контента не фиксированы, и будут в дальнйшем определяться процентным соотношением с помощью стилей CSS.

Формируем атрибуты title


Следует сказать, что по вопросу, прописывать или нет атрибут title, а если да, то как, существует также много разных мнений. Например, одни считают, что атрибут title является необязательным для тега <img>. И поэтому использовать его не нужно.

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

Но, а если применять, то возникает еще один вопрос, могут ли в этом случае title и alt быть одинаковыми или должны по-разному описывать содержание картинки. Некоторые считают, что в отличие от alt, атрибут title должен быть более содержательным. А есть мнение, что это необязательно, и alt и title могут быть одинаковы.

Я больше склоняюсь ко второму варианту. Поэтому атрибут title при формировании тега <img> мы использовать будем, причем в его значении будем указывать то же самое наименование изображение, как и в alt.

Выполнив это условие мы получим окончательный вариант тега <img> для всех наших картинок в следующем виде.

  1. <img src="/images/article/main/ugon-avtomobilej-naibolee-rasprostranennoe-prestuplenie-v-rossii.jpg" alt="Угон автомобилей наиболее распространенное преступление в России" title="Угон автомобилей наиболее распространенное преступление в России">

  2. <img src="/images/article/main/blokirovka-koles-dlya-zashchity-avtomobilya.jpg" alt="Блокировка колес для защиты автомобиля" title="Блокировка колес для защиты автомобиля">

  3. <img src="/images/article/main/protivougonnaya-markirovka-stekol-avtomobilya.png" alt="Противоугонная маркировка стекол автомобиля" title="Противоугонная маркировка стекол автомобиля">

  4. <img src="/images/article/main/zamena-stekol-avtomobilya.jpg" alt="Замена стекол автомобиля" title="Замена стекол автомобиля">

  5. <img src="/images/article/main/protivougonnaya-markirovka-povyshaet-risk-byt-pojmannym-s-polichnym.jpg" alt="Противоугонная маркировка повышает риск быть пойманным с поличным" title="Противоугонная маркировка повышает риск быть пойманным с поличным">

  6. <img src="/images/article/main/markirovka-legkosemnyh-chastej-dlya-zashchity-dorogostoyashchih-detalej.jpg" alt="Маркировка легкосъемных частей для защиты дорогостоящих деталей" title="Маркировка легкосъемных частей для защиты дорогостоящих деталей">

  7. <img src="/images/article/main/vypolnenie-protivougonnoj-markirovki-v-servis-centrah.jpg" alt="Выполнение противоугонной маркировки в сервис-центрах" title="Выполнение противоугонной маркировки в сервис-центрах">

  8. <img src="/images/article/main/samostoyatelnoe-nanesenie-protivougonnoj-markirovki.jpg" alt="Самостоятельное нанесение противоугонной маркировки" title="Самостоятельное нанесение противоугонной маркировки">

Рис.3 Теги <img> с атрибутом alt и title

Таким образом мы закончили оптимизацию изображений и получили восемь сформированных тегов <img>, готовых к размещению в оформляемой HTML-странице. Чем мы и будем заниматься в следующей статье.

Исходные файлы сайта


Знак папкиИсходные файлы сайта с обновлениями, которые были сделаны в данной статье, можно скачать из прилагаемых дополнительных материалов:

  • Файлы каталога www
  • Таблицы базы данных MySQL

Дополнительные материалы бесплатно предоставляются только зарегистрированным пользователям.

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

Для тех кто не зарегистрирован, можно это сделать на вкладке Регистрация.

С уважением, Николай Гришин


Комментарии


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

Буду Вам за это очень признателен!

comments powered by HyperComments