Как правильно скрыть тег <h1> и не быть забаненным в Google? - PullRequest
Новая
       3

Как правильно скрыть тег <h1> и не быть забаненным в Google?

18 голосов
/ 13 июля 2010

Сайт, над которым я работаю, использует изображение, определенное в CSS, в качестве основного логотипа.HTML-код выглядит следующим образом: 

<h1>Something.com | The best something ever</h1>

Я хотел бы отобразить только изображение, определенное в CSS, и передать информацию из тега h1 только для поисковых систем.

Что правильноспособ сделать это?Google очень строг в этом, я знаю, что дисплей: нет ничего плохого, а как насчет видимости: скрыто?

Заранее спасибо!

Ответы [ 10 ]

19 голосов
/ 13 июля 2010

Вы должны быть в порядке с visibility: hidden.

Тем не менее, если ваше изображение является частью контента (и я бы осмелился сказать, что логотип компании - это контент, а не презентация), и вы заботитесь о доступном html, вам следует подумать об изменении своего код для включения изображения в виде img элемента с title и alt ernate text вместо css background-image.

Кроме того, если вы хотите привлечь поисковые системы к ключевым словам внутри элемента <h1>, возможно, вы захотите включать эти слова более одного раза на страницу. Например, заголовок страницы гораздо более релевантен, чем элемент h1.

18 голосов
/ 13 июля 2010

Самое простое, надежное и лучшее для SEO решение будет 

<h1><img src=logo.png alt="Something.com | The best something ever"></h1>
3 голосов
/ 13 июля 2010

«Правильный» способ сделать это - поместить текст в строку заголовка или в метатекст вашей страницы.

3 голосов
/ 13 июля 2010

установите изображение в качестве фона вашего h1 (установите ширину / высоту так, чтобы оно подходило), затем установите текстовый отступ в нечто сумасшедшее, например -9999px.Таким образом, когда css отключен (например, при сканировании), бот увидит текст в заголовке вместо фона.

пример:

CSS 

#myHeader {
width:200px;
height:50px;
background: url('lcoation/of/the/image.jpg') top left no-repeat;
text-indent:-9999px;
}

HTML 

<body>
...
<h1 id='myHeader'>HELLO WORLD</h1>
...
</body>
2 голосов
/ 25 октября 2016 
<h1 style="font-size: 0px; margin: 0px;">Something goes here</h1>

Работает как шарм ....; -)

2 голосов
/ 15 июля 2010

Вы не получите хороших результатов SEO, если сначала спрячете h1, а во-вторых используйте общие фразы внутри h1.

Не просто используйте h1 для определения размера, вы можете использовать классыto style.

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

Ремонт автомобилей

Ремонт автомобилей - это ключевое слово, относящееся к конкретной странице.Я теоретически работаю над этим.

Надеюсь, это имеет смысл.

1 голос
/ 13 июля 2010

Я думаю, что видимость: скрытая;будет работать нормально.Вы уже пробовали это?

0 голосов
/ 10 июня 2016

Полная статья в этом вопросе объясняется здесь https://www.paciellogroup.com/blog/2012/05/html5-accessibility-chops-hidden-and-aria-hidden/ Поэтому, когда я работаю, я использую этот код для поддержки программы чтения с экрана, а также для того, чтобы скрыть некоторые h1 и использовать вместо них картинки вроде (логотип) 

.offscreen{
  position: absolute;
  clip: rect(1px 1px 1px 1px); /* for Internet Explorer */
  clip: rect(1px, 1px, 1px, 1px);
  padding: 0;
  border: 0;
  height: 1px;
  width: 1px;
  overflow: hidden;
}

чтобы узнать больше перейдите по ссылке

0 голосов
/ 13 июля 2010

Изменение размера блока будет работать: 

h1 {
    overflow: hidden;
    width: 1px;
    height: 1px;
}
0 голосов
/ 13 июля 2010

Ваш веб-сайт состоит из одной страницы?

В противном случае вы должны поместить заголовок каждой страницы в тег h1, а не в заголовок сайта. Повторение одного и того же заголовка на каждой странице сделает его практически бесполезным.

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

Нет похожих вопросов

...