Як змусити зображення, що містять текст, індексуватися пошуковими системами?

Я будую невеликий веб-сайт з портфоліо для подруги, і, будучи рекламою і всім, вона ненавидить стандартні шрифти і хоче, щоб все було написано на замовлений шрифт.

Оскільки вбудовування шрифту CSS на сьогоднішній день насправді не є можливим, усі тексти (на щастя, їх не так багато) будуть розміщені як зображення.

Як я все ще можу індексувати вміст зображень? Для невеликих текстів (посилань, меню тощо) я вкладаю текст у атрибут alt, але для чогось більш тривалого я не думаю, що це рішення. Що я можу зробити ? Помістіть текст у прихованому знаку поруч із зображенням?

ВІДБАЛИ ФОНТИ!

Ні, але насправді вбудовувані шрифти працюють у всіх поточних браузерах (FF, Chrome, Safari, Opera) та IE5.5 + (так, він працює в IE з 90-х років.)

Завантажте свій файл TTF тут: http://www.kirsle.net/wizards/ttf2eot.cgi

Він поверне вам код і два файли назад (TTF, а потім EOT [M $ web font]) назад. Скопіюйте, вставте, завантажте, зробіть. Win win!

І, будь ласка, не використовуйте зображення :)

Якщо ви все-таки зробите це, напишіть свою розмітку так, ніби ви ЗАРІБНУєтесь із зображеннями, а потім додайте фонові зображення до всіх елементів та використовуйте текстовий відступ: -9999px, щоб приховати текст. Але будь ласка, просто використовуйте вбудовувані шрифти. Плюс, якщо ви клієнт / друг - це фотограф, вона, ймовірно, (не повинна бути), використовуючи стародавній браузер (я маю на увазі, дійсно древній, як, IE4 ...)

Якщо вона не продає власні шрифти на цьому веб-сайті, я думаю, що ви могли б більше працювати над вбудовуванням CSS (так, я читаю, що це зараз не для вас варіант, але я наполягаю).

Якщо випадок - це більш важка графічна робота над шрифтами (градієнтні кольори, скручене вирівнювання, глянсування, тиснення, гравірування ...), що робить дійсно неможливим відстежувати параметри CSS у міру необхідності, то я рекомендую зробити наступне:

використовувати зображення через CSS (можливо спрайт), і приховати текст прив’язки з текстовим ідентифікатором. html

<a href="work1.html" title="My first work" id="firstWork">My first work</a>

css

#firstWork {display: block; width: 200px; height: 150px; background-image:url('img/firstwork.jpg'); text-ident: -999em;}

Це одна техніка. Так, я знаю, Google може це покарати, але ви знаєте, я жодного разу не чув про один сайт, покараний за це.

Іншим способом буде використання тегу img всередині прив’язного тегу ALONG з текстом, а потім використання CSS для приховування тексту та виправлення img, якщо потрібно. Цей останній варіант дає можливість додавати alt, title, longdesc до зображення, збільшуючи кількість інформації та якість інформації, що індексується.

Ви можете навіть піти далі з цим останнім варіантом і перейти до ще кращого і свіжого рішення: використовуючи тег фігур, доступний для HTML5, разом з фіг.4. Ідея полягає у збереженні якоря-> фігура-> img + figcaption.

Figcaption зробить роль тексту тексту прив’язки, і ви можете використовувати CSS, щоб приховати її.

Ну, 3 рішення. Вибрати один. Я б пішов з останнім.

Гидота. Їй справді потрібно подолати проблеми зі шрифтом, оскільки вона вбиває доступність свого сайту і викликає всі інші види проблем, наприклад, уповільнення візуалізації своїх сторінок тощо.

Сказавши, що ви можете спробувати додати longdescатрибут до своїх зображень. Важко сказати, яку вагу, якщо така є, дають їй пошукові системи, але це, мабуть, більше нуля.

Хоча веб-шрифти зараз є загальноприйнятими для всіх основних веб-переглядачів, з'ясування кросс-браузерних тонкощів різних форматів шрифту може бути складним.

Google пропонує приємний веб-шрифт api та довідник шрифтів, щоб допомогти вам тут бути корисними.

Використання зображень навіть з позначками alt як єдиний спосіб потрапляння на інші сторінки на сайті насправді не забезпечить Google багато ясності.

Ваша найкраща ставка - переконати свого друга, що для вирішення проблеми вам потрібні текстові посилання десь на сторінці або на сайті. Наприклад, якщо ви можете налаштувати сторінку Sitemap із усіма текстовими посиланнями або на спадній сторінці на кожній сторінці з усіма текстовими посиланнями, які повинні працювати. Це не заподіє шкоди додатково до зображень посилань.

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

Як вважають інші, вам не доведеться використовувати стандартні шрифти "безпечні для веб-сторінок". Зараз існує безліч методів заміни шрифту, які працюватимуть у крос-браузерному режимі. Для гарного огляду перегляньте: Посібник веб-дизайнера щодо методів заміни шрифту . Не потрібно відмовлятися від SEO або вдаватися до зображення SEO. Ви можете мати свій торт і з'їсти його теж.

Я раніше це робив із фоновими зображеннями та прихованими вкладеними прольотами. Відмінно виглядає з текстовими браузерами та пошуковими системами та має спеціальні шрифти для багатших браузерів.

HTML:

<h1><span>Welcome to Hell on Wheels</span></h1>

CSS:

h1 {
    background: url(welcome.gif) no-repeat;
    display: block;
    height: 68px;
    width: 415px;
}
h1 span { display: none; }

Вихід:

Побачити це в дії .

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

sFIR може працювати для цієї мети, але використання його буде ресурсомістким на стороні клієнта, і він може стати складним, якщо вам потрібно вбудувати посилання в текст.

1. Просто використовуйте веб-шрифти . Практично будь-який браузер відображатиме їх правильно (якщо розмістити їх в альтернативних форматах). Просто розміщуйте їх як звичайні файли (якими вони є). Ось справді хороший підручник . Ще одна перевага: вам не потрібно думати, як обманути Google

2. sIFR , Cufón , FLIR або інші спрайти із зображеннями - це справді старий бик-краб, який був винайдений з невідомих причин;) цього не використовуйте.

3. Дуже багато тексту, набраного на пару зображень, це:

   • тривалий час завантаження
   • anti-seo (звичайно, ви можете використовувати маскування та подавати різний вміст для Google-бота та користувача, але це просто більше роботи та тестування, а також ризиковано [конкурентні власники сайтів можуть сказати вам на Google:])

Спробуйте використовувати бібліотеку typeface.js ! Ви можете використовувати будь-який нестандартний шрифт TrueType або OpenType, просто додавши бібліотеку вгорі сторінки і надаючи спеціальним класам особливі елементи. Безкоштовно, з відкритим кодом, крос-платформи та пошукові системи також побачать ваш текст. Не потрібно зображень; бібліотека обробляє все це, і ви просто спроектуєте це як типову веб-сторінку.

Тут є багато чудових варіантів відповідей. Здається, шрифт білки (http://www.fontsquirrel.com/fontface/generator) заслуговує на згадку. І так, API Google Font також чудові.

Що стосується заміни зображення, я особисто рекомендую прольот в елементі, а зображення є фоном на батьківському діапазоні. Але замість дисплея: жодного на проміжок часу, позиція: абсолютне вимкнення екрана. Таким чином читачі екранів все ще отримують цей вміст.

Я, здається, пригадую перехід екрану над відступом, але, можливо, я надів свої дурні штани.

Але подвійно також так - вставте ці шрифти.

Скористайтеся одним із наборів Font-Face від Font Squirrel . У комплекті передбачено 4 різних формати шрифту та правильний CSS, необхідний для їх використання. Працює у всіх сучасних браузерах і в застарілих версіях IE!

Створіть сайт із зображеннями. Потім у росові місяці, коли вона повертається, скаржиться на те, що не знайдена двигунами, відновлює сайт із текстом та стягує ще одну плату!