Thẻ img thay thế. Thuộc tính Alt và Title cho hình ảnh: nghệ thuật bố cục. Thuộc tính Alt là gì

Alt là thuộc tính cho thẻ img để đặt văn bản thay thế cho hình ảnh. Thông tin văn bảnđược hiển thị khi tải đồ họa bị tắt trong trình duyệt của người dùng và làm rõ những gì được hiển thị trong hình ảnh này. Thẻ HTML có tên “alt” từ từ thay thế – Lựa chọn thay thế chữ.

Tại sao phải điền thuộc tính alt?

TRONG máy tìm kiếm không chỉ văn bản được lập chỉ mục mà còn thông tin đồ họa và hình ảnh là một trong những nguồn tăng thêm lưu lượng truy cập. Để hiển thị các hình ảnh có liên quan khi tìm kiếm hình ảnh, Google và Yandex tập trung vào các thẻ cho biết nội dung được trình bày trên chúng. Nhờ đó, người dùng sẽ nhận được chính xác những gì mình đang tìm kiếm trong kết quả tìm kiếm.

Robot tìm kiếm chủ yếu tập trung vào hình ảnh có thuộc tính alt, vì vậy theo quan điểm tối ưu hóa SEO thì đây là một điểm rất quan trọng. Ví dụ: nếu bạn có hơn 1000 hình ảnh trên trang web của mình trong hàng trăm bài viết thì mỗi bài viết trong số đó có thể mang lại lưu lượng truy cập bổ sung.

Khách truy cập sẽ chỉ nhìn thấy thuộc tính alt nếu tải hình ảnh bị tắt hoặc nếu kết nối Internet kém. Các phần tử đồ họa được tải sau khi trình duyệt nhận được thông tin, do đó, văn bản thay thế sẽ hiển thị trên màn hình điều khiển trước đó.

Thuộc tính alt sẽ chỉ hữu ích khi tìm kiếm hình ảnh, vì vậy nó sẽ không ảnh hưởng đến kết quả không phải trả tiền dưới bất kỳ hình thức nào.

Quy tắc điền đúng alt

Để đạt được kết quả tối đa từ việc điền thẻ alt, bạn cần tuân thủ các quy tắc sau.

• Công cụ tìm kiếm bỏ qua các mô tả dài, vì vậy hãy điều chỉnh alt của bạn thành 5-6 từ nhưng không vượt quá 200-250 ký tự.
• Mô tả của hình ảnh phải tương ứng rõ ràng với nội dung của nó. Ví dụ: sẽ không có ý nghĩa gì khi chèn cụm từ "mèo nhà" vào hình ảnh có ô tô.
• Để tăng hiệu quả tối ưu hóa hình ảnh, nên sử dụng từ khóa từ thẻ H1 hoặc tiêu đề bài viết nhưng chỉ khi chúng có ý nghĩa tương tự nhau.
• Không sử dụng số lớn trong văn bản từ khóa, không cho phép spam trong mô tả.
• Không tối ưu hóa thuộc tính alt của hình ảnh thuộc nền của trang web hoặc các mục menu của bạn. Thẻ của họ phải trống hoặc vắng mặt hoàn toàn. Nếu có thể, hình ảnh cho các thành phần thiết kế có thể được đưa vào CSS sprite.
• Đừng nghĩ ra các thẻ alt bổ sung cho hình ảnh tương tự từ cùng một vật liệu hoặc sản phẩm. Ví dụ: bạn có một cửa hàng áo khoác trực tuyến, mỗi cửa hàng có một số ảnh. Điều này có nghĩa là bạn viết tên giống nhau cho mọi người, bạn chỉ cần thêm các số 1, 2, 3 để phân biệt.

Ngày nay thật khó để tưởng tượng các trang web không có hình ảnh, đặc biệt là các cửa hàng trực tuyến và danh mục sản phẩm. Sau tất cả những điều này cách tuyệt vời thu hút sự chú ý của du khách, giới thiệu sản phẩm và thúc đẩy khách hàng tiềm năngđể thực hiện các hành động được nhắm mục tiêu: mua sản phẩm hoặc đặt hàng dịch vụ. Bạn có thể đọc thêm về những mục đích khác cần có hình ảnh và chúng nên xuất hiện trên những trang nào trong bài viết “Chọn và tối ưu hóa hình ảnh cho trang web” của chúng tôi.

Việc sử dụng hình ảnh sẽ làm cho trang web của bạn hấp dẫn hơn và giúp giữ chân khách truy cập trên đó, nhưng quan trọng hơn, lưu lượng truy cập bổ sung có thể đến trang web của bạn từ các tìm kiếm hình ảnh trong Yandex hoặc Google (nếu bạn sử dụng đúng thuộc tính Alt và Alt). Thẻ tiêu đề ).

Thuộc tính Alt cho hình ảnh là gì

Thuộc tính Alt cho hình ảnh- đây là văn bản mô tả hình ảnh trong thẻ html . Nó sẽ hiển thị nếu không thể tải được hình ảnh. Văn bản sẽ được hiển thị thay cho hình ảnh chưa được tải (nếu thuộc tính Alt được điền).

Hãy so sánh. Đây là hình ảnh chưa tải sẽ trông như thế nào nếu không điền thuộc tính Alt:

Và đây là hình ảnh có dòng chữ “ Máy giặt Slavda WS30T/ET" trong thuộc tính Alt của thẻ :

Thuộc tính Alt giúp bạn có thể tìm hiểu những gì hiển thị trong ảnh khi người dùng không thể nhìn thấy. Ngoài ra, văn bản viết trong thuộc tính Alt được robot tìm kiếm tính đến khi lập chỉ mục trang web. Cuối cùng là tối ưu hóa tên ảnh và thuộc tính Alt trong thẻ đơn giản hóa việc tìm kiếm hình ảnh, chẳng hạn như trong Yandex hoặc Google Images.

Cách soạn đúng thuộc tính Alt cho hình ảnh

1. Số từ tối ưu là 3-5, nhưng độ dài của văn bản thẻ không quá 75-80 ký tự. Chúng tôi khuyên bạn nên giữ thông tin ngắn gọn và súc tích nhưng đi thẳng vào vấn đề.
2. Điều kiện tiên quyết là sử dụng các truy vấn chính.
3. Tốt hơn nên sử dụng từ khóa trong trường hợp chỉ định để tìm kiếm dễ dàng hơn.
4. Tránh spam: Chúng tôi khuyên bạn không nên liệt kê một số lượng lớn từ khóa được phân tách bằng dấu phẩy, như trong các thẻ khác.
5. Điều cần thiết là Alt đề cập đến văn bản của trang và mô tả những gì được hiển thị trong hình.

Thuộc tính tiêu đề cho hình ảnh

Ngoài thuộc tính Alt, bạn cũng nên đưa văn bản vào thuộc tính Tiêu đề. Thông số này chỉ định thông tin bổ sung về hình ảnh khi người dùng di chuột qua hình ảnh:

Trong mã html, thuộc tính Tiêu đề được điền cho hình ảnh trông như thế này:

Thuộc tính Tiêu đề được soạn hợp lý thậm chí còn giúp cải thiện các yếu tố hành vi.

Cách soạn tiêu đề cho ảnh đúng cách

1. Thuộc tính Tiêu đề phải khớp với hình ảnh. Bạn không nên viết vào đó những gì không liên quan đến bức tranh.
2. Tốt hơn là nên sử dụng một Tiêu đề ngắn để thuận tiện cho người dùng - sẽ không ai muốn đọc một gợi ý dài hàng km về bức tranh.
3. Sự hiện diện của các từ khóa là mong muốn. Bạn không nên sử dụng những từ như “ảnh”, “hình ảnh”, v.v. vì đã rõ nó là gì rồi.

Ví dụ về cách điền chính xác thuộc tính Alt và Title cho thẻ

Hãy xem ví dụ về cách bạn có thể nhập văn bản vào thuộc tính Alt và Title cho ảnh. Để làm điều này, hãy lấy một hình ảnh từ trang web của một công ty xây dựng.

Khi soạn Alt, bạn cần tập trung vào những gì bạn đang bán/cung cấp. Đối với hình ảnh từ ví dụ của chúng tôi, tốt hơn là nên soạn alt “Xây nhà từ một khúc gỗ”, thay vì chỉ là “ngôi nhà” hoặc “công trình”.

Thuộc tính tiêu đề cho của hình ảnh này Bạn có thể sửa đổi một chút và viết như thế này: “Xây dựng một ngôi nhà gỗ”.

Khó điền Alt và Title

Việc điền chính xác các thuộc tính Alt và Title cho ảnh sẽ giúp ích trong Tối ưu hóa công cụ tìm kiếmđịa điểm. Nhưng đừng quên các khía cạnh khác của việc tối ưu hóa hình ảnh, chẳng hạn như “trọng lượng”, chất lượng và tên của hình ảnh. Nếu bạn không có thời gian để soạn các thuộc tính Alt và Title, chúng tôi có thể giúp bạn và thực hiện công việc cho bạn.

>> Tối ưu hóa hình ảnh | Thuộc tính ALT và TITLE để mô tả hình ảnh

Làm thế nào để tối ưu hóa hình ảnh đúng cách cho một trang web.

Xin chào độc giả thân yêu của trang web của tôi!

Trong bài viết này, tôi muốn cho bạn biết hình ảnh trên trang web được sử dụng để làm gì và vai trò của chúng đối với việc tối ưu hóa SEO. Xem xét tầm quan trọng của việc sử dụng các thuộc tính Mã HTML alt và tiêu đề, tôi sẽ đưa ra ví dụ về việc sử dụng hình ảnh được tối ưu hóa và không được tối ưu hóa, tìm hiểu xem bạn nên sử dụng hình ảnh ở chất lượng nào và điều này ảnh hưởng như thế nào đến hoạt động của trang web.

Ưu và nhược điểm của việc sử dụng hình ảnh trên trang web:

Ưu điểm: Bạn có thể nhận thấy, nếu bạn đã truy cập nhiều trang web trên Internet với một mục đích cụ thể, thì trên hầu hết mọi trang web đều có đủ loại hình ảnh, hình ảnh, ảnh chụp và những thứ khác. yếu tố đồ họa. Họ ở đâu và họ mang loại gánh nặng nhận thức nào trên các trang web hoặc blog này?

Nó thường xảy ra khi tác giả của một trang web, khi viết văn bản về một chủ đề cụ thể, muốn bày tỏ suy nghĩ của mình một cách chính xác và rõ ràng hơn, để người truy cập trang web này nhận được tất cả thông tin cần thiếtđầy đủ. Yếu tố này càng ảnh hưởng đến uy tín của nó trong mắt khách truy cập và việc quảng bá trang web trên các công cụ tìm kiếm, trong mạng xã hội vân vân.

Những người truy cập Internet và đang tìm kiếm thông tin (nội dung) họ cần sẽ biết rằng trang web này, ngoài văn bản hữu ích và chất lượng cao, tài liệu trực quan dưới dạng hình ảnh, hình ảnh và các loại đồ họa.

Và nếu bạn muốn những bức ảnh của mình đẹp và khó quên, bạn cần sử dụng chúng bất cứ khi nào có thể chất lượng tốt.

Khác điểm tích cực sử dụng hình ảnh trên trang web - khả năng sử dụng tối ưu hóa hình ảnh cho một yêu cầu chính trang cụ thể trang web để cải thiện việc quảng bá trang này cho truy vấn khóa được quảng cáo.

Ngoài ra, trong các công cụ tìm kiếm còn có tính năng tìm kiếm hình ảnh trên các trang web. Và nếu từ khóa được ghi vào các bức ảnh thì người đang tìm kiếm yêu cầu này hình ảnh, có thể anh ấy sẽ thích hình ảnh của bạn và anh ấy có thể muốn biết hình ảnh này nằm trên trang web nào và truy cập trang web của bạn. Cuối cùng, bạn sẽ được hưởng lợi từ việc này bằng cách nhận được lưu lượng truy cập được nhắm mục tiêu dưới dạng khách truy cập vào trang web của bạn.

Nhược điểm: Có thể có nhiều bất lợi khi sử dụng hình ảnh trên một trang web, đặc biệt là đối với người mới bắt đầu. Chúng tôi sẽ phân tích tất cả những sai lầm mà bất kỳ ai cũng có thể vô tình mắc phải hoặc không biết, điều này sẽ dẫn đến việc sử dụng đồ họa trên trang web có thể khiến khách truy cập đang hoặc đang cố gắng truy cập trang web của bạn sợ hãi.

Và có nhiều lý do cho việc này; thái độ cẩu thả đối với công việc của mình, sử dụng hình ảnh có chất lượng kém và trong tình trạng tồi tệ, sử dụng chúng lạc đề, có quá nhiều hình ảnh số lượng lớn hình ảnh mang lại nhiều sức nặng cho trang và tải rất lâu (kể cả nền của trang), không tối ưu hóa hình ảnh cho từ khóa. Dưới đây là những nhược điểm chính của việc sử dụng tất cả các loại đồ họa trên trang web.

Nhưng những nhược điểm này có thể tránh được nếu bạn biết cách biến chúng thành tích cực. Chúng ta sẽ thảo luận thêm về tất cả những điều này trong bài viết này. Vì vậy hãy đọc nó đến cuối.

Thuộc tính Alt và Title trong tối ưu hóa SEO hình ảnh:

Như tôi đã viết ở trên trong bài viết này, việc sử dụng hình ảnh có thể giúp trang web quảng cáo trên các công cụ tìm kiếm. Cung cấp thêm dòng khán giả mục tiêu(khách truy cập) từ các công cụ tìm kiếm. Để làm điều này, bạn cần sử dụng hai thuộc tính rất cần thiết là alt và title cho bất kỳ hình ảnh, hình ảnh, bức ảnh nào, v.v. Bản chất của các thuộc tính này là sử dụng chúng để tận dụng tối đa chúng, điều này sẽ giúp quảng bá trang web trong các công cụ tìm kiếm. Trong trường hợp của chúng tôi, có hai thuộc tính tương ứng và chức năng chúng thực hiện sẽ khác nhau một chút.

Thuộc tínhALT: Thuộc tính này bao gồm trong ngôn ngữ html. Mục đích của nó là mô tả một số đối tượng để cung cấp Thông tin thêmồ đối tượng này(trong trường hợp của chúng tôi là hình ảnh). Thuộc tính này hoạt động như thế nào? Nó hoạt động rất đơn giản: bạn lấy hình ảnh mong muốn, nằm trên ổ cứng hoặc phương tiện lưu trữ (ổ flash) của bạn và chèn nó vào trang mong muốn trang web đến đúng nơi.

Sau đó bạn lấy, tìm code cho hình ảnh này và nhập giá trị sau alt=" Mô tả bức ảnh này bằng từ khóa" . Но описание не нужно делать слишком большим (максимально пару предложений) и тулить туда много ключевых слов, так как поисковые системы этого не любят, что в итоге может сказаться на Вашем сайте.!}

Cái này hoạt động thuộc tính alt Vì vậy, khi khách truy cập vào một trang web, anh ta không nhìn thấy mô tả của hình ảnh (nếu trình duyệt của anh ta kích hoạt chức năng hiển thị hình ảnh), nhưng anh ta thấy nó robot tìm kiếm khi tôi lập chỉ mục một trang web. Khách truy cập có thể nhìn thấy văn bản này khi hình ảnh bị tắt trong cài đặt trình duyệt và sau đó văn bản hình ảnh này sẽ xuất hiện ở vị trí của hình ảnh này, qua đó khách truy cập có thể hiểu đó là loại hình ảnh gì. Thuộc tính này được các công cụ tìm kiếm tính đến khi họ lập chỉ mục trang web của bạn.

Thuộc tính TITLE: Các thuộc tính tiêu đề cũng được bao gồm trong ngôn ngữ html. Mục đích của nó giống như thuộc tính alt, nhưng có điểm khác biệt là mô tả này sẽ được hiển thị cho người dùng trang web khi di chuột qua hình ảnh bằng con trỏ. Thuộc tính này không liên quan đến việc quảng bá trang web nhưng nó cho phép bạn tăng yếu tố hành vi, điều này cũng ảnh hưởng đến vị trí của trang web trong công cụ tìm kiếm. Nó được viết như thế này title=" Mô tả của hình ảnh" . Поэтому !} tối ưu hóa hình ảnh cũng đóng một vai trò lớn trong việc quảng bá trang web trên các công cụ tìm kiếm.

Hình ảnh mẫu được tối ưu hóa SEO bằng thuộc tính alt và tiêu đề:

Bây giờ bạn sẽ thấy mẫu hình ảnh được tối ưu hóa bằng cách sử dụng hai thuộc tính được liệt kê ở trên.

Với thuộc tính tiêu đề (di con trỏ lên hình ảnh) title="Vận động viên thể dục mèo" > !}

Với thuộc tính alt (không có hình ảnh) Mã mẫu cho hình ảnh này:

Không có thuộc tính alt (không có hình ảnh) Mã mẫu cho hình ảnh này:

Hình ảnh và hình ảnh nên được sử dụng trên trang web với chất lượng như thế nào?

Tất nhiên, tốt hơn là bạn nên sử dụng hình ảnh và hình ảnh trên trang web với chất lượng tốt nhưng không ảnh hưởng nhiều đến quá trình tải của trang web. Vì nhiều người trên Internet sử dụng Internet ở tốc độ thấp và nếu họ không đợi trang web tải xong, họ sẽ rời khỏi trang này và sẽ không quay lại đây nữa, điều này cuối cùng sẽ ảnh hưởng đến lưu lượng truy cập.

Ngoài ra, điều tôi nhận thấy khi xem qua nhiều trang web là ngoài những hình ảnh có kích thước lớn (kilobyte) trên trang web, họ còn sử dụng size lớn nền như một bức tranh. Nếu bạn đã quyết định sử dụng một hình ảnh làm nền, tốt hơn hết bạn nên chọn nó một màu duy nhất và nhỏ để nó ăn khớp với nhau và bạn sẽ có một bức tranh chắc chắn.

Ngoài ra, khi sử dụng hình ảnh chất lượng cao, bạn cần tính đến kích thước không gian đĩa về tốc độ lưu trữ và máy chủ của bạn. Nó càng thấp thì trang web của bạn sẽ tải càng chậm. Vì vậy, trước khi sử dụng hình ảnh có chất lượng tốt cho trang web, bạn cần biết nên sử dụng chúng ở đâu và với số lượng bao nhiêu.

Với tôi thế thôi bài viết này Tôi đang hoàn thành. Tôi hy vọng bây giờ bạn hiểu nó là gì tối ưu hóa hình ảnh và tối ưu hóa hình ảnh sử dụng những thuộc tính nào cho việc này.

Nhân tiện, nếu bạn không biết cách giảm chất lượng ảnh thì hãy sử dụng Photoshop. Để thực hiện việc này, hãy chuyển đến menu "Tệp" và chọn "Lưu cho Web và Thiết bị".

Nếu bạn thích bài viết này, vui lòng để lại nhận xét ở cuối bài viết này. Tôi sẽ rất biết ơn bạn.

Các trang web khác:

Chào mọi người. Để không lãng phí thời gian của bạn, hãy nói ngắn gọn và đi thẳng vào vấn đề.

Tiêu đề của hình ảnh là dòng chữ hiện lên khi bạn di con trỏ lên hình ảnh. Điều này là cần thiết để đưa ra gợi ý cho khách truy cập. Cho biết những gì được hiển thị trong hình hoặc nơi để tìm.

Hình ảnh thay thế - từ thay thế từ tiếng Anh. Nó giống thế này thứ hữu ích, mà các công cụ tìm kiếm thích lập chỉ mục để xác định nội dung được mô tả. Ngoài ra, nó sẽ hiển thị nếu người dùng tắt hiển thị hình ảnh trong trình duyệt. Điều này vô nghĩa và được thực hiện trong những trường hợp hiếm hoi.

Tuy nhiên, nếu người dùng tắt hiển thị nội dung đồ họa hoặc xảy ra lỗi nào đó từ phía ai đó, thì thay vì hình ảnh, một biểu tượng nhỏ có văn bản sẽ hiển thị. Văn bản này là alt của hình ảnh.

Hình ảnh Alt và tiêu đề cho SEO

Đối với hình ảnh tiêu đề có giá trị tối thiểu. Nó không được lập chỉ mục dễ dàng, nhưng nó có thể có lợi cho bạn về các yếu tố hành vi. Bây giờ là năm 2018, SEO bây giờ có nghĩa là khả năng sử dụng và nội dung chất lượng. Do đó, hãy thu hút sự chú ý của người dùng bằng mọi cách.

Bạn cứ nghĩ mà xem, sẽ dễ chịu hơn khi có chú giải công cụ xuất hiện trên hình ảnh.

Và đây hình ảnh thay thế- đây là một kho báu. Thứ nhất, GoogleBot coi sự vắng mặt của nó là một sai lầm, Yandex trung thành hơn. Thứ hai, nó dễ dàng được lập chỉ mục và hình ảnh như vậy sẽ xuất hiện trong phần “Hình ảnh” khi tìm kiếm. Điều này có nghĩa là bằng cách này, bạn có thể thu hút thêm lưu lượng truy cập vào trang web của mình.

Thứ ba, vì nó được lập chỉ mục nên có thể sử dụng nó để tăng giá trị của trang. Sẽ tốt hơn nếu bạn viết thêm một cái bằng alt yêu cầu tần số thấp. Nhưng ở đây bạn cần phải cẩn thận.

Cách điền đúng alt và tiêu đề cho hình ảnh

Với tiêu đề mọi thứ đơn giản hơn nhiều. Không có quy tắc nào cho công cụ tìm kiếm, nhưng điều này không có nghĩa là bạn viết bất kỳ điều dị giáo nào ở đây. Ở trên chúng tôi đã giới thiệu về yếu tố hành vi. Bạn không nên làm phiền người dùng mà hãy có ích cho họ.

1) Nó không nên dài. Đồng ý, gợi ý 4 dòng sẽ gây ra sự từ chối.

2) Phải liên quan đến hình ảnh theo một cách nào đó.

3) Không được trùng lặp với tiêu đề chính, tiêu đề h1-h5 hoặc thuộc tính alt.

Hình ảnh thay thế có trọng lượng đối với công cụ tìm kiếm nên có những hạn chế về quy tắc nhưng cũng có những khả năng.

1) Một từ thôi chưa đủ, nên ở trong giới hạn 3 từ. Số ký tự tối đa là 250.

2) Nó phải phù hợp với nội dung của hình ảnh.

4) Tốt nhất là không nên lặp lại với các alt khác trên trang.

Vì vậy, khi thêm một hình ảnh khác vào blog của bạn, hãy suy nghĩ. Có lẽ ai đó sẽ muốn tìm thấy cô ấy? Cố gắng biến nó thành lưu lượng truy cập bổ sung.

Nơi điền alt và tiêu đề của hình ảnh bằng WordPress làm ví dụ

Ví dụ: trong WordPress bạn chỉ cần đi từ bảng điều khiển (console) đến phần "Phương tiện truyền thông" — "Thư viện". Tiếp theo, chọn bất kỳ hình ảnh.

Hoặc khi chỉnh sửa một bài viết, bạn chỉ cần nhấp vào bất kỳ hình ảnh nào được chèn vào, sau đó nhấp vào bút chì.

Tất nhiên, trên ví dụ về wordpress nó dễ hiển thị nhất, nhưng nhiều CMS phổ biến cho một cơ hội như vậy. Ví dụ ở đây là Joomla. Họ có cái riêng của họ đá dưới nước, nhưng đối với hầu hết nội dung đồ họa, bạn có thể đặt alt nếu nhấn "Chỉnh sửa hình ảnh"

Đó là tất cả. Chúng tôi thực sự hy vọng rằng chúng tôi hữu ích cho bạn. Nếu có, xin vui lòng thích nó. Điều này thúc đẩy chúng tôi tạo ra nhiều nội dung chất lượng cao và thú vị hơn!

Trân trọng, Bản chất của bạn.

Xin chào các bạn thân mến. Hôm nay, theo yêu cầu của một trong những người đăng ký của tôi, tôi sẽ cho bạn biết về thẻ ALT (thuộc tính), thẻ này sẽ có trong thông số của từng hình ảnh trên trang web.

Sự vắng mặt của thuộc tính alt không xuất hiện bên ngoài trong hình ảnh. Tuy nhiên, về mặt nội bộ, trong mã nguồn, việc thiếu thẻ alt là một lỗi. Và robot tìm kiếm đếm mọi lỗi như vậy. Và những điều tưởng chừng như nhỏ nhặt đó lại chậm lại khuyến mãi công cụ tìm kiếm bất kỳ trang web nào.

Và nếu khi đặt hình ảnh vào bài viết, bạn có thể chỉ ra ngay văn bản thay thế mong muốn thì với hình ảnh (yếu tố) thiết kế sẽ khó khăn hơn. Điều xảy ra là những yếu tố thiết kế cụ thể này thiếu thẻ alt. Và nhiều người mới bắt đầu thậm chí còn không biết về sự hiện diện của những lỗi này trên trang web của họ.

Tại sao cần có thuộc tính alt?

Đó là tất cả về cơ chế mà trình duyệt tải một trang web. Khi tải một trang, văn bản từ thuộc tính alt sẽ được tải trước tiên, sau đó văn bản sẽ được thay đổi thành hình ảnh. Nếu tính năng tải hình ảnh bị tắt trong trình duyệt thì văn bản thay thế sẽ được thay thế cho hình ảnh (từ thuộc tính alt).

Robot tìm kiếm chỉ xem trang về chất lượng mã nguồn và sự hiện diện của thẻ alt cho họ biết về nội dung của hình ảnh. Nhân tiện, ngay cả sự hiện diện của thẻ alt không có văn bản cũng sẽ được công cụ tìm kiếm chấp nhận như một dấu hiệu của hình thức tốt. Nghĩa là, sự hiện diện của thuộc tính là bắt buộc nhưng giá trị của nó là tùy chọn.

Alt="giá trị" !}

Cách kiểm tra hình ảnh cho thuộc tính alt

Cách dễ dàng và dễ tiếp cận nhất đối với mọi người là kiểm tra mã nguồn của trang (xác thực mã) xem có lỗi không.

Để làm được điều này, bạn cần mở dịch vụ xác minh mã W3C và nhập url trang.

Sau khi kiểm tra mã nguồn, trang được chỉ định, một báo cáo về tính khả dụng và thông tin lỗi (nếu có) sẽ mở ra trên màn hình. Và nếu ít nhất một hình ảnh trên trang thiếu thẻ alt, bạn sẽ thấy lỗi này:

Lưu ý: nếu có nhiều lỗi, tôi khuyên bạn nên sử dụng tìm kiếm CTRL+F để tìm kiếm nhanh những thông tin cần thiết.

Đây là một cách khác cho phép bạn tìm hiểu về lỗi trong mã nguồn trang web của mình. Tuy nhiên, để sử dụng công cụ này, bạn cần đăng ký tài khoản quản trị trang web Bing. Và ngay trong văn phòng này có một công cụ "Công cụ phân tích SEO".

Nơi bạn cũng nhập địa chỉ trang web để phân tích và nhận báo cáo. Và nếu có một thẻ bị thiếu ở đâu đó thay thế, bạn sẽ nhìn thấy nó.

Bạn cũng có thể xem mã nguồn của trang để biết chính xác nơi cần tìm. Để làm điều này, bạn cần vào phần đánh dấu "Mã trang" và tìm ra lỗi đã xảy ra ở đâu. Làm cho nó dễ dàng mã yêu cầu sẽ được đánh dấu bằng màu vàng.

Cách tìm đoạn mã nguồn mong muốn và thêm thuộc tính alt

Trước hết, bạn cần xem xét kỹ dữ liệu bạn nhận được từ các công cụ phân tích. Ghi chú:

- vào tên của tập tin hình ảnh,

- tên của lớp, khối chứa hình ảnh,

- tới các phần tử lân cận.

Tất cả các yếu tố này sẽ giúp ích trong việc tìm kiếm tệp trong tương lai và trong đó đoạn mã nguồn mong muốn.

Ví dụ, hãy nhìn vào ảnh chụp màn hình ở trên. Mã chúng tôi cần là không đáng kể. Vâng, chúng tôi biết biểu ngữ này treo trên đâu mới sách miễn phí Azamata. Hơn nữa, chúng tôi biết rằng biểu ngữ nằm trong thanh trang web. Nhưng hãy tưởng tượng rằng tôi không chú ý đến điều này. Vậy bạn có thể học được gì từ mã này?

Trước hết chúng ta biết tên file ảnh. Và việc hình ảnh nằm trên một trang web khác không thành vấn đề. Chúng ta cũng thấy khối DIV có lớp

. Và thực tế là khối này nằm bên trong một danh sách, phần tử trong đó có mã định danh id=”text-10″ .

Và từ lớp “textwidget”, rõ ràng là mã chúng ta cần nằm trong Widget. Và nếu vậy thì việc tìm kiếm tất cả những yếu tố mà chúng ta đã chú ý đến cũng vô ích. Vì trong hầu hết Chủ đề WordPress các tiện ích trong thanh trang web được tạo động. Điều này có nghĩa là trong mã của tệp chịu trách nhiệm về thanh trang web ( thanh bên.php) sẽ chủ yếu mã php. Điều này sẽ không trỏ đến một tiện ích cụ thể theo bất kỳ cách nào.

Vì vậy, chúng tôi đi đến cơ quan hành chính Bảng điều khiển WordPress – « Vẻ bề ngoài» — "Widget" và tìm kiếm widget mong muốn.

Và ở đây chúng ta thêm thuộc tính alt vào thông số hình ảnh.

Trước Sau đó alt="Tiếp thị thông tin 20/80" !}/>

Thế là xong, mọi thứ đã sẵn sàng.

Nhưng mọi thứ đều rõ ràng với widget, ai cũng có thể xử lý được. Còn các yếu tố thiết kế cụ thể thì sao?

Để làm ví dụ, tôi sẽ chỉ hiển thị mẫu mà tôi đang sử dụng ở dạng phiên bản gốc. Tức là ở giai đoạn cài đặt đã có 21 lỗi (thiếu thuộc tính alt).

Mở tab "Mã trang" và phân tích mã. Chúng ta đang tìm kiếm những yếu tố mà chúng ta có thể bám vào, qua đó chúng ta có thể tìm thấy tập tin cần thiết và mã.

Trong tham số tìm kiếm, bạn nên chọn tìm kiếm tất cả các tệp có mã chứa đề cập đến thành phần bạn đang tìm kiếm. Trong trường hợp của chúng tôi, tên của tệp hình ảnh.

Tiếp theo, tốt hơn là nên làm bản sao lưu tập tin (sao chép riêng vào máy tính của bạn) và bạn có thể bắt đầu chỉnh sửa. TRONG Tổng chỉ huy Chỉ cần chọn tập tin và nhấn F4. Hoặc bạn có thể sao chép tệp vào máy tính và mở tệp bằng Notepad++. Vâng, hoặc ít nhất là thông qua Notepad.

Vì vậy, hãy mở tệp và tìm mã được yêu cầu. Bạn có thể sử dụng tìm kiếm CTRL + F.

Chúng tôi đã tìm thấy nó và chèn thuộc tính alt bắt buộc. Vì vậy, với tất cả những hình ảnh không có nó.

Sau khi thực hiện thay đổi, hãy lưu file và kiểm tra lại bằng các công cụ phân tích.

Các bạn ơi, đây là cách các thuộc tính alt được thêm vào hình ảnh. Để có ví dụ trực quan, hãy xem video hướng dẫn. Và hãy nhớ rằng tốt hơn là thực hiện tất cả các sửa đổi mẫu này trên

Và tất nhiên, hãy đọc bài viết về nó nói chung. Bạn sẽ phát hiện ra rằng nhiều hình ảnh mẫu không những không có thẻ alt mà còn không được tối ưu hóa chút nào.

Và đó là tất cả đối với tôi ngày hôm nay. Tôi mong chờ lời nhận xét của bạn. Mọi thành công và Có một tâm trạng tốt! Hẹn gặp lại các bạn trong những video và bài viết mới.