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

#1 30 января 2015 в 02:59
Здравствуйте. Интересуюсь правильной версткой в плане SEO, почитал по нем ножку информации в общих понятиях понял что к чему но некоторые детали мне все еще не ясны. В данный момент я верстаю страницу вывода новости в нашей двойке. По дизайну картинка новости находится после заголовка и занимает всю ширину див блока статьи, зная что фото будут разные я решил сделать див блок высотой в 350пикселей и шириной в 100% и задать картинку в виде фона данного блока (фоновое изображение легче растягивать сохраняя пропорции) и вот встает вопрос, поисковик то не будет обращать внимание на данную картинку?
#2 30 января 2015 в 06:31
Вы хотите картинку сделать бекграундом в css для дива?
#3 30 января 2015 в 10:02
Да, я картинку поставил в фоном для дива.
#4 30 января 2015 в 10:38
Я не специалист в СЕО и тем более не могу знать всех задумок приведших именно к такому решению, но с каких это пор "фоновое изображение легче растягивать сохраняя пропорции"?
#5 31 января 2015 в 09:17
Задав стилям следующие свойства картинка располагается в центре дива, вертикально и горизонтально, а свойство COVER растягивает фото пропорционально размерам картинки. Картинки будут разные, широкие высокие, другого нормального способа я не знаю, если они есть подскажите, буду рад.
  1. .sl_img {
  2. background-position: center center;
  3. background-repeat: no-repeat;
  4. background-size: cover;
  5. }
#6 31 января 2015 в 10:29

Картинки будут разные, широкие высокие, другого нормального способа я не знаю,

Либо я чего-то недопонял, либо зачем городить все эти бэкграунды, для этого есть самый что ни на есть стандартный метод
  1. img{
  2. max-width (ну или width если нужна жесткая привязка):100%;
  3. height:auto;
  4. }
#7 31 января 2015 в 13:05
Pasha, скорее всего не поняли, если в дизайне картинка имеет высоту больше чем ширину при указании ваших свойств она имеет занимает слишком много места по высоте растягиваясь на 100%. Мне нужно чтобы оно не было не выше 350 пикселей, и если я через стили обрежу картинку то ее трудно центрировать.
Вот обычное изображение.
Вот фоном.
#8 31 января 2015 в 14:10
Если у Вас вопрос про СЕО верстку, то для СЕО конечно же лучше прописывать картинку как есть (не фоном), и прописать все атрибуты, — как минимум alt. Если Вас больше волнует дизайн, то здесь не подскажу.
#9 31 января 2015 в 14:28
Atid — Gorec, но так же тоже нельзя. Кто же делает адаптивность обрезая контент… Я как пользователь вижу что разрешено грузить все что хочется, загружаю например портрет любимой кошки на своем фоне, причем кошка валяется где-то в ногах,… и что я увижу после отрабатывания такой адаптивности? Подвинем фон вниз? А если это фото попугайчика?

Нужна максимальная высота 350, значит так и укажите в стилях, а рисункам при указании высоты вместо авто присвойте max-height:100% Рисунок в любом случае будет следовать за несущим блоком, куда ему деваться с подводной лодки…
#10 31 января 2015 в 14:43
Можно указать размер картинки только по ширине не будет обрезаться.
#11 31 января 2015 в 16:15
Все трое предложили правильные варианты. Делаю я так потому что шаблон на продажу, а клиенты грузят все что угодно. Для удобства всем сделал 4 варианта вывода фото в новостях. 1 Слева или 2 справа фото (макс ширина 300пикс) обтекаемое текстом, 3 Фото в центре с авто шириной и высотой и 4 на всю ширину. Пускай выбирают. А так фото на всю ширину чисто из за дизайнерских потребностей была сделана. Спасибо за советы.)))
#12 31 января 2015 в 16:29

поисковик то не будет обращать внимание на данную картинку?

Atid — Gorec

Стили это не контент, поэтому данная картинка просто не будет участвовать в вероятной поисковой выдаче, и не будет влиять на результаты выдачи.
#13 24 февраля 2015 в 01:30
Микроразметка, от нее какой-нибудь толк есть? Добавил сегодня к шаблону микроразметку к альбому с фотками.
#14 24 февраля 2015 в 09:04
Atid — Gorec, возвращаясь к вашим предыдущим сообщениям… а вы не пробовали следующие стили:
  1. img {
  2. object-fit: cover;
  3. }
или
  1. img {
  2. min-width: 100%;
  3. object-fit: cover;
  4. }
#15 24 февраля 2015 в 09:49
вот интересный эффект с классом:
  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. }
Вы не можете отвечать в этой теме.
Войдите или зарегистрируйтесь, чтобы писать на форуме.
Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.