Изображения: альтернативный текст и / или текст заголовка? - Основы тегов изображений

  1. Источник: Путь / URL изображения
  2. Ширина и Высота
  3. Альтернативный текст
  4. Название изображения (универсальный атрибут)
  5. longDesc - описание изображения
  6. Атрибуты для презентации
  7. Вывод: альтернативный текст и / или текст заголовка?

25 марта 2009 г. 25 марта 2009 г

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

[ Новое (ноябрь 2017 г.): " Что важнее - альтернативный текст или текст заголовка? «И» Что должно быть написано в тексте alt и атрибуте title? « ] Для чего нужен альтернативный текст?» - «Насколько важен альтернативный текст для картинок?» - в этой статье рассматриваются основы картинок на веб-сайтах. В последние несколько дней я провел два исследования некоторых атрибутов изображения: " Img атрибуты src, alt и title «(Фокус на поиск изображений) и» Атрибуты изображений в Google Universal Search Images » (Фокус на универсальном поиске изображений). По сути, речь шла о влиянии атрибутов как факторов ранжирования. Итак, вопросы SEO. Но, конечно, поисковая оптимизация - это просто пирог. Картинки не интегрированы в сайт для поисковых систем, а для пользователя. Поэтому я хочу описать в этой статье временами основные основы тега изображения.

Источник: Путь / URL изображения

HTML-страница, представляющая браузер, структурирована так называемыми «тегами». Изображение на веб-сайте называется тегом изображения. HTML-код для вызова изображения выглядит примерно так:

<img src = "www.domain.de/folder/picture.jpg" />

Решающим для вызова изображения является, конечно же, указание источника изображения. Какой URL можно использовать для вызова изображения. Спецификация может быть абсолютной или относительной, как со всеми URL. Я в основном рекомендую сделать все детали URL абсолютно. Относительные пути являются потенциальными источниками ошибок. Атрибут SRC - это единственное обязательное условие. Логический. Все следующие атрибуты являются необязательными и используются для описания содержимого изображения или для лучшего представления и позиционирования.

Ширина и Высота

В дополнение к источнику изображения (source, src) также должны быть заданы ширина и высота (ширина и высота).

<img src = "www.domain.de/folder/picture.jpg" width = "100" height = "150" />

Причина: макет страницы быстрее, потому что браузеру не нужно ждать, пока изображение отобразится, пока изображение не будет загружено и эти значения не определены. Вместо этого браузер устанавливает «фиктивный контейнер» с указанными значениями и продолжает строить страницу. Затем изображение может быть загружено и вставлено в контейнер. Характеристики ширины и высоты могут отличаться от фактического размера изображения. Изображение затем «запихивается» в контейнер - это называется «масштабирование». Таким образом, вы можете не только настроить размер изображения, но и пропорции изображения.

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

Альтернативный текст

Далее вы должны определить атрибут ALT:

<img src = "www.domain.de/folder/picture.jpg" width = "100" height = "150" alt = "Я картина" /> <img src = www

Альтернативный текст

Альтернативный текст, как следует из названия, отображается альтернативно. Так что только если изображение не видно по какой-либо причине. Это может иметь несколько причин: проблема с сервером, неправильный путь, изображения, отключенные через браузер, или просто «поддержка чтения» для пользователей с плохим зрением или слепотой. Следовательно, с точки зрения W3C, альтернативный текст также является «обязательным утверждением». Браузер обычно может отображать изображение без альтернативного текста, но настоятельно рекомендуется установить альтернативный текст.

Название изображения (универсальный атрибут)

Кроме того, вы можете определить «универсальный атрибут» Заголовок для вызова изображения:

<img src = "www.domain.de/folder/picture.jpg" width = "100" height = "150" alt = "Я картина." title = "Я - изображение. [например, авторское право автора]" /> <img src = www

Подсказка

Атрибут title отображается в браузере как «всплывающая подсказка». Если вы наведете курсор на элемент с атрибутом title, через некоторое время появится вид «слой с пояснительным текстом». А именно, именно текст для чтения задается в атрибуте Title. Таким образом, атрибут Title является дополнительной информацией, а не альтернативой.

У легендарного Internet Explorer 6 было «Macke», что он отображал альтернативный текст в виде всплывающей подсказки вместо текста заголовка. Кроме того, слух гласит, что альтернативный текст является текстом «всплывающей подсказки».

Кроме того, слух гласит, что альтернативный текст является текстом «всплывающей подсказки»

Атрибуты заголовка

Многие веб-дизайнеры / программисты следуют рекомендациям W3C при создании HTML-кода, что прекрасно на SelfHTML Страница описана. На стороне тега атрибуты находятся на тег изображения однако атрибут title отсутствует в списке. Поэтому многие считают, что нельзя вообще устанавливать «Атрибут заголовка для картинок». Это не правильно. Потому что «Заголовок» является так называемым. Универсальный атрибут это можно вставить практически во все многие теги.

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

longDesc - описание изображения

LongDesc - это сокращение от «Long-Description». Этот атрибут был введен некоторое время назад, так что альтернативный текст изображений не слишком длинный, если это необходимо. Те, кто хотел предложить подробное описание изображения, должны предоставить его на дополнительной HTML-странице. Значением атрибута longDesc является URL этого описания изображения.

<img src = "www.domain.de/folder/picture.jpg" width = "100" height = "150" alt = "Я картина." title = "Я - изображение. [например, авторское право автора]" longdesc = "https://www.tagseoblog.de/bilder-longdesc/bild.html" />

Атрибут longDesc был введен в контексте «доступности сайта». Однако, это никогда не преобладало. Основная проблема заключается в том, что браузеры просто не отображают его и не делают его пригодным для использования. В Firefox вы можете по крайней мере увидеть html-страницу описания изображения в свойствах изображения. Но вы должны скопировать URL вручную и вставить его в адресную строку, чтобы открыть страницу. Не совсем удобно. Поэтому longdesc может быть безопасно опущен, на мой взгляд. Я не использовал его ни в одном из моих проектов. Но для находчивого оптимизатора изображений оптимизатор может стать хорошим тестовым объектом.

Ранее упомянутые атрибуты «Src», «Alt» и «Title» (и «longDesc») также могут называться «чувствительными к содержимому» атрибутами. Из них можно прочитать текстовую информацию. Эта информация полезна для посетителей и дает поисковым системам возможность выводить содержание изображений.

Основы изображений Tag - Основы изображений на веб-сайтах

Атрибуты для презентации

Чтобы аккуратно интегрировать изображение в веб-сайт, существует ряд атрибутов презентации, которые берут свое начало в древние времена Интернета. Например, вы можете определить рамку (border = "4"). Значение («4») указывает ширину пикселя кадра. Но я больше не хочу вдаваться в эти «древние атрибуты», потому что, конечно, презентация сегодня решается с помощью CSS («Каскадная таблица стилей»). Здесь вы определяете внешний вид изображения в атрибуте стиля:

<img src = "www.domain.de/folder/picture.jpg" width = "100" height = "150" alt = "Я картина." title = "Я - изображение. [например, авторское право автора]" style = "border: # 111 4px solid; float: left; margin: 0 12px 0 0" />

В этом примере рамке задается рамка шириной 4 пикселя, темно-серая (# 111), сплошная (сплошная). Изображение корректируется слева от текста (с плавающей точкой: слева) и сохраняет текстовое расстояние до текста (0 вверх, 12 пикселей вправо, 0 вниз и 0 пикселей слева). Подробнее о CSS форматирование здесь ,

Ну, и, конечно, вы должны поместить на чисто построенную страницу, CSS-информация будет находиться в отдельном CSS-файле. Затем он определяет элементы класса, которые вызываются в коде HTML, как селектор класса. В нашем примере это выглядит так:

<img src = "www.domain.de/folder/picture.jpg" width = "100" height = "150" alt = "Я картина." title = "Я - изображение. [например, авторское право автора]" class = "picture-style" />

Класс Image-Style можно затем вызывать из любого изображения на веб-сайте. Ну, и, как описано здесь, я использую мои изображения: ширину и высоту, alt, title и class. Если вы не верите этому, вы можете открыть исходный код и взглянуть на него.

Вывод: альтернативный текст и / или текст заголовка?

Картинки - картинки

Итак: longDescription можно пренебречь. Атрибуты презентации индивидуальны. Конечно, имя файла уже должно иметь отношение к тому, что показано на картинке. Альтернативный текст и / или текст заголовка? А что ты пишешь на сколько обширно?

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

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

Картинка на картинке (картинка с картинкой в ​​центре)

Так же, как основные изображения на веб-сайтах - по крайней мере, в части HTML. Если бы я что-то забыл, я был бы благодарен за комментарий.

Другие веб-ссылки и статьи

Похожие

Основы SEO: как разнообразить свой якорный текст
... текст, чтобы избежать штрафов за чрезмерную оптимизацию, является одной из самых горячих тем в сообществах цифрового маркетинга. И хотя я не могу утверждать, что знаю со 100% уверенностью, что Google считает приемлемым в этом отношении, я хотел бы рассказать вам о процессе, который я использую при создании якорных текстовых распределений для создание ссылок кампания. Я надеюсь, что вы найдете
Правда о совершенных SEO URL
... заголовкам: как можно дольше и как можно короче. Хитрость заключается в том, чтобы найти правильную длину. Я не знаю какой-либо «оптимальной» длины для URL, но URL во фрагменте усекается после определенного количества символов. К сожалению, никакой конкретной информации нет , потому что она варьируется с одной стороны (я думаю, что Google уделяет здесь внимание частично разделителям, поэтому слова в середине не обрезаются, а также как «промежуточные каталоги»
SportsEngine | Улучшить рейтинг поиска по сайту (SEO)
... альтернативный текст изображения: Шаг 1: Включите режим редактирования Шаг 2: Выберите значок Gear элемента изображения страницы Шаг 3: Выберите Edit из выпадающего Шаг 4: Обновите поле Alt Text Создать популярный контент
Основы и основы: 6 SEO советов для сайтов Joomla
... ик Joomla, вы знаете все преимущества каждого создаваемого вами сайта. От навигации до каркаса к контенту, вы мастер всей картины. Но что, если это сообщение и информация, которую вы выводите, не попадают в поисковые системы? Эта статья поможет вам улучшить производительность SEO на сайтах Joomla - необходимый навык для современного разработчика. Поскольку клиенты ищут разработчиков и агентства с различными способностями, практическое знание основ SEO будет бесценным активом
Загрузка программного обеспечения для отправки URL
Главный / Приключение / ПО для отправки URL Название: ПО для отправки URL Размер файла: 987mb Язык: Английский Рейтинг: 5/10 Скачать IBP - это мощное программное обеспечение для представления в поисковых системах, которое
Как оптимизировать ваши изображения на WordPress
Мне очень понравился недавний пост Эми Баллиетт 3 совета по планированию вашей SEO-кампании для Visual Web Это заставило меня подумать, что, возможно, вы хотели бы знать, как оптимизировать ваши изображения в WordPress.
SEO оптимизация для Joomla
... заголовка в статье, как вы можете видеть на изображении ниже. На этом этапе вы можете работать с текстом контента, пытаясь оптимизировать H1 и H2 вокруг ваших ключей поиска. Не только Joomla: как оптимизировать статью на WordPress на стороне SEO , Улучшить описание
URL параметров - Хорошие и плохие для SEO!
В. Что такое URL параметров? Они хорошие или плохие? Это хорошая идея, чтобы перейти на WordPress в этом случае? О. В основном URL-адреса, содержащие динамический символ, в основном «?», Рассматриваются как URL-адреса на основе параметров. Вот несколько примеров - http://www.mysite.com/hotel-search-results.jsp?Ne=292&N=461
Облако тегов SEO - Облако тегов Помощь в SEO?
... иняет несколько слов и / или фраз, которые являются наиболее используемыми, наиболее релевантными или интересными в соответствии с некоторым критерием, и представлена ​​на сайте визуально привлекательным способом ( как на следующем рисунке), или в простом списке. Как правило, этот список создается таким образом, что каждое слово или фраза является ссылкой на другую страницу
Идеальная SEO структура URL
Идеальная SEO структура URL является неотъемлемой частью целостного подхода SEO оптимизация и в то
🥇 🥇 SEO для изображений: как оптимизировать их, чтобы улучшить ваше позиционирование
... тексту Первое, что мы должны принять во внимание, хотя это кажется глупым, это контекст, в котором мы движемся, очень хорошо зная, каково содержание нашей страницы, чтобы найти изображения в соответствии с ним . Вставка изображений, которые не имеют никакого отношения к тексту

Комментарии

Что бы вы выбрали, если бы вам пришлось выбирать между: двигателем или тормозной системой, шиной или системой рулевого управления, маслом или антифризом?
Что бы вы выбрали, если бы вам пришлось выбирать между: двигателем или тормозной системой, шиной или системой рулевого управления, маслом или антифризом? Вы понимаете, что все эти компоненты связаны и дополняют друг друга, поэтому они не могут функционировать независимо - такая же ситуация в SEO оптимизации. Невозможно оптимизировать только несколько компонентов, игнорируя при этом другие и ожидая, что процесс будет работать правильно и эффективно. 2. Ежемесячные авансовые платежи (ежемесячные
» Или «Могу ли я включить оригинальное исследование или тематическое исследование ?
Что хорошего в веб-сайте или социальной сети, если никто не видит или не взаимодействует с ним?
Что хорошего в веб-сайте или социальной сети, если никто не видит или не взаимодействует с ним? Вот где зарабатываются средства массовой информации. Заработанные средства массовой информации - это, по сути, онлайн-сарафанное радио, обычно представляемое в форме «вирусных» тенденций, упоминаний, акций, репостов, обзоров, рекомендаций или контента, получаемого сторонними сайтами. Одной из наиболее эффективных движущих сил заслуженных медиа обычно является совокупный результат сильного органического
Может быть, эта большая круговая диаграмма с разбивкой по кликам или показам по устройствам не нужна на первом экране, если она не очень часто меняется или дает какие-либо действенные идеи?
Может быть, эта большая круговая диаграмма с разбивкой по кликам или показам по устройствам не нужна на первом экране, если она не очень часто меняется или дает какие-либо действенные идеи? И если разлитое устройство часто меняется, будет ли круговая диаграмма информативной? Может быть, лучше иметь таблицу или систему показателей с изменением в% или абсолютных числах? Я решил создать первую страницу с обзором результатов поиска и использовать разные страницы для более детальной
Итак, когда вы пишете содержание своего поста или страницы, собираетесь ли вы начинать содержание словами или предложениями, которые вы хотите найти на странице поиска?
Итак, когда вы пишете содержание своего поста или страницы, собираетесь ли вы начинать содержание словами или предложениями, которые вы хотите найти на странице поиска? Конечно, нет. Вы, вероятно, начали бы свой пост с юмора, и вы не хотите, чтобы это появлялось в результатах поиска. Вот почему мета-описания важны. И поэтому еще важнее написать мета-описание для каждой страницы и поста. Для более подробного объяснения, давайте возьмем пример из этого самого поста, если вы прокрутите
Страницы с проблемами скорости содержат ненужное использование видео, сценария или негабаритных изображений?
Страницы с проблемами скорости содержат ненужное использование видео, сценария или негабаритных изображений? Ряд факторов может привести к тому, что отдельные страницы будут загружаться медленнее, чем другие, но решение этих проблем может оказать большое влияние на охват этих страниц поиском. 31. Внутренний обзор ссылок Внутренние ссылки являются основным фактором в SEO; это помогает эффективно сканировать веб-сайт, в то же время позволяя ссылочному соку проходить через страницы.
Итак, как вы определяете, является ли URL читабельным или нет?
Итак, как вы определяете, является ли URL читабельным или нет? Посмотрите на иллюстрацию ниже, чтобы иметь приблизительное представление: Общая идея заключается в том, что ваш URL не обязательно должен быть абсолютно идеальным, но он должен быть, по крайней мере, простым для понимания
Вывод - строить или не строить?
Вывод - строить или не строить? Когда мы подходим к заключению нашего обзора Wix, важно помнить, что у каждого разработчика сайтов есть свои сильные и слабые стороны. Если вы рассматриваете Wix, вам необходимо определить, предлагает ли этот конструктор веб-сайтов правильные функции, цены и услуги, которые наилучшим образом соответствуют вашим потребностям. Для получения дополнительной информации о Wix, посетите их веб-сайт по адресу www.wix.com
Вы сначала читаете заголовок или текст статьи?
Вы сначала читаете заголовок или текст статьи? Ответ очевиден, конечно, я бы прочитал заголовок, прежде чем перейти к статье. Так что для написания SEO-оптимизированной статьи, SEO-оптимизированная статья является обязательной. Но вы, вероятно, слышали о двух разных типах заголовков, а именно: заголовок поста и мета заголовок. Но какая между ними разница? Итак, давайте сначала поймем реальную разницу между заголовком поста и мета-заголовком.
Так что лучше никогда не использовать теги или облако тегов?
Так что лучше никогда не использовать теги или облако тегов? Почти там. Вы можете использовать облако тегов, однако, вместо того, чтобы использовать его в традиционном формате, который автоматически генерируется либо из тегов, используемых в сообщениях блога, либо из внутренних поисковых терминов на сайте, и т. П., Вы можете использовать управление тегами вручную. Вы можете использовать облачный тег, чтобы выбрать, какие термины использовать, чтобы указать, какие страницы
У вас есть вопросы по поводу наших советов или вы хотите поделиться своим опытом?
У вас есть вопросы по поводу наших советов или вы хотите поделиться своим опытом? Мы с нетерпением ждем ваших комментариев! Большой привет, Markus

» - «Насколько важен альтернативный текст для картинок?
Вывод: альтернативный текст и / или текст заголовка?
Альтернативный текст и / или текст заголовка?
А что ты пишешь на сколько обширно?
Что тогда имеет смысл?
Какие условия наиболее подходящим образом заменят картину?
Но что, если это сообщение и информация, которую вы выводите, не попадают в поисковые системы?
Что такое URL параметров?
Они хорошие или плохие?
Это хорошая идея, чтобы перейти на WordPress в этом случае?

Популярное
Атомэнергопром - атомная отрасль России - главная
АО «Атомэнергопром» (полное название — акционерное общество «Атомный энергопромышленный комплекс») — интегрированная компания, консолидирующая гражданские активы российской атомной отрасли . Атомэнергопром

ЗАВОД №9, Екатеринбург
"ЗАВОД №9", ОТКРЫТОЕ АКЦИОНЕРНОЕ ОБЩЕСТВО Регион Свердловская область, Екатеринбург Адрес 620012, г. ЕКАТЕРИНБУРГ, пл. ПЕРВОЙ ПЯТИЛЕТКИ Телефон (343) 327-29-32 Факс (343)

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

Личный кабинет НПФ Доверие
НПФ «Доверие» — акционерное общество, предлагающее программы переноса в Фонд накопительной части пенсии по договору ОПС и программы формирования дополнительной негосударственной пенсии по договору НПО.

МУ СБР в ПФО (г. Нижний Новгород) - АООТ ТНК «Гермес-Союз» (ОАО «Промышленная компания «Гермес-Союз»)
  АООТ  ТНК «Гермес-Союз» (ОАО «Промышленная компания «Гермес-Союз») Акционерное общество открытого типа Транснациональная нефтяная компания «Гермес-Союз» (АООТ ТНК «Гермес-Союз») – наименование

ФЛ "БАРНАУЛЬСКИЙ" ЗАО "РАЙФФАЙЗЕНБАНК" - г. БАРНАУЛ, пр-т ЛЕНИНА, д. 163 - ФИЛИАЛ "БАРНАУЛЬСКИЙ" ЗАКРЫТОГО АКЦИОНЕРНОГО ОБЩЕСТВА "РАЙФФАЙЗЕНБАНК" В Г. БАРНАУЛЕ
ОКАЗАНИЕ УСЛУГ ПО ОТКРЫТИЮ И ВЕДЕНИЮ РАСЧЕТНЫХ СЧЕТОВ УПРАВЛЕНИЯ ФЕДЕРАЛЬНОГО КАЗНАЧЕЙСТВА ПО АЛТАЙСКОМУ КРАЮ ДЛЯ УЧЕТА ОПЕРАЦИЙ ПО ОБЕСПЕЧЕНИЮ ПОЛУЧАТЕЛЕЙ СРЕДСТВ БЮДЖЕТОВ БЮДЖЕТНОЙ СИСТЕМЫ РОССИЙСКОЙ

Традиционное (аграрное) общество
Традиционное (аграрное) общество представляло доиндустриальную стадию цивилизационного развития. Традиционными были все общества древности и средневековья. Их экономика характеризовалась господством

Новости компаний
Другие отчётные документы "Автоматика" в ИПС "ДатаКапитал" ОПУБЛИКОВАННЫЕ СООБЩЕНИЯ ЭМИТЕНТОВ АО "Концерн "Автоматика" - Проведение общего собрания акционеров акционерного

АО "НОВЫЙ РЕГИСТРАТОР"
Предлагаемая компанией продукция и услуги: Трансфер-агентское и регистраторское обслуживание Приобретаемая компанией продукция и услуги: - Дополнительная информация о компании: Член ПАРТАД

Банк "ГЛОБЭКС" - кредитование, вклады, банковские карты, денежные переводы, банковские услуги.
Примечание к курсам для безналичных операций по банковским картам При совершении безналичных конверсионных операций по банковским картам (покупки/продажи) Банком применяется механизм установления

Счетчики