Правильно ли использовать изображения внутри тегов заголовка?

Question

Я немного погуглил по этому вопросу, но не смог получить прямой ответ.

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

<h1><img src="header.jpg" alt="Level 1 Header" /></h1>

Имеет ли он такой же эффект, как этот?:

<h1>Level 1 Header</h1>

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

Answer 1

Один старый трюк - поместить настоящий текст в поле <h1>, но затем с помощью CSS сделайте текст невидимым и поместите изображение в фоновый режим.

Итак, вы бы сделали что-то вроде:

h1 {
  color: transparent;
  background-image: url(your/cool/image.png);
  width:400px; height: 300px;
}

Член Astute Stackoverflow К Иванов указывает, что, вероятно, было бы лучше сделать текст невидимым, поместив его далеко от страницы с помощью "text-indent: -5000px" или чего-то еще.

Answer 2

Общепризнанная практика (ни хорошая, ни плохая) - использовать text-indent:-9999px; вместе с overflow:hidden; для заголовков.

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

Это означает, что вы можете иметь хорошее большое описание / заголовок в вашем <header> и иметь изображение с описанием / заголовком так, как вы хотите, чтобы оно выглядело так, чтобы вы получили лучшее из обоих миров.

Прекрасный пример этого: http://www.sohtanaka.com/web-design-blog/

Раздел «LatestWord» является изображением, но если вы посмотрите на CSS для раздела, вы увидите эту технику.

Answer 3

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

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