css div информация об изображении для поисковых систем - PullRequest
Новая
       50

css div информация об изображении для поисковых систем

0 голосов
/ 31 мая 2011

У меня есть веб-сайт, и на главной странице a у меня есть div с изображением, где с очень хорошим дизайном написано «свяжитесь с нами, позвонив по номеру 1 800 блабла ...». так что я подумал, что если единственное место, где номер телефона моей компании, находится на карте с фоновым изображением, как поисковые системы будут распознавать или находить номер моей компании,

так что мой вопрос в основном, как я могу добавить информацию к этому div, которая: 

<div id="phone"></div>

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

Ответы [ 3 ]

0 голосов
/ 31 мая 2011

Вы должны использовать этот подход 

#ContactInformation {/* your image and restof padding */}
#ContactInformation h2 { display: none; visibility: hidden; }

<div id="ContactInformation">
    <h2>Phone:</h2>
    <label>1 800 blah blah</label>
</div>

На самом деле поисковые системы См. И проверьте тег h2 и его значение, но ваш пользователь не увидит текст h2 .

0 голосов
/ 31 мая 2011

Возможно, вы захотите взглянуть на спецификацию микроформатов hCard и создать HTML-код примерно так: 

<div class="call-us vcard">
    <span class="tel">
        <span class="type">business</span>
        <span class="value">+1.800.blabla</span>
    </span>
</div>

Где call-us имя класса форматирует div, устанавливая его размеры, визуально скрывая тег span.tel и добавляя изображение в качестве фона. Поисковые системы распознают, что это карточка контакта (обратите внимание на vcard имя класса), и они правильно проанализируют номер телефона.

0 голосов
/ 31 мая 2011

Довольно просто использовать технику замены изображений. 

<div id="phone"><span>11-1111-1111</span></div>

И CSS.(измените свой div телефона таким, каким он вам нужен, но вам нужно определить ширину и переполнение: скрытый, чтобы скрыть текст. 

#phone
{
    position: relative;
    width: 200px;
    height: 100px;
    overflow: hidden;
}

#phone span
{
    position: absolute;
    left: -999em;
}

В качестве альтернативы, без использования дополнительной разметки (я прочиталгде-то, что Google не одобрил использование текстового отступа таким образом, поэтому я не использовал его первым, но не могу найти источник для этого). 

<div id="phone">11-1111-1111</div>

И CSS. 

#phone
{
    width: 200px;
    height: 100px;
    overflow: hidden;
    text-indent: -999em;
}

Дополнительно: http://css -tricks.com / css-image-replace / выглядит как довольно приличный ресурс.

...