Как получить изображения, содержащие текст, для индексации поисковыми системами?

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

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

Как я могу по-прежнему индексировать содержимое изображений? Для небольших текстов (ссылки, меню и т. Д.) Я помещаю текст в атрибут alt, но для чего-то большего я не думаю, что это решение. Что я могу сделать ? Поместить текст в скрытый div рядом с изображением?

Врезать шрифты!

Нет, но на самом деле, встраиваемые шрифты работают во всех современных браузерах (FF, Chrome, Safari, Opera) и IE5.5 + (да, они работают в IE с 90-х годов).

Загрузите ваш TTF здесь: http://www.kirsle.net/wizards/ttf2eot.cgi

Он вернет вам код и 2 файла (TTF, а затем EOT [M $ web font]). Копировать, вставить, загрузить, готово. Выиграй, выиграй!

И пожалуйста, пожалуйста, не используйте изображения :)

Однако, если вы это сделаете, напишите свою разметку так, как будто вы НЕ используете изображения, а затем добавьте фоновые изображения ко всем элементам и используйте text-indent: -9999px, чтобы скрыть текст. Но, пожалуйста, просто используйте встраиваемые шрифты. Плюс, если вы клиент / друг - фотограф, она, вероятно, (не должна) использовать древний браузер (я имею в виду, ДЕЙСТВИТЕЛЬНО древний, например, IE4 ...)

Если она не продает свои собственные шрифты на этом сайте, я думаю, что вы оба могли бы больше работать над встраиванием CSS (да, я читал, что сейчас это не вариант для вас, но я настаиваю).

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

используйте изображения через CSS (возможно, спрайт) и скрывайте текст привязки с помощью text-идент. 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 к изображению, увеличивая количество информации и качество индексируемой.

Вы даже можете пойти дальше с этим последним вариантом и перейти к еще лучшему и свежему решению: использовать тег figure, доступный для HTML5, вместе с figcaption. Идея заключается в том, чтобы держать якорь-> figure-> img + figcaption.

Figcaption сделает роль якорного текста, и вы можете использовать CSS, чтобы скрыть его.

Ну, 3 решения. Выбери один. Я бы пошел с последним.

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

Сказав, что вы можете попробовать добавить longdescатрибут к вашим изображениям. Трудно сказать, сколько веса, если таковые имеются, поисковые системы придают этому, но это, вероятно, больше нуля.

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

Google предоставляет хороший веб-интерфейс API api и каталог шрифтов , который может вам помочь.

Использование изображений даже с alt-тегами в качестве единственного способа попасть на другие страницы сайта на самом деле не даст Google особой ясности.

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

Я бы предложил не использовать скрытые ссылки, так как Google может посчитать это злонамеренным и снизить рейтинг вашего сайта или пометить его как спам.

Как и предполагали другие, вам не нужно использовать стандартные шрифты «web-safe». Сейчас доступно много методов замены шрифтов, которые будут работать в кросс-браузерной манере. Для хорошего обзора, посмотрите: Руководство веб-дизайнера по методам замены шрифтов . Вам не нужно отказываться от 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, просто включив библиотеку в верхней части своей страницы и присвоив своим специальным шрифтовым элементам специальный класс. Он бесплатный, с открытым исходным кодом, кроссплатформенный, и поисковые системы тоже увидят ваш текст. Изображения не нужны; библиотека обрабатывает все это, и вы просто создаете ее как обычную веб-страницу.

Здесь много отличных вариантов ответов. Кажется, Font Squirrel (http://www.fontsquirrel.com/fontface/generator) заслуживает упоминания. И да, API Google Font также хороши.

Что касается подстановки изображений, лично я бы порекомендовал диапазон в элементе с изображением в качестве фона для родительского элемента диапазона. Но вместо отображения: ни один на промежутке, позиция: абсолютная вне экрана. Таким образом программы чтения с экрана все еще получают этот контент.

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

Но вдвойне, да - вставьте эти шрифты.

Используйте один из наборов Font-Face от Font Squirrel . Комплект предоставляет 4 различных формата шрифтов и правильный CSS, необходимый для их использования. Работает во всех современных браузерах и в старых версиях IE тоже!

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