Поліпшення трафіку SEO
- Загальні найкращі практики
- Розкажіть пошуковим системам Що показує зображення
- Вдосконалення SEO через скорочення часу завантаження сторінки
- Розмір зображення та обтинання
- Поради щодо підтримки SEO зображення
- Кілька заключних приміток
Незалежно від того, де ви живете на спектрі любові-ненависті стосовно пошукової оптимізації (SEO), це важливий фактор, який робить ваш сайт відкритим і привабливим для користувачів. Ефективне SEO вимагає прийняття рішень щодо вашого сайту, від базової платформи до контенту користувача, наприклад, тексту та зображень, і існує багато способів підійти до нього залежно від складності вашої системи.
imgix може допомогти зменшити цю складність і підвищити ймовірність того, що користувачі знайдуть ваш сайт в результатах пошуку. Ми обговоримо загальні кращі практики для зображень, а також специфіку впровадження SEO для двох випадків використання: як покращити рейтинг сторінок, оптимізуючи зображення для більш швидкої швидкості завантаження сторінки, і як покращити рейтинг для самих зображень.
Загальні найкращі практики
Найважливішими факторами для SEO-зображення є метадані та контекст. Оскільки зображення не містять ключових слів у своїх рідних метаданих (наприклад, інформація EXIF), пошукові системи покладаються на інші підказки, щоб визначити вміст зображень і відповідно класифікувати їх.
Розкажіть пошуковим системам Що показує зображення
Нижче наведено кілька речей, які можна зробити, щоб у ваших зображеннях було достатньо відповідного контексту для пошукових систем для точного визначення їхнього вмісту.
- Назвіть зображення наочно . Загальноприйнято називати файли програмно в рамках загальної системи управління активами, або, у випадку контенту, створеного користувачем, щоб пройти через ім'я файлу з завантаженого файлу. Якщо це можливо, то краще перейменувати зображення, щоб показати, що вони показують, наприклад, ford-груз-van-white-side-view.jpg, а не DSC10003.jpg.
- Включіть відповідні теги alt . Аналогічно, використовуючи альти-теги на своїх сторінках і заповнюючи їх інформацією про вміст зображення, що дозволяє їх прочитати людиною, люди і машини розуміють, що там, наприклад, alt = "чоловік і жінка, що сидять на ковдрі для пікніка" замість alt = "picnic stock photo ". Для продуктів вкажіть будь-який відповідний номер моделі, колір, розмір або інші характеристики, важливі для ваших клієнтів. Це також допомагає доступність, тому що читачі екрану використовують alt теги для надання описів зображень для сліпих та слабозорих користувачів.
- Майте на увазі локалізацію . Якщо ви локалізуєте свій сайт для кількох локалей, інший спосіб покращити SEO для кожної локалі - переконатися, що ваші теги alt перекладаються разом із вмістом сайту. Це гарантує, що ці описи будуть підібрані для всіх мов, які ви підтримуєте.
- Розташуйте зображення біля тексту, який пов'язаний з ними . Близькість - це ще один спосіб, який пошукові системи визначають релевантність, так як ви створюєте свою сторінку, зберігайте зображення біля тексту, на який вони посилаються, або на які посилаються.
Якщо у вас більше одного копії одного і того ж зображення на своєму сайті, пошукові системи не завжди знають, хто є майстром і які є похідними. Це може сповільнити індексацію ваших зображень, оскільки вони повинні бути видалені від пошуку пошуковою системою. imgix допомагає вирішити цю проблему, створюючи будь-які необхідні похідні (наприклад, ескізи) на льоту і кешуючи їх надалі, так що вам не потрібно створювати або зберігати кілька копій.
Вдосконалення SEO через скорочення часу завантаження сторінки
Розмір зображення значною мірою сприяє швидкості завантаження сторінки (зокрема, часу до першого байта), що, у свою чергу, є ключовим показником визначення рейтингу результатів пошуку для ваших сторінок. Зменшення розміру зображення може значно покращити рейтинг, особливо якщо ви можете отримати повну завантаженість сторінки нижче порогового значення, коли багато користувачів починають виходити з нетерпіння.
На розмір файлу впливає багато факторів. imgix може поліпшити всі їх, для середньої економії розміру файлу на 80% в порівнянні з вихідним зображенням.
Розмір зображення та обтинання
Надання правильних розмірів зображення для даного пристрою (або максимально наближене) - це найкращий спосіб переконатися, що зображення не впливають на час завантаження сторінки. Навіть невеликі відмінності між фактичними та бажаними розмірами зображення можуть різко збільшити розмір файлу.
Найважливішою особливістю imgix є можливість зміни розміру зображень на льоту під будь-який пристрій. Наші клієнти, як правило, роблять це або шляхом створення зменшених зображень для конкретних точок розриву, так і зміни розміру до точного розміру з найближчого кешованого розміру, або за допомогою бібліотеки imgix.js для створення зображень точного розміру в реальному часі. Крім того, ми пропонуємо потужний розмір і функції обрізки для подальшого перевизначення зображення лише для областей, що представляють інтерес, тому кожен піксель має значення.
З урахуванням наведеного нижче зображення можна змінити розмір і обрізання розміру файлу.
- Оригінал
- Розміри (пікселі): 3600 × 2400
- Розмір файлу (кб): 6820 (6.82MB)
- h = 800
- Розміри (пікселі): 1200 × 800
- Розмір файлу (кБ): 233.6
- Економія розміру файлу з оригіналу: 96,53%
- Примітки: q = 75 за замовчуванням, якщо вимкнено
- h = 800 & w = 800 & fit = обрізати
- Розміри (пікселі): 800 × 800
- Розмір файлу (кБ): 184.15
- Економія розміру файлу з оригіналу: 97.29%
Наступним аспектом зменшення розміру зображення є забезпечення найкращого формату для користувача, який враховує їх пристрій, клієнт / браузер і роздільну здатність пікселів пристрою (DPR). Ці параметри можуть зменшити розмір файлу ще більше без видимих втрат у якості. Автоматичне узгодження вмісту ( авто параметр) є найпростішим способом переконатися, що подається найкращий формат. Вона перевіряє агент користувача і, якщо підтримується, перетворить зображення на нові формати, такі як WebP і JPEG XR, які пропонують чудову компресію над попередниками. Він також може бути об'єднаний з fm параметр для визначення резервного для клієнтів, які не підтримують нові формати.
Враховуючи наведене нижче зображення, можна змінити формат та якість зображення:
- Оригінал
- Розміри (пікселі): 2455 × 3600
- Розмір файлу: (kB): 786.78
- auto = формат
- Розміри (пікселі): 2455 × 3600
- Розмір файлу (кБ): 210.58
- Економія розміру файлу з оригіналу: 73,23% (без змін у розмірах)
- Примітки: стосується лише клієнтів, які підтримують WebP (у цьому прикладі Chrome)
- auto = format & fm = jpg
- Розміри (пікселі): 2455 × 3600
- Розмір файлу (кб): 521.68
- Економія розміру файлу з оригіналу: 33,69%
- Примітки: Резервний приклад; все ще значна економія навіть без підтримки WebP ( авто ігнорується в цьому випадку)
- auto = format & q = 40
- Розміри (пікселі): 2455 × 3600
- Розмір файлу (кб): 144.11
- Економія розміру файлу з оригіналу: 81.68%
- Примітки: За замовчуванням q = 75 якщо не встановлено, але багато зображень можуть знизитися без видимої втрати якості зображення
- Автоматичний параметр
- Формати та параметри якості
Для браузерів, які їх підтримують, imgix також підтримує підказки клієнта, які передають службі інформацію про DPR, розмір вікна перегляду та ширину контейнера. Це буде служити точному розміру для користувача, не вимагаючи JavaScript.
Поради щодо підтримки SEO зображення
Для нового сайту або сайту, де зображення не є основним вмістом, найкращим варіантом є використання вихідної URL-адреси джерела imgix (domain.imgix.net); Ви почнете з великого часу стиснення та завантаження сторінок для зображень, які покращують рейтинг пошуку. Немає різниці в рейтингу domain.imgix.net проти www.domain.com або domain.com/images для цих випадків.
У тих випадках, коли ви змінюєте вміст зображення на джерело imgix з вашого домену або з іншого CDN, може відбутися тимчасове зниження рейтингу пошуку для ваших зображень, оскільки Google займе деякий час, щоб повторно індексувати ваш сайт і зареєструйте джерело imgix. Якщо високий рейтинг самих зображень (на відміну від сторінок, які їх включають), важливий для вашої стратегії SEO, є кілька речей, які ви можете зробити, щоб мінімізувати цей тимчасовий провал.
- Налаштуйте джерело imgix, використовуючи власний субдомен домену вашого сайту . Структура URL-адреси за замовчуванням для джерела imgix - xxxx.imgix.net, але ви можете використовувати запис CNAME, щоб зв'язати це з субдоменом, а потім посилатися на субдомен у URL-адресах запиту зображення. У наведеному нижче прикладі фактичним джерелом, з якого витягується файл imgix, може бути ваш домен або зовнішній джерело, як, наприклад, кошик Amazon S3.
- Запис CNAME: images.domain.com. CNAME домен.imgix.net.
- Запит: <img src = "http://images.domain.com/image.jpg">
- Перевірте субдомен у Інструментах Google для веб-майстрів і Bing Webmaster Tools, якщо він новий . Це гарантує, що пошукові системи знають про нове місцезнаходження та що він належить до одного сайту.
- Оновити всі посилання на зображення у вмісті вашого сайту . Найкраще це зробити безпосередньо, переписуючи URL-адреси зображень у вмісті, щоб вказати на ваш джерело imgix (або субдомен, якщо використовувати цей метод вище). Якщо можливо, зберігайте структуру каталогів і назви файлів однаково, за винятком зміни домену. І якщо у вас є карта сайту, переконайтеся, що оновлення також.
- Уникайте перенаправлення 301 . Незважаючи на те, що вони забезпечують додатковий рівень гарантії, що запит зображення буде проходити (наприклад, із зовнішнього посилання безпосередньо на одне з ваших зображень), це збільшить час завантаження і надасть нижчий рівень користувальницького досвіду.
- Розглядайте трафік зображень через SSL / TLS . Google наразі вважає, що https є легким якісним сигналом, і з часом може надавати йому більше уваги. Усі стандартні джерела imgix за замовчуванням включають SSL / TLS, але щоб зробити це для власного піддомену, потрібно придбати сертифікат SSL для вашого джерела imgix - зверніться до нашого відділу продажів якщо ви хочете вивчити цей варіант.
Кілька заключних приміток
Важливо мати на увазі, що навіть з усіма перерахованими вище чинниками та порадами послідовне повідомлення від усіх пошукових систем полягає в тому, що якісний вміст залишається основним способом визначення вашого сайту та окремих сторінок. Почніть з великого вмісту та зображень, видаліть свої дублікати, змінюючи розмір за допомогою imgix на льоту, і ви будете на своєму шляху до поліпшення своєї позиції.