Размещение и оптимизация картинки на сайте

Как разместить картинки в тело статьи

Как установить картинки в тело статьи и оптимизировать их с помощью редактора на сайте? Как поставить картинки на сайт? Об этом сегодня и пойдет речь на «Первом старте сайта».

Зачем нужны кaртинки на сaйте?

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


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

Где взять картинку?

  1. Существуют сервисы бесплатных картинок, которые возможно размещать на своем сайте, там можно выбрать картинку на любую тему.
  2. Любая поисковая система также имеет банк картинок, которые можно использовать. Но, к сожалению, такие картинки не уникальны.
  3. Уникальную картинку можно сделать, используя изображение из интернета, оформив его в фотошопе или программе Paint.
  4. А лучше всего использовать фотоаппарат. Тогда уникальные и неповторимые фото будут украшать ваш сайт.

Подробнее об этом мы будем говорить в следующей статье.

Как установить картинку на сайт?

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

Для этого заходим в Консоль сайта, выбираем черновик нашей статьи, ставим курсор (рис.1–1) на то место, где хотим, чтобы находилась наша картинка.

Нажимаем на «Добавить медиафайл» (рис.1 – 2)

Рис.1

Как разместить картинку в тексе

Теперь перед нами всплывающее окно «Добавить медиафайлы». В нем мы видим три вкладки: «С компьютера», «С сайта», «Библиотека файлов».

1. Чтобы загрузить картинку с компьютера нужно всего лишь нажать на кнопку «Выберите файлы». Появится всплывающее окно вашего компьютера. Выделяем файл изображения и нажимаем «Открыть». После того, как произошла загрузка, появляется вкладка для настройки картинки.

А можно сделать проще: на рабочем столе вашего компьютера открыть два окна и просто перетащить фото мышкой. 

2. Если вы хотите разместить фото, находящееся на другом сайте. То вам нужно скопировать его адрес (URL) с помощью правой кнопки мыши (рис.2).

рис.2

Как разместить картинку в статью

Теперь осталось вставить адрес картинки в графу URL (рис.3).

рис.3

как разместить картинку на сайте

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

3. Если нужно использовать картинку из Библиотеки файлов, которые находятся на сайте, то выберите вкладку «Библиотека файлов» (рис.4 – 1). Здесь нужно выбрать картинку (2) и нажать на слово «Показать»(3).

рис.4

Как разместить картинку на сайте

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

Под миниатюрой картинки вы видите кнопочку «Редактировать» (Рис.5). Её можно использовать для того, чтобы изменить направление рисунка и  уменьшить его в размере. 

 рис.5

Размещаем картинку в тексте

Все это я делаю до того, как разместить картинку на сайт с помощью графического редактора на своем компьютере. Вы же можете поэкспериментировать. Нужно же знать возможности WordPress.   :-)

 

 Как оптимизировать картинки с помощью редактора

Рис.6.

Картинка в тексте

После загрузки картинки на сайт, вы увидите имя файла и все остальные её данные (рис.6).

  • Имя файла (рис.6 – 1). Оно должно быть обязательно в транскрипции на английском языке.

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

Для этого нужно переименовать имя картинки на своем компьютере. При этом используйте расширение .jpg или .png.

  • Заголовок (рис.6 – 2)  автоматически копирует имя файла. Его нужно переписать русскими буквами. Заголовок могут прочесть посетители сайта, если наведут курсор на картинку. И он отображается тогда, когда изображение картинки по каким-то причинам пропало.
  • Текст  (рис.6 – 3) можно увидеть, если картинка попала в поиск. Поэтому лучше для неё взять ключевые слова, используемые в статье.
  • Описание (рис.6 – 4)  - вставляем часть текста из статьи, которая расположена рядом с картинкой, и которая максимально точно дает её описание.
  • Подпись – можно увидеть под картинкой в статье. Эту функцию я не использую, а вы можете поэкспериментировать, возможно, вам и понравится. Говорят, что используя подпись для картинки можно безнаказанно вставить лишнее ключевое слово и  это не будет влиять на переоптимизацию страницы.
  • Ссылка на картинку прописывается здесь автоматически. Кто-то её убирает. Если честно, то я не совсем поняла зачем.

Выравнивание картинки в тексте 

Где лучше размещать картинки? Это зависит во многом от назначения статьи и её стиля. 

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

Чтобы правильно расположить картинку воспользуемся функцией выравнивания. Для этого выбираем место расположение «Слeва» «По цeнтру», «Спрaвa» или «Нет» (рис.7 - 1)

рис.7

Как поставить картинку на сайт

Затем нужно выбрать размер картинки (рис.7 - 2). Здесь все зависит от вашего стиля. Размер изображения обычно рекомендуют выбирать не очень маленький (попасть в выдачу поиска очень малая вероятность) и не очень большой (время загрузка сайта может пострадать). Оптимальным размером считается 640х480, 800х600, 1024х768.

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

Работа по оптимизации изображения закончена. Теперь осталось нажать на кнопку «Вставить в запись» (рис.7 - 3). Если в дальнейшем нужно будет, что-то отредактировать, то после изменений нужно просто нажать кнопочку «Сохранить все изменения».

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

О  требованиях Google к размещению картинок на сайтах   можно прочесть в рекомендациях к вебмастерам в разделе «Картинки».

Как поставить картинку на сайт и оптимизировать её - об этом мы говорили сегодня. В следующих статьях мы подробнее поговорим о том, где взять  бесплатно картинки для оформления сайта, как добиться уникальности картинки и уменьшить её вес. Для того чтобы не пропустить эти статьи не забудьте подписаться на обновления сайта. Форма подписки внизу статьи.

@М.Антонова 

------------------------------------------------------

«Первый старт сайта» предлагает статьи по этой теме:

  1. Как написать интересную статью для сайта
  2. Как правильно написать оптимизированную статью для сайта
  3. Проверяем текст на ошибки
  4. Как работать в текстовом редакторе WordPress
  5. Форматирование текста статьи с учетом SEO оптимизации

Статьи на эту тему

21 комментариев

  1. Мне всегда было так лень заполнять поля с текстом и описанием, только недавно я поняла, что это лишний способ впихнуть ключевые слова в статью :)
    Хотела поделиться своим способом изменения размера изображения,сама недавно стала использовать, т.к. дефолтовые размеры не подходят под мой шаблон, и мне понравилось, может еще кому пригодиться. Я захожу в HTML вид черновика статьи и меняю там размер вручную 500 на 375 — и я спокойна, что картинка будет не большой и не маленькой — в самый раз!

  2. Я примерно так и делаю. У меня, правда, заголовок написан в транслитерации латинскими буквами. Может правильно будет писать его по русски. Нас учили писать его латинскими буквами.

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

    • Елена, когда вы начинаете размещать статью, после первого сохранения сформируется ссылка в транскрипции английскими буквами. Нажмите на кнопочку рядом с ссылкой «Изменить». Ссылка выделится, теперь вы её скопируйте.
      На своем компьютере выделите файл с картинкой и переименуйте его, вставив название ссылки, которую скопировали в редакторе.
      Все — картинка имеет имя, аналогичное имени в адресе ссылки, да и ключевое слово в её названии тоже уже есть.

  3. Я никогда раньше не задумывалась об этом, пока сама не стала продавать свои фотографии на фотостоках…
    Часто бесплатные картинки на всяких сервисах нарушают авторские права авторов, часто они приобретены не совсем честным способом. А картинки из поисковых систем не советовала бы использовать, это тоже нарушение авторского права, если вы используете чью-то картинку, то нужно указывать автора, а не просто взял и пользуюсь. Чтобы не нарваться на неприятности лучше фотографировать и рисовать самому, либо покупать картинки на стоках.
    А за то, как вставлять картинки в запись, большое спасибо, очень полезная информация.

  4. Марина, я как раз искала статью о том, как оптимизировать картинку, чтобы она тоже попадала в поиск. Очень полезная информация. Осталось только разобраться с кодом Pikassa. Всегда пользуюсь фотоаппаратом и редактором фотографий. Все фото обрабатываю и сразу уменьшаю до размера 500х375. У меня возникло несколько вопросов.
    — нужно ли выделять ключи в описании картинки тегами?
    — нормальный ли размер моих фото для того, чтобы картинка попадалав поиск?
    — каким должен быть вес главной страницы?

    • Юлия, если вы будете использовать сервис Pikassa, то ваши картинки не попадут в поиск (на своем сайте вы публикуете ссылку на фото с другого сервиса), но при этом вес вашего сайта будет меньше и загружаться он будет намного быстрее.
      — Ключи в описании картинки не выделяются.
      — Для того, чтобы картинка попала в поиск нужно, чтобы она была уникальной, а размер влияет только на позиции выдачи. В Яндексе, чем картинка больше, тем она выше в выдаче. В Гугле смотрят на соответствие названия картинки и того, что на ней изображено.
      — сервис для анализа сайтов seop.ru говорит, что вес страницы не должен превышать 30Кб

  5. Марина, а если я буду уменьшать картинки до 1000 пикселей по ширине, а уже на сайте уменьшать их до нужного размера? Размер картинки будет считаться каким?
    То есть вы советуете загружать картинки прямо на сайт. А как же в таком случае уменьшить вес главной страницы?

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

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *