Вопросы про SEO верстку

 
Посетитель
small user social cms
МедальКубок зрительских симпатийАвторитет форума
Сообщений: 1842
Здравствуйте. Интересуюсь правильной версткой в плане SEO, почитал по нем ножку информации в общих понятиях понял что к чему но некоторые детали мне все еще не ясны. В данный момент я верстаю страницу вывода новости в нашей двойке. По дизайну картинка новости находится после заголовка и занимает всю ширину див блока статьи, зная что фото будут разные я решил сделать див блок высотой в 350пикселей и шириной в 100% и задать картинку в виде фона данного блока (фоновое изображение легче растягивать сохраняя пропорции) и вот встает вопрос, поисковик то не будет обращать внимание на данную картинку?
Чем меньше знаешь - тем Больше тупой.
OneMinima шаблон ICMS2
Посетитель
no avatar
Медаль
Сообщений: 232
Вы хотите картинку сделать бекграундом в css для дива?
Реклама
cms
Посетитель
small user social cms
МедальКубок зрительских симпатийАвторитет форума
Сообщений: 1842
Да, я картинку поставил в фоном для дива.
Чем меньше знаешь - тем Больше тупой.
OneMinima шаблон ICMS2
Посетитель
small user social cms
МедальКубок зрительских симпатий
Сообщений: 692
Я не специалист в СЕО и тем более не могу знать всех задумок приведших именно к такому решению, но с каких это пор "фоновое изображение легче растягивать сохраняя пропорции"?
Skype: pasha--g
Посетитель
small user social cms
МедальКубок зрительских симпатийАвторитет форума
Сообщений: 1842
Задав стилям следующие свойства картинка располагается в центре дива, вертикально и горизонтально, а свойство COVER растягивает фото пропорционально размерам картинки. Картинки будут разные, широкие высокие, другого нормального способа я не знаю, если они есть подскажите, буду рад.
Код PHP:
  1. .sl_img {
  2. background-position: center center;
  3. background-repeat: no-repeat;
  4. background-size: cover;
  5. }
Чем меньше знаешь - тем Больше тупой.
OneMinima шаблон ICMS2
Посетитель
small user social cms
МедальКубок зрительских симпатий
Сообщений: 692
Картинки будут разные, широкие высокие, другого нормального способа я не знаю,
Либо я чего-то недопонял, либо зачем городить все эти бэкграунды, для этого есть самый что ни на есть стандартный метод
Код CSS:
  1. img{
  2. max-width (ну или width если нужна жесткая привязка):100%;
  3. height:auto;
  4. }
Skype: pasha--g
Посетитель
small user social cms
МедальКубок зрительских симпатийАвторитет форума
Сообщений: 1842
Pasha, скорее всего не поняли, если в дизайне картинка имеет высоту больше чем ширину при указании ваших свойств она имеет занимает слишком много места по высоте растягиваясь на 100%. Мне нужно чтобы оно не было не выше 350 пикселей, и если я через стили обрежу картинку то ее трудно центрировать.
Вопросы про SEO верстку
Вот обычное изображение.
Вопросы про SEO верстку
Вот фоном.
Редактировалось: 1 раз (Последний: 31 января 2015 в 13:06)
Чем меньше знаешь - тем Больше тупой.
OneMinima шаблон ICMS2
Посетитель
small user social cms
Медаль
Сообщений: 238
Если у Вас вопрос про СЕО верстку, то для СЕО конечно же лучше прописывать картинку как есть (не фоном), и прописать все атрибуты, - как минимум alt. Если Вас больше волнует дизайн, то здесь не подскажу.
Посетитель
small user social cms
МедальКубок зрительских симпатий
Сообщений: 692
Atid - Gorec, но так же тоже нельзя. Кто же делает адаптивность обрезая контент... Я как пользователь вижу что разрешено грузить все что хочется, загружаю например портрет любимой кошки на своем фоне, причем кошка валяется где-то в ногах,... и что я увижу после отрабатывания такой адаптивности? Подвинем фон вниз? А если это фото попугайчика?

Нужна максимальная высота 350, значит так и укажите в стилях, а рисункам при указании высоты вместо авто присвойте max-height:100% Рисунок в любом случае будет следовать за несущим блоком, куда ему деваться с подводной лодки...
Skype: pasha--g
Посетитель
small user social cms
Медаль
Сообщений: 279
Можно указать размер картинки только по ширине не будет обрезаться.
Посетитель
small user social cms
МедальКубок зрительских симпатийАвторитет форума
Сообщений: 1842
Все трое предложили правильные варианты. Делаю я так потому что шаблон на продажу, а клиенты грузят все что угодно. Для удобства всем сделал 4 варианта вывода фото в новостях. 1 Слева или 2 справа фото (макс ширина 300пикс) обтекаемое текстом, 3 Фото в центре с авто шириной и высотой и 4 на всю ширину. Пускай выбирают. А так фото на всю ширину чисто из за дизайнерских потребностей была сделана. Спасибо за советы.)))
Чем меньше знаешь - тем Больше тупой.
OneMinima шаблон ICMS2
Посетитель
small user social cms
МедальАвторитет форумаКубок зрительских симпатийПочетный донор проекта
Сообщений: 2928
Atid - Gorec:
поисковик то не будет обращать внимание на данную картинку?

Стили это не контент, поэтому данная картинка просто не будет участвовать в вероятной поисковой выдаче, и не будет влиять на результаты выдачи.
Посетитель
small user social cms
МедальКубок зрительских симпатийАвторитет форума
Сообщений: 1842
Микроразметка, от нее какой-нибудь толк есть? Добавил сегодня к шаблону микроразметку к альбому с фотками.
Чем меньше знаешь - тем Больше тупой.
OneMinima шаблон ICMS2
Посетитель
small user social cms
МедальКубок зрительских симпатийАвторитет форума
Сообщений: 1164
Atid - Gorec, возвращаясь к вашим предыдущим сообщениям... а вы не пробовали следующие стили:
Код CSS:
  1. img {
  2. object-fit: cover;
  3. }
или
Код CSS:
  1. img {
  2. min-width: 100%;
  3. object-fit: cover;
  4. }
Посетитель
small user social cms
МедальКубок зрительских симпатий
Сообщений: 953
вот интересный эффект с классом:
Код PHP:
  1. .none {
  2. width: 200px;
  3. height: 200px;
  4.  
  5. overflow: hidden;
  6. object-fit: none;
  7. object-position: 25% 50%;
  8. transition: 1s width, 1s height;
  9. }
  10.  
  11. .none:hover, .none:focus {
  12. height: 350px;
  13. width: 350px;
  14. }
Редактировалось: 1 раз (Последний: 24 февраля 2015 в 09:50)
Все идет хорошо, только мимо...
Web-Studio «PAL»
БЕСПЛАТНАЯ РАСКРУТКА САЙТОВ
В начало страницы
Предыдущая темаСледующая тема Перейти на форум:
Быстрый ответ
Чтобы писать на форуме, зарегистрируйтесь или авторизуйтесь.