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

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

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

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

20 голосов | спросил Wookai 19 52010vEurope/Moscow11bEurope/MoscowFri, 19 Nov 2010 18:08:10 +0300 2010, 18:08:10

13 ответов


17

ПОЛУЧЕННЫЕ ШРИФТЫ!

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

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

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

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

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

ответил Oscar Godson 20 62010vEurope/Moscow11bEurope/MoscowSat, 20 Nov 2010 02:23:57 +0300 2010, 02:23:57
6

Если она не продает свои собственные шрифты на этом веб-сайте, я думаю, что вы оба могли больше работать над вложением 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 внутри тега anchor ALONG с текстом, а затем использовать CSS для скрытия текста и правильного позиционирования img, если это необходимо. Этот последний параметр дает вам возможность добавить alt, title, longdesc в изображение, увеличивая количество и количество информации, которая будет проиндексирована.

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

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

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

ответил Dave 19 52010vEurope/Moscow11bEurope/MoscowFri, 19 Nov 2010 21:38:27 +0300 2010, 21:38:27
5

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

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

ответил John Conde 19 52010vEurope/Moscow11bEurope/MoscowFri, 19 Nov 2010 18:15:43 +0300 2010, 18:15:43
3

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

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

ответил Phil Mander 20 62010vEurope/Moscow11bEurope/MoscowSat, 20 Nov 2010 02:41:47 +0300 2010, 02:41:47
2

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

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

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

ответил Ben Hoffman 19 52010vEurope/Moscow11bEurope/MoscowFri, 19 Nov 2010 18:41:31 +0300 2010, 18:41:31
2

Как и другие, вам не нужно идти со стандартными «веб-безопасными» шрифтами. В настоящее время существует множество методов замены шрифтов, которые будут работать в кросс-браузере. Для получения хорошего обзора, проверьте: Руководство для веб-дизайнера по замене шрифтов . Вам не нужно отказываться от SEO или прибегать к имиджу SEO. Вы можете получить свой торт и съесть его тоже.

ответил Virtuosi Media 19 52010vEurope/Moscow11bEurope/MoscowFri, 19 Nov 2010 22:31:05 +0300 2010, 22:31:05
2

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

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; }

Вывод:

Добро пожаловать в ад на колесах

Смотрите в действии .

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

ответил Annika Backstrom 20 62010vEurope/Moscow11bEurope/MoscowSat, 20 Nov 2010 03:06:39 +0300 2010, 03:06:39
1

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

ответил danlefree 19 52010vEurope/Moscow11bEurope/MoscowFri, 19 Nov 2010 21:33:52 +0300 2010, 21:33:52
1
  1. Просто используйте веб-сайты . Практически любой браузер отобразит их правильно (если вы поместите их в альтернативные форматы). Просто разместите их как обычные файлы (какие они есть). Вот действительно хороший учебник . Еще одно преимущество: вам не нужно думать, как обмануть Google

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

  3. Много текста, набранных на пару изображений, это:

    • длительное время
    • anti-seo (конечно, вы можете использовать клоакинг и подавать разный контент ботту и пользователю google, но это просто больше работы и тестирования, а также рискованных [владельцы конкурирующих сайтов могут рассказать вам о google:])
ответил Alex Bolotov 20 62010vEurope/Moscow11bEurope/MoscowSat, 20 Nov 2010 02:27:44 +0300 2010, 02:27:44
1

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

ответил Ricket 20 62010vEurope/Moscow11bEurope/MoscowSat, 20 Nov 2010 03:15:04 +0300 2010, 03:15:04
1

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

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

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

Но double и yeah - внедряйте эти шрифты.

ответил folktrash 20 62010vEurope/Moscow11bEurope/MoscowSat, 20 Nov 2010 03:39:48 +0300 2010, 03:39:48
1

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

ответил 20 62010vEurope/Moscow11bEurope/MoscowSat, 20 Nov 2010 02:59:33 +0300 2010, 02:59:33
0

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

ответил David Heffernan 20 62010vEurope/Moscow11bEurope/MoscowSat, 20 Nov 2010 02:29:33 +0300 2010, 02:29:33

Похожие вопросы

Популярные теги

security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132