CSS / HTML - правильный способ объединить текст и изображение в заголовке страницы

Question

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

Лучший совет Google по этому поводу - иметь <div> для заголовка и <h1> для текста. В CSS скройте <h1> с display:none; и добавьте изображение как фоновое изображение <div>. Это может работать для поисковых систем, но если изображение не загружается (или требует времени для загрузки), пользователь ничего не видит в верхней части страницы.

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

Еще один способ сделать это - использовать javascript и скрыть текст, когда изображение будет загружено. Это довольно неловкое решение и далеко не идеальное.

Каков наилучший способ сделать это?

Answer 1

Я склонен подходить к этой проблеме, используя немного менее чистый метод.

Я вкладываю изображение в h1, чтобы получить следующую разметку:

<div id="header">
        <h1>This is the header<img src="img/stackoverflowLogo.png" /></h1>
</div>

А затем используйте CSS для позиционирования относительного <h1> и изображения с position:absolute. Это приводит к тому, что изображение вынимается из потока документов и перемещается «над» текстом родительского элемента. Я использую CSS (похож на):

#header h1
    {position: relative;
    border: 0 none transparent;
    font-size: 2em;
    margin: 1em auto;
    border: 1px solid #ccc;
    }
#header img
    {position: absolute;
    top: 0;
    left: 0;
    }

Я разместил демо здесь: http://www.davidrhysthomas.co.uk/so/h1Img.html.

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

Во втором и третьем разделах я использовал jQuery, чтобы назначить <h1> размеры, равные размеру изображения, чтобы предотвратить (как и в первой версии) текст <h1>, выходящий за пределы самого изображения , следующим образом:

$(window).load(
    function() {
        var w = $('#logo').outerWidth();
        var h = $('#logo').outerHeight() ;

        $('#two h1').css('width',w,'height',h);
        $('#three h1').css('width',w,'height',h);
    }
);

Это немного глупо, очевидно, что это зависит от того, включен ли javascript, и также при загрузке страницы происходит небольшое мерцание страницы, когда документ запускает скрипт и применяет math / css.

Этот подход удовлетворяет вашим требованиям, чтобы текст был видимым до тех пор, пока само изображение не загружается, и он использует xhtml и CSS, чтобы скрыть текст. И если размеры изображения известны заранее, для не требуется jQuery / js для предотвращения переполнения.

(Приношу извинения Джеффу, Джоэлу и др. За использование логотипа SO без какого-либо разрешения, но в то время это было уместно ... =))

Answer 2

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

Я бы оставил разметку минимальной (всегда хорошая идея)

<h1>Title of your page</h1>

В CSS

h1 {
    text-indent: -10000px; /* Will hide text from users, while still showing for search engines/screen readers */
    background: url('../images/logo.png') no-repeat left top;
    width: 200px; /* your image dimensions */
    height: 50px;
}

Answer 3

Другой вариант - использовать CSS-свойство z-index , чтобы изображение загружалось поверх текста - текст все еще виден, но скрыт за изображением (например, «отправить наобратно ").Вероятно, это одно из самых низкотехнологичных решений:)