Фоновая картинка в html: Как добавить фоновый рисунок на веб-страницу?

html — Фоновая картинка поверх изображения, накладываемого hover

Вопрос задан 9 лет 11 месяцев назад

Изменён 4 года 1 месяц назад

Просмотрен 4k раза

Для ссылки пункта-меню задана фоновая картинка

<div>
            <ul>
                <li><a href="">Каталог изображений</a></li>
             </ul>
        </div>​

при наведении мышки задано, что сверху накладывается другая картинка, и она перекрывает ту картинку, что задана бэкграундом http://jsfiddle.net/y8AJF/7/ . Подскажите, как сделать так, чтобы фоновая картинка пункта меню оставалась поверх того изображения, что накладывается hover’ом? Вносить изображение в теге img в ссылку не хотелось бы.

• html
• css

Почитайте про множественный background.

Можно тут http://habrahabr.ru/company/microsoft/blog/137705/ или тут http://htmlbook.ru/css/background-position

И поэксперериментируйте…

Или поменяйте условие

#nav ul  li:hover {
    background: url('http://static.diary.ru/userdir/2/0/0/4/2004853/76652854.png') no-repeat;
}

5

в CSS есть такое свойство: z-index: [значение] отображает последовательность отображения элементов.

1

Несколько background можно указывать через запятую вот так:

url('http://static.diary.ru/userdir/2/0/0/4/2004853/76652822.png') top center no-repeat, url('http://static.diary.ru/userdir/2/0/0/4/2004853/76652854.png')  no-repeat;

#nav ul {
    display: inline-block;
    position: relative;
    z-index: 999;
    margin-top: 0;
    margin-left: 130px;
}
    
#nav ul  li {
    display: inline-block;
    list-style-type: none;
    width: 116px;
}

#nav ul  li a {
    display: inline-block;
    text-align: center;
    width: 116px;
    height: 145px;
    padding-top: 90px;
    text-transform: uppercase;
    font-family: 'Trebuchet MS', sans-serif;
    font-size: 12px;
    text-decoration: none;
    color: #5c5c5c;
}

#nav ul  li a.
  item1 {
    background: url('http://static.diary.ru/userdir/2/0/0/4/2004853/76652822.png') top center no-repeat;
    position: relative;
    z-index: 9999;
}

#nav ul  li a:hover {
    background: 
    url('http://static.diary.ru/userdir/2/0/0/4/2004853/76652822.png') top center no-repeat, url('http://static.diary.ru/userdir/2/0/0/4/2004853/76652854.png')  no-repeat;
    width: 116px;
    height: 145px;
    color: #ffffff;
}

<div>
        <ul>
            <li><a href="">Каталог изображений</a></li>
         </ul>
    </div>

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Использование одного и того же фонового изображения на каждой странице вашего веб-сайта — 50

Перейти к содержимому

Предыдущий Следующий

Можно ли использовать одно и то же фоновое изображение на всех веб-страницах?

Вот и 50 серия! Небольшая, но важная веха для шоу Local SEO Tactics, поэтому мы хотим сначала поблагодарить вас за поддержку и отзывы на этом пути! В сегодняшнем выпуске мы представим наш первый вопрос. Эвелин спрашивает, можно ли использовать одно и то же фоновое изображение на всех страницах вашего сайта? Мы рассмотрим этот и некоторые связанные с ним сценарии, чтобы поговорить о влиянии SEO, а также о пользовательском опыте при выборе этого варианта!

Не пропустите выпуск — слушайте в Apple Podcasts, Google Podcasts, Spotify, iHeart и других сервисах!

ВЫ НАУЧИТЕСЬ

• Вредит ли SEO использование одного и того же фонового изображения
• Убедитесь, что фоновое изображение не замедляет загрузку страницы
• Лучше использовать оригинальные фотографии вместо стоковых
• Вы можете использовать слайдер вместо фонового изображения, если это имеет смысл на вашей странице
• Иногда фоновое изображение неправильно переформатируется в адаптивную страницу
• Используйте ползунок с эффектами изображения, такими как эффект Кена Бернса, для создания движения и анимации

Вот расшифровка эпизода 50 с использованием одного и того же фонового изображения на каждой странице вашего веб-сайта ;

Джесси Долан: Добро пожаловать обратно в Local SEO Tactics, где мы поможем вам советами и рекомендациями, чтобы ваш бизнес был найден в Интернете. Я твой хозяин, Джесси Долан. И снова с Бобом Бреннаном.

Боб Бреннан: Привет.

Джесси Долан: А это, ну, классная серия. Это номер 50 из тех, кому скоро будет миллион.

Боб Бреннан: Конечно.

Джесси Долан: Начал это путешествие с подкаста здесь, что? Наверное, почти два года назад, когда я вел подкастинг Пэта Флинна, я говорил об этом раньше.

Боб Бреннан: Поприветствуйте Пэта Флинна.

Джесси Долан: Ага. Если кто-то хочет сделать подкаст, лучшие деньги, которые мы когда-либо тратили, пытаясь запрыгнуть в него, не зная, о чем вы говорите или даже как к этому подойти, были бы кошмаром. Наверное, потратил бы в два-три раза больше времени и энергии, пытаясь понять это. Но в любом случае, вперед. Вот и мы, эпизод номер 50, делаем их по одной в неделю, когда мы их делали. У нас был, наверное, 10-месячный перерыв в середине, но мы вернулись к этому, и спасибо вам, ребята, за вашу поддержку. Мы получили много хороших отзывов. Сегодня мы услышим разговор о нашем первом вопросе в прямом эфире, который мы собираемся передать, который мы запустили несколько недель назад, чтобы получить отзывы от вас, ребята, и привлечь вас к участию в шоу. Получите ваши реальные вопросы там для всех. И так, да, просто крутой эпизод с отметкой, номер 50, и мы собираемся продолжить его в ближайшие недели в будущих эпизодах. Даже больше, надо сказать. Мы собираемся начать выпускать больше, чем один в неделю.

Надеюсь, начнем с двух или трех. Я не знаю, что я могу обещать. Мы увидим рифму и причину, что мы можем сделать, но мы собираемся увеличить частоту, стараясь, чтобы эпизоды были короткими на этой 15-20-минутной отметке, и получить больше контента для вас, ребята. Просто поступает больше материала, поэтому нам нужно получать больше материала, чтобы не отставать от него здесь.

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

И если вы зайдете на localseotactics.com/questions или просто зайдете на localseotactics.com, в левом нижнем углу вы увидите ссылку для отправки вопроса. И там довольно четкие указания. Вы вводите свой вопрос, нажимаете кнопку, он дает вам номер телефона для звонка, звоните по номеру телефона, записываете свой звук, и вскоре после этого вы станете знаменитым. И если мы воспользуемся вашим вопросом в шоу, мы отправим вам бесплатную футболку.

Итак, давайте перейдем к первому, который у нас был на этой неделе. И это будет суть всего эпизода. Мы возьмем, Эвелин представила вопрос здесь, мы сыграем его, мы возьмем этот вопрос, ответим на него, а затем разобьем его на несколько разных способов. Некоторые вопросы она не обязательно задавала, но как бы отклонялась от темы. Так что, надеюсь, вам понравится. Итак, давайте углубимся в это. Мы воспроизведем аудио здесь от Эвелин и вернемся сюда. Вот так.

Эвелин: Привет, это Эвелин. Вы, ребята, потрясающие. Я хотел знать, считаете ли вы, что наличие фонового изображения на веб-сайте, которое непрерывно на каждой странице, считается оптимизированным для SEO, или это большое SEO, нет, нет?

Джесси Долан: Хорошо. Итак, во-первых, спасибо, Эвелин, за вопрос. У нас есть еще несколько человек в очереди. Ее пришли на прошлой неделе во время этой записи, и я подумал, что это было бы отличным первым, чтобы поговорить о нем. Итак, мы просто начнем с места в карьер, просто чтобы обрамить то, что она сказала, поместите фоновое изображение на вашу страницу и используйте его на каждой странице. Итак, есть несколько вещей, которые я хочу проанализировать, и ее вопрос очень конкретный, поэтому я собираюсь ответить на него конкретно, и мы можем привести здесь несколько разных примеров. Итак, с самого начала, является ли оптимальным для SEO использование одного и того же фонового изображения на странице, на каждой странице? Вообще говоря, нет, просто как общее заявление. Я имею в виду, что вы не будете наказаны за это, но определенно есть некоторые передовые методы SEO, где, я думаю, вы можете сделать это немного лучше.

Но, Эвелин, у тебя не будет проблем, и ты не опустишься в рейтинге только потому, что у тебя одно и то же фоновое изображение на каждой странице. Но, как я уже сказал, давайте раскроем это и разберем поближе, потому что дьявол кроется здесь в деталях, верно? Итак, во-первых, я бы поставил под сомнение размер этого изображения. Итак, если вы скажете, что у меня есть это изображение, оно довольно большое и замедляет загрузку моей страницы, разве это плохая идея иметь его на каждой странице? Ну тогда понятно, да. Как узнать, замедляет ли фоновое изображение страницу? Существует множество онлайн-инструментов для тестирования скорости. Некоторые из них хороши, некоторые плохи, проверенный и надежный сайт webpagespeedtest.org. Мы говорим об этом каждый раз, когда упоминали о тестировании скорости в шоу. Перейдите к этому, и он покажет вам точный порядок и время, необходимое для загрузки различных элементов на вашем веб-сайте.

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

Теперь еще одна часть этого: это стоковое фото или это оригинальное фото? В недавних эпизодах мы обсуждали и другие разговоры о SEO, поскольку Google очень хорошо идентифицирует стоковые изображения по сравнению с вашими собственными уникальными изображениями. Неплохо использовать стоковое изображение. Но дело в том, что Google видит разницу, верно? Так что, если мы с Бобом соревнуемся, у нас все при равных условиях. Если он использует оригинальные изображения и оригинальные фотографии на своем веб-сайте, а я нет, Google увидит эту разницу и, возможно, повысит рейтинг Боба. Извините меня. Просто показывая, что у него больше доверия или больше авторитета как у веб-сайта. Так что это одно. Убедитесь, что это быстрое изображение, которое хорошо загружается. И потом, если это может быть уникальное изображение, тем более, так где это безопаснее использовать.

Теперь еще один вопрос: это не столько с точки зрения SEO, сколько непосредственно с точки зрения взаимодействия с пользователем, что может привести к SEO. Потому что, если вы получаете много зависаний, люди отскакивают, не давая вам хороших кликов и хорошего трафика на вашем сайте, это может привести к плохому SEO, если хотите. И что я имею в виду, если это имеет отношение к странице, если у вас есть одно фоновое изображение на каждой странице, когда вы говорите о ремонте автомобилей, верно? Например, много, если вы попадаете на страницу ремонта радиатора, но показываете, как кто-то меняет масло, или работает с полуприцепом, или что-то еще, не связанное с этим. Это не очень, очень хорошо подходит.

 

Боб Бреннан: Да. Итак, есть конверсионные изображения, верно? Так что это как и все остальное. Если кто-то попадает на вашу страницу, вы размещаете там это изображение для конвертации.

Джесси Долан: Абсолютно.

Боб Бреннан: Пара коротких вопросов. Один, движущиеся изображения.

Джесси Долан: Ага.

Боб Бреннан: И тогда как вы, и мы как бы прошли через это ранее сегодня, в зависимости от того, что обыскивается и как это обыскивается. Другими словами, если это архитектор, более чем вероятно, что его будут искать с рабочего стола, потому что это кто-то, кто собирается сесть либо в офисе, либо даже дома, и действительно хочет визуально изучить свою работу на своем сайте. Но если это простой сервис, и он, скорее всего, будет работать, больший процент будет мобильным, и вы хотите оптимизировать свое изображение для этого. Я не знаю, можете ли вы немного столкнуться с этим.

Джесси Долан: О да. Нет, это отличный момент. Я думаю, что это как бы две половинки. Во-первых, на мобильных устройствах скорость становится еще важнее, верно?

Боб Бреннан: Ага.

Джесси Долан: Если это изображение очень медленно загружается или увеличивает размер вашего веб-сайта, посмотрите на него на мобильном телефоне, как оно выглядит? Верно? Насколько в процентах экран или как он визуально выглядит? Если я на рабочем столе, это выглядит очень красиво и выглядит очень хорошо, но на мобильном устройстве это действительно не добавляет столько, или оно обрезано, или кто знает что, тогда определенно подумайте, должно ли это быть настоящее фоновое изображение или это действительно так. должно быть, может быть, сплошное цветное изображение или что-то еще. Потому что это может даже не иметь для вас такой же ценности. Так что 100% скорость и удобство использования на мобильных устройствах. И с такими дополнениями, я думаю, третья вещь для мобильных устройств — может быть, изображение выглядит хорошо, может быть, оно загружается быстро, так что проверьте это. Но как он изменяет размер и реагирует на мобильные устройства?

В зависимости от ваших настроек, вашей темы в WordPress или того, что вы используете, иногда изображение не реагирует на мобильные устройства в фоновом режиме. И Эвелин говорит, когда я использую фоновое изображение. Это отличается от простой вставки изображения на вашу страницу. Это фоновое изображение буквально восходит к прошлому, оно стоит за текстом и всем остальным. В зависимости от вашей темы, это может не полностью изменить размер в вашем браузере, как изображение на странице. Так что вам захочется проверить это, потому что, возможно, вы демонстрируете свою витрину или вывеску вашего бизнеса на заднем плане, что бы это ни было. На мобильном устройстве, если он изменяет размер и не реагирует, возможно, вы видите большое увеличение, пикселизацию…

Боб Бреннан: Да, точно так же, как один угол здания, и это выглядит довольно странно. Ага.

Джесси Долан: Верно. Итак, опять же, с точки зрения удобства использования, не с точки зрения прямого SEO, фактора ранжирования Google, а больше с точки зрения удобства использования и, следовательно, общей оптимизации. Это определенно то, о чем нужно знать.

Теперь вернемся к движущимся изображениям. Есть несколько способов сделать движущиеся изображения. Это может быть размер файла типа GIF или .GIF или формат файла. Мне жаль. Однако это приводит к увеличению размера файлов, поэтому определенно держитесь подальше от чего-то подобного и некоторых тем, которые вы можете ввести, например, встроенное видео YouTube в качестве фона. Это может выглядеть очень, очень круто, и, опять же, в зависимости от темы и плагина, который вы можете использовать, и всего остального, это, вероятно, может вызвать проблемы со скоростью. На самом деле, когда мы говорим об этом, главное, о чем я бы беспокоился, это скорость этого фона, загрузки изображения или загрузки фонового видео, независимо от того, какой вариант вы там выбираете.

И для них, если вам действительно нужно, чтобы это было там, может быть, что-то нужно учитывать, может быть, это не фоновое изображение, может быть, у него есть что-то более переднее или ползунок. Как я могу по-прежнему отображать эту информацию, но это не фоновое изображение на странице, потому что, опять же, это берет совершенно другой контекст по сравнению со встроенным слайдером или чем-то еще.

Боб Бреннан: И нам повезло. Нам повезло с изображениями слайдера, верно?

Джесси Долан: Ага.

Боб Бреннан: И они на самом деле не замедляют скорость. И это сложный баланс с точки зрения изображений, фоновых изображений, с точки зрения конверсии, потому что вы жертвуете одним ради другого. Так что каким-то образом вы должны найти этот баланс, чтобы донести ваше сообщение до людей, чтобы они сказали «привет» [неразборчиво 00:10:53], я позвоню этим людям, или я отправлю им электронное письмо, или что-то в этом роде. является.

Джесси Долан: И в зависимости от того, где вы используете его на своем веб-сайте, опять же, используя что-то вроде слайдера, я имею в виду, что мы действительно делаем это. Если вы зайдете на localseotactics.com, то изображение, которое вы увидите вверху, означает, что это слайдер, и это плагин, который находится на веб-сайте WordPress, и слайдер имеет некоторую анимацию. Это называется эффект Кена Бернса. Люди в фотографии, в частности, как бы знают, что это значит. Но в основном это то, что позволяет ему иметь эффект масштабирования, который он делает на слайдере. Это не фильм, это не загрузка другого изображения. Так что на самом деле это экономит много времени на загрузку, потому что загружается это одно изображение, а затем у него просто есть этот визуальный эффект, когда оно как бы скользит по нему или увеличивается. И вы также можете применять к нему различные типы эффектов, но это хороший способ получить это изображение. Выступает как фоновое изображение, потому что, когда вы создаете слайдер, вы можете накладывать на него текст.

Теперь, если вам нужно, чтобы это «фоновое изображение» было в середине вашей страницы или ниже по странице, то, возможно, в зависимости от ваших настроек, вы можете вставить этот ползунок туда. Опять же, технически немного не то, о чем спрашивает Эвелин, потому что это не похоже на фон на всю страницу. Но просто разные способы, возможно, выполнить одно и то же с учетом скорости и удобства SEO, но определенно слайдер.

И когда вы используете ползунок, пару моментов, чтобы завершить эту тему, вы можете использовать этот визуальный эффект, о котором мы говорим, вместо видео или вместо анимации. У вас может быть само изображение, просто эффект, а затем вы можете использовать его в качестве фонового изображения. Вы можете накладывать текст, вы можете снимать, вы можете накладывать другие изображения поверх этого, если хотите. Так что просто с практической точки зрения я склоняюсь к слайдерам для всего, о чем вы спрашиваете, всего, что я только что сказал поверх фонового изображения, и я стараюсь не использовать фоновые изображения на сайтах как можно чаще. Снова выбираем ползунки или сплошные цветные блоки для фона вместо изображения. Иногда мы будем использовать фоновое изображение в области нижнего колонтитула. как художественный тип фона или коллаж.

Но, как правило, не целую страницу. Так что, надеюсь, Эвелин, это прямо отвечает на ваш вопрос и, возможно, даже дает вам некоторые идеи о том, как двигаться в разных направлениях. Но просто повторюсь, с чистой точки зрения SEO, вы не будете наказаны за то же самое. Это не похоже на дублированный контент или что-то в этом роде. Тем более, что это фоновое изображение. Если бы ваш вопрос был переформулирован, говоря, что если я использую одно и то же изображение, встроенное в страницу, включенное в содержимое страницы, это будет немного отличаться, потому что вы просто используете одно и то же изображение снова и снова. Но когда это фоновое изображение, у него здесь есть небольшая звездочка для некоторых других правил. Так что я надеюсь, что это поможет. У вас есть что-нибудь еще, что вы хотели бы добавить партнеру?

Боб Бреннан: Я просто хочу добавить, если это не отвечает на ваши вопросы или у вас есть еще вопросы, не стесняйтесь обращаться к нам. Мы были бы более чем счастливы ответить на них как можно лучше.

Джесси Долан: Черт возьми, да. Эвелин, если вы позвоните еще раз и оставите новую версию, вы все равно получите только одну футболку. Мы не собираемся раздавать футболки каждый раз, когда вы в них.

Боб Бреннан: А мы знаем, что размер Эвелин сказал все?

Джесси Долан: Нет, детали нам предстоит проработать. Я не получил это от нее.

Боб Бреннан: Сообщите нам свой размер, чтобы мы подобрали вам подходящую рубашку.

Джесси Долан: И куда отправить эту чертову штуку хоть тебе. Так что просто для всех остальных, еще раз, присылайте свои вопросы. Мы бы хотели их иметь. Отличные темы для разговора. Мы можем придумать вещи, которые, как мы знаем, люди упоминают там, люди спрашивают нас и индустрию о том, что происходит, но услышать это своими словами, сыграть это в шоу, а затем проанализировать это то, что я Я очень взволнован, и это как бы привносит в него другую морщинку. Надеюсь, вам понравится. Если вы хотите стать его частью, зайдите на localseotactics.com/questions и отправьте свой. Другая бесстыдная заглушка, которую мы должны дать, — это, как всегда, бесплатный мгновенный SEO-аудит на веб-сайте.

Боб Бреннан: Да. Хорошее соотношение цены и.

Джесси Долан: Да, абсолютно. И, честно говоря, если вы тоже хотите протестировать что-то подобное, добавьте туда несколько разных изображений, фоновых изображений, ползунков, быстро сделайте до и после. Если вы хотите проверить это для различных решений, о которых мы говорим. Черт возьми, вы можете использовать этот инструмент действительно для всего, о чем вы можете подумать, для проверки вашего рейтинга SEO или конкурентов, как мы всегда говорим. Итак, localseotactics.com, верхний правый угол, желтая кнопка, мгновенный SEO-аудит. Нажмите на нее и посмотрите, какова оценка вашего сайта. Вот и все на этой неделе.

Мы перейдем к нашему пятизвездочному обзору недели, и кто у нас здесь на этой неделе? Является ли счет. Я думаю, это [Уидмер 00:15:22]. Если я правильно говорю, Билл, я надеюсь. Билл говорит: «Удивительно. Я занимаюсь SEO более четырех лет, у меня есть сайт с более чем 100 000 поисковых запросов в месяц, и я до сих пор узнаю то, чего не знал, в этом подкасте. Абсолютно потрясающе. Если вы занимаетесь локальным SEO, этот подкаст для вас». Это супер круто. Я думаю, что это первое, что мы читаем, где кто-то имеет какие-то навыки SEO.

Боб Бреннан: Да, да. Это хорошие цифры, Билл.

Джесси Долан: Ага. Для 100 000 посещений сайта в месяц, независимо от вашей отрасли, это довольно круто. Если мы сможем научить тебя нескольким вещам, это очень круто, Билл. Если у вас есть вопрос или вы хотите что-то выбросить, опять же, как и Эвелин, воспользуйтесь этим. Люблю слышать, что вы можете сказать о Советы и хитрости.

Боб Бреннан: Очевидно, мы не все, чтобы положить этому конец.

Джесси Долан: О боже, нет.

Боб Бреннан: Итак, мы учимся чему-то каждый день. Мы просто пытаемся отфильтровать это и передать…

Джесси Долан: На ​​тот момент я не думаю, что кто-то…

Боб Бреннан: Нет.

Джесси Долан: Очень мало людей, которые являются настоящими экспертами, потому что …

Боб Бреннан: Мистер Google.

Джесси Долан: Именно так. Они все время его меняют. Это все, что мы делаем. На самом деле мы должны называть это SEO или оптимизацией Google. Так что ладно, я думаю, на этой неделе этого вполне достаточно. Надеюсь, вам, ребята, это понравилось, и что ж, я даже не должен говорить на этой неделе, потому что мы собираемся выкатить несколько.

Боб Бреннан: Да, [неразборчиво 00:16:30] через пару недель, два-три.

Джесси Долан: Придется привыкнуть к этому. Так что надеюсь, вам понравится этот эпизод.

Боб Бреннан: Ну вот.

Джесси Долан: Следите за новостями. [неразборчиво 00:16:37]

 

Ознакомьтесь с примечаниями к сериалу ниже, чтобы найти ссылки на ресурсы, руководства и ссылку для просмотра эпизода в видеоформате!

Чтобы поделиться своими мыслями:

• Отправьте нам комментарий или вопрос в разделе ниже.
• Поделитесь этим шоу на Facebook.

Чтобы помочь шоу:

Ваши оценки и отзывы действительно помогают, и мы читаем каждый из них.

• Оставить честный отзыв на iTunes
• Подпишитесь на iTunes
• Подписаться в Google Play
• Подписаться на Stitcher

ССЫЛКИ

СКАЧАТЬ АУДИОФАЙЛ MP3

Слушайте эпизод, как вам нравится, с аудиофайлом.

ПОСМОТРЕТЬ ВИДЕО ВЫСТАВКИ

РЕСУРСЫ

Тест веб-страницы

Википедия: Эффект Кена Бернса

ПОКАЗАТЬ ОБРАТНУЮ СВЯЗЬ

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

Intrycks2022-01-18T09:47:39-06:00

Поиск:

Последние выпуски

• У вас должен быть функциональный и обновленный веб-сайт, чтобы использовать SEO — 172
• Успешное SEO с точки зрения владельцев бизнеса — интервью со Стивом Боукером — 171
• Правильное использование тегов Htags (также известных как заголовки) для преимуществ SEO — 170
• Влияет ли изменение содержания сайта на SEO? – 169
• Терри Сэмюэлс отвечает на ваши вопросы о схеме местного бизнеса! – 168
• Что такое панель знаний и помогает ли SEO запускать ее? – 167
• Должны ли вы использовать собственный веб-сайт или веб-сайт WordPress? – 166
• Верные признаки того, что ваш сайт нуждается в улучшении SEO от профессионалов — 165
• Какова роль владельцев бизнеса в успешном внедрении SEO? – 164
• Разработка успешной стратегии публикации в LinkedIn с Майклом Айви — 163
• Есть ли что-нибудь, что вы можете сделать, когда кто-то оставляет вам отзыв в Google, а он не отображается? – 162
• Можете ли вы использовать адрес виртуального офиса для настройки списка моего бизнес-профиля Google? – 161
• Сезонное SEO — Запуск и остановка вашего SEO сезонно — 160

Архив

• Октябрь 2022
• Сентябрь 2022
• Август 2022
• июль 2022
• июнь 2022
• Май 2022
• Апрель 2022
• март 2022 г.
• Февраль 2022
• Январь 2022
• Декабрь 2021
• ноябрь 2021
• Октябрь 2021
• Сентябрь 2021
• август 2021
• июль 2021
• июнь 2021
• Май 2021
• Апрель 2021
• март 2021
• Февраль 2021
• Январь 2021
• Декабрь 2020
• ноябрь 2020 г.
• октябрь 2020 г.
• август 2020 г.
• июль 2020
• июнь 2020 г.
• Май 2020
• Апрель 2020
• март 2020 г.
• Февраль 2020
• Январь 2020
• Декабрь 2019
• Ноябрь 2018
• Октябрь 2018
• Сентябрь 2018
• Август 2018
• Июль 2018
• июнь 2018 г.
• Май 2018
• Апрель 2018
• март 2018 г.
• Февраль 2018

Ссылка для загрузки страницы

Перейти к началу

Google Images SEO Best Practices | Центр поиска Google | Documentation

Google Images — это способ визуального поиска информации в Интернете. Пользователи могут быстро просматривать информацию с большим контекстом вокруг изображений с новыми функциями, такими как подписи к изображениям и заметные значки.

Добавляя больше контекста вокруг изображений, результаты могут стать намного более полезными, что может привести к более качественному трафику на ваш сайт. Вы можете помочь в процессе обнаружения, убедившись, что ваши изображения и ваш сайт оптимизированы для Google Images. Следуйте нашим рекомендациям, чтобы повысить вероятность того, что ваш контент появится в результатах поиска Google Картинок.

Создайте удобный пользовательский интерфейс

Чтобы улучшить видимость вашего контента в Google Картинках, сосредоточьтесь на пользователе, предоставив отличный пользовательский интерфейс: создавайте страницы в первую очередь для пользователей, а не для поисковых систем . Вот несколько советов:

• Обеспечьте хороший контекст: Убедитесь, что ваш визуальный контент соответствует теме страницы. Мы предлагаем отображать изображения только там, где они добавляют исходную ценность странице. Мы особенно не рекомендуем страницы, на которых ни изображения, ни текст не являются оригинальным контентом.
• Оптимизация размещения: По возможности размещайте изображения рядом с соответствующим текстом. Когда это имеет смысл, рассмотрите возможность размещения самого важного изображения в верхней части страницы.
• Не встраивайте важный текст в изображения: Избегайте встраивания текста в изображения, особенно важных текстовых элементов, таких как заголовки страниц и пункты меню, поскольку не все пользователи могут получить к ним доступ (и инструменты перевода страниц не будут работать с изображениями). Чтобы обеспечить максимальную доступность вашего контента, сохраняйте текст в формате HTML, предоставляйте замещающий текст для изображений.
• Создавайте информативные и высококачественные сайты: Хороший контент на вашей веб-странице так же важен, как и визуальный контент для картинок Google — он обеспечивает контекст и делает результат более действенным. Содержимое страницы может использоваться для создания фрагмента текста для изображения, и Google учитывает качество содержимого страницы при ранжировании изображений.
• Создавайте сайты, удобные для устройств: Пользователи чаще выполняют поиск в Google Картинках с мобильных устройств, чем с компьютеров. По этой причине важно, чтобы вы разработали свой сайт для всех типов и размеров устройств. Используйте Mobile-Friendly Test, чтобы проверить, насколько хорошо ваши страницы работают на мобильных устройствах, и получить отзывы о том, что нужно исправить.
• Создайте хорошую структуру URL-адресов для ваших изображений: Google использует путь URL-адреса, а также имя файла, чтобы помочь ему понять ваши изображения. Подумайте о том, чтобы упорядочить изображение таким образом, чтобы URL-адреса были построены логично.

Проверьте заголовок и описание страницы

Картины Google автоматически создают ссылку заголовка и фрагмент, чтобы наилучшим образом объяснить каждый результат и его связь с запросом пользователя. Это помогает пользователям решить, стоит ли нажимать на результат.

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

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

Добавить структурированные данные

Если вы включите структурированные данные, Картины Google могут отображать ваши изображения в виде расширенных результатов, включая заметный значок, который предоставляет пользователям актуальную информацию о вашей странице и может привлечь более целенаправленный трафик на ваш сайт. Google Images поддерживает структурированные данные следующих типов:

• Продукт
• Видео
• Рецепт

Следуйте общим рекомендациям по структурированным данным, а также любым рекомендациям, относящимся к вашему типу структурированных данных; в противном случае ваши структурированные данные могут оказаться неприемлемыми для отображения расширенных результатов в Google Картинках. В каждом из этих структурированных типов данных атрибут изображения является обязательным полем для получения значка и расширенного результата в Google Картинках.

Оптимизация для скорости

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

Проанализируйте скорость своего сайта с помощью PageSpeed ​​Insights и посетите нашу страницу Web Fundamentals, чтобы узнать о передовых методах и методах повышения производительности сайта.

Добавить фото хорошего качества

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

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

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

Точно так же имя файла может дать Google подсказки о предмете изображения. За например, my-new-black-kitten.jpg лучше, чем IMG00023.JPG . Если вы локализуете свои изображения, убедитесь, что вы перевели имена файлов тоже.

Использовать описательный замещающий текст

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

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

При выборе замещающего текста сосредоточьтесь на создании полезного, богатого информацией контента, в котором ключевые слова используются надлежащим образом и который соответствует содержанию страницы. Старайтесь не заполнять атрибуты alt ключевыми словами (наполнение ключевыми словами), так как это негативно влияет на пользователей и может привести к тому, что ваш сайт будет воспринят как спам. Также учитывайте доступность вашего альтернативного текста и добавляйте атрибут alt по мере необходимости в соответствии с рекомендациями W3.

• Плохо (отсутствует замещающий текст) :
• Bad (наполнение ключевыми словами) : jpg" alt="puppy dog ​​baby dog ​​pup щенки щенки собачки щенки помет щенки собака ретривер лабрадор волкодав сеттер пойнтер щенок джек-рассел-терьер щенки корм для собак дешевый корм для собак корм для щенков "/>
• Лучше :
• Лучшие :

Мы рекомендуем протестировать ваш контент, проверив доступность и используя эмулятор медленного сетевого подключения.

Помогите нам обнаружить все ваши изображения

Используйте семантическую разметку для изображений

Google анализирует HTML ваших страниц для индексации изображений, но не индексирует изображения CSS.

• Хорошо:
• Плохо:
  Щенок золотистого ретривера

Использовать карту сайта для изображений

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

Карты сайта для изображений могут содержать URL-адреса из других доменов, в отличие от обычных карт сайта, которые междоменные ограничения. Это позволяет использовать CDN (сети доставки контента) для размещения картинки. Мы рекомендуем вам подтвердить доменное имя CDN в Search Console, чтобы мы могли информировать вас о любых ошибках сканирования, которые мы можем обнаружить.

Поддерживаемые форматы изображений

Картины Google поддерживают изображения в следующих форматах: BMP, GIF, JPEG, PNG, WebP и SVG.

Вы также можете встраивать изображения в качестве URI данных. URI данных позволяют включать файл, например изображение, в строку, устанавливая src элемента img в виде строки в кодировке Base64, используя следующий формат:

Хотя встраивание изображений может уменьшить количество HTTP-запросов, тщательно продумайте, когда их использовать, поскольку это может значительно увеличить размер страницы. Чтобы узнать больше об этом, обратитесь к разделу о плюсах и минусах встраивания изображений на нашей странице Web Fundamentals.

Адаптивные изображения

Разработка адаптивных веб-страниц повышает удобство работы пользователей, поскольку пользователи используют их на самых разных устройствах. Ознакомьтесь с нашими основами работы с изображениями в Интернете, чтобы узнать о лучших методах обработки изображений на вашем веб-сайте.

Веб-страницы используют атрибут или элемент для указания адаптивных изображений. Однако некоторые браузеры и поисковые роботы не понимают эти атрибуты. Мы рекомендуем всегда указывать резервный URL через атрибут img src .

Атрибут srcset позволяет указать разные версии одного и того же изображения, особенно для разных размеров экрана.

Пример :

Элемент представляет собой контейнер, который используется для группировки различных <источник> версии одного и того же образа. Он предлагает резервный подход, поэтому браузер может выбрать правильное изображение в зависимости от возможностей устройства, таких как плотность пикселей и размер экрана. Элемент picture также удобен для использования новых форматов изображений со встроенной щадящей деградацией для клиентов, которые могут еще не поддерживать новые форматы.

Мы рекомендуем всегда предоставлять элемент img в качестве запасного варианта с атрибутом src при использовании picture Тег в следующем формате:

Пример :

 <картинка>