Làm cách nào để có được hình ảnh chứa văn bản được lập chỉ mục bởi các công cụ tìm kiếm?

Tôi đang xây dựng một trang web danh mục đầu tư nhỏ cho một người bạn, và trong tất cả các quảng cáo, cô ấy ghét các phông chữ tiêu chuẩn và muốn mọi thứ được viết bằng một phông chữ tùy chỉnh.

Vì hiện tại, việc nhúng phông chữ CSS không thực sự là một lựa chọn, tất cả các văn bản (may mắn thay, không có nhiều trong số chúng) sẽ được đặt dưới dạng hình ảnh.

Làm thế nào tôi vẫn có thể lập chỉ mục nội dung hình ảnh? Đối với các văn bản nhỏ (liên kết, menu, v.v ...), tôi đặt văn bản vào thuộc tính alt, nhưng đối với một cái gì đó dài hơn, tôi không nghĩ đó là giải pháp. Tôi có thể làm gì ? Đặt văn bản trong một div ẩn bên cạnh hình ảnh?

THAM GIA CÁC FONTS!

Không, nhưng thực sự, phông chữ có thể nhúng hoạt động trên tất cả các trình duyệt hiện tại (FF, Chrome, Safari, Opera) và IE5.5 + (vâng, nó đã hoạt động trong IE từ những năm 90).

Tải TTF của bạn tải lên tại đây: http://www.kirsle.net/wizards/ttf2eot.cgi

Nó sẽ cung cấp cho bạn mã và 2 tệp trở lại (một TTF và sau đó là phông chữ EOT [M $ web]). Sao chép, dán, tải lên, thực hiện. Giành chiến thắng!

Và làm ơn, làm ơn, đừng sử dụng hình ảnh :)

Tuy nhiên, nếu bạn LÀM, hãy viết đánh dấu của bạn như thể bạn KHÔNG sử dụng hình ảnh và sau đó thêm hình ảnh nền cho tất cả các thành phần và sử dụng văn bản thụt lề: -9999px để ẩn văn bản. Nhưng xin vui lòng, chỉ sử dụng phông chữ nhúng. Ngoài ra, nếu bạn là khách hàng / bạn bè của bạn là một nhiếp ảnh gia, cô ấy có lẽ (không nên) sử dụng trình duyệt cổ (ý tôi là, THỰC SỰ cổ đại, như, IE4 ...)

Trừ khi cô ấy đang bán phông chữ của riêng mình trên trang web này, tôi nghĩ cả hai bạn có thể làm việc nhiều hơn với nhúng CSS (vâng, tôi đọc đây không phải là một lựa chọn cho bạn bây giờ, nhưng tôi nhấn mạnh).

Nếu vỏ máy là một tác phẩm đồ họa nặng hơn dựa trên phông chữ (màu gradient, căn chỉnh xoắn, làm bóng, chạm nổi, khắc ...), làm cho nó thực sự không thể hiển thị các tùy chọn CSS thorugh khi cô ấy cần, thì tôi khuyên bạn nên làm như sau:

sử dụng hình ảnh thông qua CSS (có lẽ là một sprite) và ẩn văn bản neo với nhận dạng văn bản. 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;}

Đây là một kỹ thuật. Vâng, tôi biết, Google có thể trừng phạt điều đó, nhưng bạn biết đấy, tôi chưa bao giờ nghe về một trang web duy nhất bị phạt bằng cách sử dụng này.

Một cách khác là sử dụng thẻ img bên trong thẻ neo ALONG với văn bản, sau đó sử dụng CSS để ẩn văn bản và định vị chính xác img nếu cần. Tùy chọn cuối cùng này cung cấp cho bạn khả năng thêm alt, tiêu đề, longdesc vào hình ảnh, tăng số lượng thông tin và chất lượng được lập chỉ mục.

Bạn thậm chí có thể đi xa hơn với tùy chọn cuối cùng này và tìm kiếm một giải pháp mới và tốt hơn: sử dụng thẻ hình, có sẵn cho HTML5, cùng với figcaption. Ý tưởng là giữ neo-> hình-> img + figcaption.

Figcaption sẽ làm cho vai trò văn bản neo và bạn có thể sử dụng CSS để ẩn nó.

Vâng, 3 giải pháp. Chọn một. Tôi sẽ đi với người cuối cùng.

Kinh quá. Cô ấy thực sự cần phải khắc phục các vấn đề về phông chữ của mình khi cô ấy giết chết khả năng truy cập trang web của mình và gây ra tất cả các loại vấn đề khác như làm chậm việc hiển thị các trang của cô ấy, v.v.

Đã nói rằng bạn có thể thử thêm longdescthuộc tính vào hình ảnh của bạn. Thật khó để nói có bao nhiêu trọng lượng, nếu có, các công cụ tìm kiếm cung cấp cho nó nhưng có lẽ nhiều hơn không.

Mặc dù phông chữ web hiện có khá nhiều tiêu chuẩn trên tất cả các trình duyệt chính, nhưng việc tìm ra những rắc rối của trình duyệt chéo của các định dạng phông chữ khác nhau có thể khó khăn.

Google cung cấp một thư mục phông chữ api và phông chữ đẹp để giúp đỡ ở đây mà bạn có thể thấy hữu ích.

Sử dụng hình ảnh ngay cả với thẻ alt là cách duy nhất để bạn truy cập các trang khác trong trang web sẽ không thực sự mang lại sự rõ ràng cho Google.

Đặt cược tốt nhất của bạn là thuyết phục bạn của bạn rằng bạn cần liên kết văn bản ở đâu đó trên trang hoặc trang web để giải quyết vấn đề. Ví dụ: nếu bạn có thể thiết lập trang Sơ đồ trang web với tất cả các liên kết văn bản hoặc thả xuống trên mỗi trang với tất cả các liên kết văn bản sẽ hoạt động. Nó sẽ không gây ra bất kỳ thiệt hại nào ngoài hình ảnh liên kết.

Tôi sẽ đề nghị không sử dụng các liên kết ẩn vì Google có thể thấy điều này là bất chính và làm giảm thứ hạng trang web của bạn hoặc đánh dấu nó là spam.

Như những người khác đã đề xuất, bạn không cần phải sử dụng phông chữ "an toàn cho web" tiêu chuẩn. Có nhiều kỹ thuật thay thế phông chữ hiện có sẽ hoạt động theo cách đa trình duyệt. Để có cái nhìn tổng quan, hãy xem: Hướng dẫn của Nhà thiết kế web về Phương pháp thay thế phông chữ . Bạn không cần phải từ bỏ SEO hoặc dùng đến SEO hình ảnh. Bạn có thể có bánh của bạn và ăn nó quá.

Tôi đã từng làm điều này với hình ảnh nền và các nhịp lồng nhau ẩn. Có vẻ tuyệt vời với trình duyệt văn bản và công cụ tìm kiếm và có phông chữ tùy chỉnh cho trình duyệt phong phú hơn.

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

Đầu ra:

Xem nó trong hành động .

Thực sự không có giới hạn về số lượng văn bản bạn có thể thay thế bằng phương pháp này (thẻ thích hợp và kiểu ẩn theo cách thông minh) nhưng thành thật mà nói, phông chữ tùy chỉnh mà khách hàng của bạn muốn sử dụng dường như ít đọc hơn tất cả các phông chữ web phổ biến. Bạn thực sự nên cố gắng nói chuyện với cô ấy xuống.

sFIR có thể hoạt động cho mục đích này, nhưng sử dụng nó sẽ tốn nhiều tài nguyên ở phía máy khách và nó có thể gặp khó khăn nếu bạn cần nhúng các liên kết trong văn bản.

1. Chỉ cần sử dụng webfonts . Hầu như bất kỳ trình duyệt nào cũng sẽ hiển thị chúng một cách chính xác (nếu bạn đặt chúng ở các định dạng thay thế). Chỉ cần lưu trữ chúng như một tập tin thông thường (mà chúng là). Đây là hướng dẫn thực sự tốt . Thêm một lợi thế nữa: bạn không cần phải nghĩ cách lừa google

2. sIFR , Cufón , FLIR hoặc các họa tiết hình ảnh khác - đó là loại cua bò kiểu cũ thực sự được phát minh mà không rõ lý do;) không sử dụng điều đó.

3. Rất nhiều văn bản được gõ trong một vài hình ảnh đó là:

   • thời gian tải lâu
   • chống seo (tất nhiên bạn có thể sử dụng kỹ thuật che giấu và cung cấp nội dung khác nhau cho google bot và người dùng, nhưng đó chỉ là công việc và thử nghiệm nhiều hơn và cũng có rủi ro [chủ sở hữu trang web đối thủ có thể nói với bạn về google:])

Hãy thử sử dụng thư viện typeface.js ! Bạn có thể sử dụng bất kỳ phông chữ TrueType hoặc OpenType tùy chỉnh chỉ bằng cách đưa thư viện vào đầu trang của bạn và cung cấp cho các thành phần phông chữ đặc biệt của bạn một lớp đặc biệt. Nó miễn phí, mã nguồn mở, đa nền tảng và các công cụ tìm kiếm cũng sẽ thấy văn bản của bạn. Không có hình ảnh cần thiết; thư viện xử lý tất cả điều đó và bạn chỉ cần thiết kế nó như một trang web thông thường.

Rất nhiều lựa chọn tuyệt vời ở đây để trả lời. Có vẻ như Squirrel Font (http://www.fontsquirrel.com/fontface/generator) xứng đáng được đề cập. Và vâng, API Google Font cũng rất tuyệt.

Đối với thay thế hình ảnh, cá nhân tôi muốn giới thiệu một khoảng trong một yếu tố, với hình ảnh làm nền trên cha mẹ của khoảng đó. Nhưng thay vì hiển thị: không có gì trên nhịp, vị trí: tuyệt đối tắt màn hình. Bằng cách đó, người đọc màn hình vẫn có được nội dung đó.

Tôi dường như nhớ lại việc di chuyển ra khỏi màn hình để giành chiến thắng, nhưng có lẽ tôi đã mặc chiếc quần ngớ ngẩn của mình.

Nhưng gấp đôi cũng yeah - nhúng các phông chữ.

Sử dụng một trong các bộ dụng cụ Font-Face từ Font Squirrel . Bộ này cung cấp 4 định dạng phông chữ khác nhau và CSS chính xác cần có để sử dụng chúng. Hoạt động trong tất cả các trình duyệt hiện đại và trong các phiên bản IE cũ!

Xây dựng trang web với hình ảnh. Sau đó trong một tháng sương khi cô ấy quay lại phàn nàn về việc không được tìm thấy bởi các công cụ xây dựng lại trang web bằng văn bản và tính phí khác!