Sử dụng thuộc tính tiêu đề và alt cho hình ảnh

. 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 các chủ đề Tiện ích WordPress trong thanh trang web được hình thành một cách linh hoạt. Đ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. BẰNG ví dụ rõ ràng 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.

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

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

1. Ưu điểm.
Rất có thể, khi bạn truy cập bất kỳ trang web nào, bạn sẽ nhận thấy rằng hầu hết mọi trang web đều có nhiều hình ảnh, ảnh chụp, hình ảnh hoặc các nội dung khác. yếu tố đồ họa.

Điều thường xảy ra là chủ sở hữu trang web viết một văn bản khác về một chủ đề nhất định và muốn nhấn mạnh rõ ràng suy nghĩ của mình để khách truy cập vào trang web có thể hiểu rõ hơn và hài lòng với thông tin nhận được đầy đủ. Bởi vì điều này sau đó có tác động tích cực đến uy tín của tài nguyên trong mắt người dùng và quảng bá trang web trên các công cụ tìm kiếm, mạng xã hội, v.v.

Những người lướt Internet để tìm kiếm thông tin (nội dung) cần thiết sẽ biết chính xác những gì trên trang web của bạn, ngoài chất lượng và tài liệu hữu ích Ngoài ra còn có sự hỗ trợ trực quan dưới dạng hình ảnh, hình ảnh và đồ họa khác. Đương nhiên, để những bức ảnh của bạn để lại ấn tượng, bạn cần tải chúng lên trang web, tốt nhất là ở định dạng chất lượng tuyệt vời, tất nhiên là điền thuộc tính tiêu đề và thuộc tính alt.

Khía cạnh tích cực tiếp theo của việc sử dụng hình ảnh trên trang web là khả năng tối ưu hóa chúng cho các truy vấn chính nhất định của trang tài nguyên tương ứng nơi chúng được đặt. Nhân tiện, điều này ảnh hưởng trực tiếp đến việc quảng cáo trang theo từ khóa được quảng cáo.

Trên hết, các công cụ tìm kiếm còn cung cấp khả năng tìm kiếm hình ảnh trên các dự án web. Nếu bạn đã đăng ký khóa cho hình ảnh thì người dùng yêu cầu này chọn bất kỳ hình ảnh nào, có thể sử dụng hình ảnh đã chọn để đi đến tài nguyên của bạn. Kết quả là bạn sẽ nhận được một khách truy cập mục tiêu khác.

2. Nhược điểm.

Khi sử dụng hình ảnh, hình ảnh, hình ảnh trên các trang web, những nhược điểm chủ yếu xảy ra ở những người mới bắt đầu, vì việc sử dụng các yếu tố đồ họa trong một dự án web có thể khiến người đọc sợ hãi.
Nguyên nhân:

Tải lên hình ảnh chất lượng thấp trong tình trạng tồi tệ;
Việc sử dụng các bức ảnh nói chung là lạc đề;
Có mặt quá nhiều số lượng lớn hình ảnh, làm tăng thêm trọng lượng cho trang và kéo dài thời gian tải của nó (thậm chí cả nền của mẫu);
Thiếu tối ưu hóa, tức là hình ảnh không có thuộc tính alt và tiêu đề cũng như không được “điều chỉnh” cho các truy vấn chính cụ thể.

Vai trò của thuộc tính tiêu đề và alt trong tối ưu hóa SEO hình ảnh

Như chúng tôi đã đề cập ở trên, việc sử dụng hình ảnh giúp trang web quảng bá và quảng bá trên các công cụ tìm kiếm. Ngoài ra, điều này còn cung cấp thêm một lượng khách truy cập được nhắm mục tiêu từ cùng một công cụ tìm kiếm. Và để làm được điều này, bạn chỉ cần sử dụng một vài cách đơn giản nhưng đồng thời thuộc tính quan trọng là một thuộc tính tiêu đề và thuộc tính thay thế cho bất kỳ hình ảnh, hình ảnh, bức ảnh và đồ họa khác. Bản chất của các thuộc tính này là sử dụng chúng để khai thác tối đa tài nguyên sẽ giúp quảng bá tài nguyên trên các công cụ tìm kiếm. Vì chỉ có hai thuộc tính nên chúng cũng có hai vai trò và chúng khác nhau.

Mặc dù thực tế đây là một phương pháp đơn giản để tăng vị trí của một dự án web trong các công cụ tìm kiếm, nhưng hầu hết các quản trị viên web đều không sử dụng đầy đủ chúng hoặc thậm chí bỏ qua chúng hoàn toàn. Một số người nhầm lẫn chúng hoàn toàn và không nhận ra sự khác biệt giữa chúng. Cũng có trường hợp những thuộc tính này được gọi là thẻ, nhưng đây là thuộc tính của thẻ img (từ từ “hình ảnh”), chứ không phải các thẻ riêng biệt, hãy nhớ điều này!

Bản thân thẻ HTML “img” được sử dụng để hiển thị hình ảnh (hình ảnh, ảnh chụp) trên trang web ở định dạng đồ họa. định dạng PNG, JPEG hoặc GIF. Nếu cần, hình ảnh tương tự có thể được tạo thành một liên kết, để làm điều này, bạn cần đính kèm thẻ “img” vào một thùng chứa .

1. Thuộc tính ALT.

Thuộc tính này được bao gồm trong ngôn ngữ HTML. Mục đích của nó là mô tả một đối tượng nhằm cung cấp thêm thông tin về đối tượng này (trong trường hợp của chúng tôi là hình ảnh). Những thứ kia. Thuộc tính alt của hình ảnh truyền tải mô tả của nó tới trình duyệt khi đồ họa bị tắt. Nếu bạn không chỉ định thuộc tính này, khách truy cập sẽ thấy biểu tượng trống thay vì hình ảnh mong muốn, nhưng nếu bạn chỉ định thuộc tính alt, văn bản của nó sẽ được hiển thị. Nhân tiện, thuộc tính này có tác động lớn nhất đến việc xếp hạng hình ảnh của các bot công cụ tìm kiếm.
Thuộc tính này hoạt động như thế nào? Có, rất đơn giản: lấy hình ảnh đã chọn mà bạn đã tải xuống máy tính và tải nó lên trang được yêu cầu trên trang web của bạn ở đúng nơi. Sau đó tìm mã HTML của bức ảnh này và nhập ý nghĩa sau vào đó: alt = “Mô tả ngắn gọn về bức ảnh và nhập từ khóa.” Phần mô tả phải càng ngắn càng tốt (tối đa một vài câu) và cũng không cần đưa nhiều từ khóa vào đó vì các công cụ tìm kiếm có thái độ tiêu cực đối với điều này và điều này có thể ảnh hưởng tiêu cực đến dự án của bạn.

Thuộc tính alt hoạt động như sau: khách truy cập đến trang web của bạn, nhìn thấy một hình ảnh, nhưng anh ta không có mô tả về nó (nếu chức năng hiển thị hình ảnh trong trình duyệt của anh ta được bật), nhưng các bot tìm kiếm sẽ nhìn thấy nó khi lập chỉ mục tài nguyên. Nếu chức năng này bị tắt trong trình duyệt của người dùng, thì thay cho hình ảnh, anh ta sẽ thấy văn bản (mô tả của bạn), nhờ đó người đọc sẽ hiểu đó là loại hình ảnh gì.

2. Thuộc tính TITLE

Thuộc tính tiêu đề này cũng được bao gồm trong ngôn ngữ HTML. Mục đích của nó về cơ bản giống như thuộc tính alt, nhưng điểm khác biệt là khách truy cập sẽ nhìn thấy mô tả của bạn nếu họ di con trỏ lên hình ảnh đã chọn. Thuộc tính này không ảnh hưởng đến việc quảng bá và quảng bá trang web, nhưng nó có thể ảnh hưởng đến yếu tố hành vi, điều này ảnh hưởng đến thứ hạng của một dự án web. Chúng tôi viết nó theo cách này: title = “Mô tả bức tranh.” Đó là tất cả. Chúng ta hãy nói thêm rằng việc tối ưu hóa hình ảnh và các thuộc tính của nó đều đóng một vai trò quan trọng trong việc quảng bá các trang web trên công cụ tìm kiếm.
Dưới đây là ví dụ về hình ảnh được tối ưu hóa SEO bằng cách sử dụng thuộc tính tiêu đề và alt

Bạn xem ví dụ về hình ảnh được tối ưu hóa với các thuộc tính sau:

Việc điền các thuộc tính tiêu đề và alt cho người dùng dễ dàng hơn nhiều trong CMS WordPress. Khi bạn tải hình ảnh lên trang web, một trình tải đặc biệt và một cửa sổ đặc biệt để tối ưu hóa sẽ xuất hiện:

Tiêu đề (đừng nhầm với tiêu đề) được điền tự động, nhưng thuộc tính alt bạn sẽ phải tự điền. Tiếp theo, ngay sau khi chèn hình ảnh vào trang web cần phải chỉnh sửa. Click vào nó trong biên tập trực quan, và bạn sẽ được đưa đến cửa sổ soạn thảo:

Như bạn có thể thấy, thuộc tính alt có thể được nhập vào đây nhưng nó đã được điền sẵn (điều này cũng quan trọng đối với hình ảnh mà bạn sẽ sử dụng làm hình thu nhỏ). Đây là nơi bạn điền thuộc tính tiêu đề, viết vào đó các truy vấn chính giống hệt với những truy vấn bạn chỉ định trong plugin: All In SEO Pack. Sau đó, lưu lại và thế là xong – hình ảnh của bạn đã được tối ưu hóa.

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

Bạn cần tải ảnh lên trang với chất lượng tốt nhất có thể nhưng cũng cần đảm bảo rằng chúng không ảnh hưởng đến tốc độ tải trang. Vì vẫn có người dùng có tốc độ thấp Theo đó, Internet, nếu trang tải lâu, thì người đó chắc chắn sẽ rời khỏi trang web và khó có thể quay lại!

Bạn cũng có thể nhận thấy sắc thái này trong nhiều dự án web: ngoài việc sử dụng hình ảnh lớn tính bằng kilobyte (kích thước), thuộc tính tiêu đề và alt đương nhiên không được sử dụng ở đây mà kích thước khổng lồ của nền trang web cũng được sử dụng. Nếu bạn cũng muốn sử dụng một hình ảnh làm nền của trang web, chúng tôi khuyên bạn nên chọn nó nhỏ và đơn sắc, vì nó sẽ mịn và bạn sẽ có được một bức ảnh chắc chắn.

Ngoài việc tải lên trang web hình ảnh chất lượng cao, đừng quên chi phí không gian đĩa về lưu trữ và tốc độ làm việc của nó. Làm sao tốc độ ít hơn, tài nguyên của bạn tải càng chậm. Do đó, chúng tôi khuyên rằng trước khi sử dụng hình ảnh chất lượng cao cho trang web, hãy quyết định nơi sử dụng hình ảnh đó và số lượng hình ảnh có thể tải lên trang.

Bạn cũng có thể sử dụng Photoshop để giảm trọng lượng của hình ảnh. Trong chương trình, hãy chuyển đến menu “Tệp” → “Lưu cho web và thiết bị” - chỉ vậy thôi.

Cải thiện việc tối ưu hóa dự án của bạn, cùng với một người có năng lực, bạn sẽ có một dự án tốt!

>> 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ì hầu hết mọi trang web đều có đủ loại hình ảnh, hình ảnh, ảnh chụp và các yếu tố đồ họa khác. 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à 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, còn chứa các phương tiện hỗ trợ trực quan dưới dạng hình ảnh, hình ảnh và tất cả 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 các từ khóa được ghi vào các bức ảnh thì người đang tìm kiếm hình ảnh dựa trên truy vấn này có thể thích bức ảnh của bạn và anh ta 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. Kết quả là, 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 tác phẩm của mình, sử dụng hình ảnh có chất lượng thấp và trong tình trạng tồi tệ, sử dụng chúng lạc đề, có quá nhiều hình ảnh gây nặng cho trang và phải mất rất nhiều thời gian để tải (bao gồm cả hình nền của trang). site), thiếu 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 được 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). Làm sao thuộc tính này làm? 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à đưa 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ả hình ảnh này bằng cách sử dụng từ khóa ". Nhưng phần mô tả không nên quá dài (nhiều nhất là một vài câu) và đặt nhiều từ khóa trong đó, vì các công cụ tìm kiếm không thích điều này, điều này cuối cùng có thể ảnh hưởng đến trang web của bạn.

Cái này hoạt động thuộc tính thay thế Vì vậy, khi khách truy cập vào một trang web, anh ta không thấy mô tả của hình ảnh (nếu trình duyệt của anh ta bật chức năng hiển thị hình ảnh), nhưng robot tìm kiếm sẽ nhìn thấy nó khi tôi lập chỉ mục trang web. Khách truy cập có thể 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 đó tại chỗ của hình ảnh này Một dòng chữ sẽ xuất hiện giúp khách truy cập hiểu đây là loại hình ảnh gì. Thuộc tính này được tính đến công cụ tìm kiếm 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 thì tốt hơ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 cả kích thước dung lượng ổ đĩa trên dịch vụ lưu trữ và tốc độ của máy chủ. 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:

Thuộc tính tiêu đề Và thay thế nên được sử dụng cho mọi người Hình ảnh hoặc liên kết trên trang để robot công cụ tìm kiếm hiểu được nội dung của từng trang liên kết hoặc Hình ảnh. Hãy luôn nhớ rằng robot công cụ tìm kiếm không xem các trang web theo cách của bạn và tôi.

Dưới đây bạn có thể xem các ví dụ về việc sử dụng thuộc tính tiêu đề Và thay thế Vì Hình ảnh Và liên kết.

<AHREF= "http://www.yoursite.com" tiêu đề= "tiêu đề trang của bạn" thay thế= "tiêu đề trang của bạn" > tiêu đề trang của bạn

Sử dụng một ví dụ hư cấu, hãy xem các thuộc tính thực sự được sử dụng như thế nào tiêu đề Và thay thếđể có liên kết tới một cuốn sách điện tử được cung cấp để tải xuống từ một trang web "Cơ bản về thế chấp":

="/downloads/skachat-besplatno.html" target="_blank" tiêu đề= "Bất kỳ độc giả am hiểu nào cũng sẽ tìm thấy ở đây thông tin về cách hình thành lãi suất cho khoản vay, tìm hiểu sự khác biệt giữa lãi suất thả nổi và lãi suất cố định, biết cách tính số tiền vay mà anh ta, với tư cách là người đi vay, có đủ khả năng để vay, và nhiều thứ khác nữa." thay thế= "Cách chọn khoản vay thế chấp phù hợp nhất với mục tiêu và khả năng CỦA BẠN">Cách chọn khoản vay thế chấp phù hợp nhất với mục tiêu và khả năng CỦA BẠN

Mã HTML cho hình ảnh:

<IMG SCR="/images/seo/alt-and-title-attributes.gif" tiêu đề="Thuộc tính ALT và TITLE của thẻ IMG" thay thế="Thuộc tính ALT và TITLE của thẻ IMG" />

Thuộc tính thẻ ALT và TITLE IMG

Mặc dù thực tế là việc sử dụng trong tối ưu hóa hình ảnh thuộc tính V. tiêu đề Và thay thế- đây là một cách đơn giản để tăng vị trí của trang web trong công cụ tìm kiếm, nhiều quản trị viên web không áp dụng đầy đủ hoặc thậm chí bỏ qua chúng hoàn toàn. Một số người nhầm lẫn chúng và không hiểu sự khác biệt giữa tiêu đề Và thay thế. Cần lưu ý rằng thường xuyên tiêu đề Và thay thếđược gọi nhầm là thẻ, mặc dù chúng thuộc tính thẻ hình ảnh(từ từ “hình ảnh”) chứ không phải các thẻ riêng lẻ.

HTML nhãn hình ảnhđược sử dụng để hiển thị trên các trang web hình ảnh (hình ảnh) V. định dạng đồ họa GIF, JPEG hoặc PNG. Nếu cần, hình ảnh có thể được tạo thành siêu liên kết bằng cách đính kèm thẻ hình ảnh vào một thùng chứa . Thuộc tính thay thế truyền tải một mô tả Hình ảnh dành cho các trình duyệt bị vô hiệu hóa đồ họa. Nếu thuộc tính này không được chỉ định thì người dùng sẽ thấy biểu tượng trống thay vì hình ảnh và nếu thay thếđược đăng ký, nội dung văn bản của nó sẽ được hiển thị. Thuộc tính thay thế có tác động lớn nhất đến thứ hạng hình ảnh của các công cụ tìm kiếm.

Thuộc tính tiêu đề cung cấp thông tin bổ sung về hình ảnh và không bắt buộc, mặc dù SEO - chuyên gia khuyên bạn nên sử dụng nó để quảng bá tốt hơn hình ảnh. Văn bản có trong thuộc tính tiêu đề,được hiển thị khi bạn di chuột qua hình ảnh và theo khái niệm chung của các công cụ tìm kiếm, mọi thứ mà người dùng nhìn thấy đều được tính đến khi xếp hạng. Bạn có thể kiểm tra tuyên bố này trong hình ảnh ở đầu trang này.

Robot công cụ tìm kiếm không thể nhận dạng văn bản được in trên Hình ảnh đồ hoạ, do đó, cụm từ khóa được viết bằng chữ in hoa trên hình ảnh sẽ không ảnh hưởng đến việc thúc đẩy tìm kiếm của nó dưới bất kỳ hình thức nào. Việc thêm tên miền cho trang web của bạn sẽ có tác dụng lớn hơn - điều này không chỉ giúp phổ biến nó mà còn bảo vệ hình ảnh khỏi bị sao chép.

Công cụ tìm kiếm không tính đến tất cả văn bản có trong thuộc tính thay thế: Ví dụ: Google chỉ hiển thị 15-17 từ đầu tiên và Yandex hiển thị nhiều hơn một chút - tối đa 28 từ. Dù thế nào đi nữa, số lượng từ này cũng khá đủ để tạo ra một ngữ cảnh rõ ràng.

Công cụ tìm kiếm tập trung vào văn bản liên quan đến hình ảnh. Đặc biệt là những gì được viết ngay bên dưới nó, coi dòng chữ này là tên của hình ảnh. Vì vậy, tiêu đề phải sao chép hoàn toàn nội dung của văn bản tương ứng thuộc tính thay thế và nó nên được đặt trong cùng một đoạn < p>, ô bảng < td> hoặc gắn thẻ

, BẰNG hình ảnh.

Như với tất cả các câu hỏi khác Tối ưu hóa công cụ tìm kiếm, bạn nên tập trung vào việc tạo nội dung độc đáo mang lại giá trị cho người dùng trang web của mình. Việc có mô tả chính xác về hình ảnh trên trang của bạn sẽ giúp ích rất nhiều không chỉ cho những người dùng có kết nối rất chậm hoặc những người đã tắt hình ảnh hoàn toàn mà còn hữu ích cho phần lớn người dùng của bạn, những người sẽ đánh giá cao sự thật rằng họ họ có thể chỉ cần di chuột qua hình ảnh biết thêm một chút thông tin.

TỐI ƯU HÓA HÌNH ẢNH

Thông tin về hình ảnh được truyền tải bằng thuộc tính “alt” Hình ảnh thường có vẻ là một trong những yếu tố đơn giản nhất của trang web nhưng việc sử dụng chúng cũng có thể được tối ưu hóa. Mỗi hình ảnh có một tên tệp và thuộc tính “alt”. Cả hai yếu tố này đều hữu ích. Thuộc tính “alt” cho phép bạn nhập văn bản sẽ được hiển thị nếu hình ảnh không thể hiển thị vì lý do nào đó (1). Tại sao thuộc tính này được sử dụng? Nếu người dùng đang xem trang web của bạn thông qua trình duyệt có hình ảnh bị tắt hoặc sử dụng trình đọc màn hình, Văn bản thay thế sẽ đóng vai trò là mô tả của hình ảnh. Văn bản thay thế cũng được sử dụng trong các liên kết hình ảnh. Trong trường hợp này, nó được các công cụ tìm kiếm xử lý dưới dạng văn bản liên kết cho liên kết. Mặc dù vậy, chúng tôi khuyên bạn không nên sử dụng một số lượng lớn các liên kết đồ họa để điều hướng trang web của mình vì các liên kết văn bản cũng đóng vai trò này. Và cuối cùng, mô tả hay về hình ảnh trong thẻ alt cùng với tên tệp mang tính thông tin sẽ giúp các công cụ tìm kiếm hình ảnh, chẳng hạn như Tìm kiếm Hình ảnh của Google, lập chỉ mục hình ảnh từ trang web của bạn. Các tệp phải được lưu trữ trong các thư mục riêng biệt và được lưu ở định dạng có thể truy cập công khai Thay vì lưu trữ các tập tin hình ảnh trong các thư mục và thư mục con khác nhau trên một miền, bạn nên thu thập tất cả chúng vào một thư mục(Ví dụ, moyastranaotkrytok.ru/images/). Điều này đơn giản hóa đường dẫn đến các tập tin đồ họa. Sử dụng các loại tệp được hỗ trợ rộng rãi. Hầu hết các trình duyệt đều hỗ trợ đồ họa ở định dạng JPEG, GIF, PNG và BMP. Đó cũng là một ý tưởng hay nếu phần mở rộng tệp phù hợp với loại của nó.

NHỮNG MẸO CÓ ÍCH

Viết neo thông tin. Văn bản liên kết phải chứa ít nhất thông tin ngắn gọn về trang được liên kết. Chúng tôi không khuyến nghị: sử dụng các từ chung chung như “trang”, “bài viết” hoặc “nhấp vào đây” làm văn bản liên kết; sử dụng văn bản liên kết không liên quan gì đến tài liệu được liên kết; sử dụng URL trang làm văn bản liên kết (mặc dù có thể có ngoại lệ, chẳng hạn như nếu bạn cần quảng cáo địa chỉ trang web mới). Phấn đấu cho sự ngắn gọn. Mục tiêu của bạn là một văn bản ngắn gọn và giàu thông tin, thường là một cụm từ chính xác. Chúng tôi không khuyến nghị: viết văn bản liên kết dài, chẳng hạn như toàn bộ câu hoặc đoạn văn. Làm nổi bật các liên kết. Làm cho văn bản neo liên kết của bạn khác biệt về mặt trực quan với văn bản thông thường trên trang web của bạn. Người dùng bị đánh lừa bởi các liên kết tinh vi hoặc các liên kết mà họ có thể vô tình nhấp vào. Chúng tôi không khuyến nghị: sử dụng kiểu CSS cho các liên kết không thể phân biệt được bằng hình ảnh với văn bản trang thông thường. Đừng quên văn bản liên kết cho các liên kết nội bộ. Bạn có thể tập trung chủ yếu vào các liên kết trỏ đến các trang web khác, nhưng các liên kết nội bộ cũng quan trọng vì chúng giúp Google thu thập dữ liệu trang web của bạn tốt hơn. Chúng tôi không khuyến nghị: điền vào văn bản neo với một số lượng lớn từ khóa; đặt các liên kết không cần thiết không có giá trị điều hướng cho người dùng.

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. Xét cho cùng, đây là một cách tuyệt vời để thu hút sự chú ý của khách truy cập, giới thiệu sản phẩm và khuyến khích khách hàng tiềm năng thực hiện các hành động có 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 trở nê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, mọi người có thể đến trang web của bạn từ tìm kiếm hình ảnh trong Yandex hoặc Google lưu lượng truy cập bổ sung(với việc sử dụng đúng phím Alt và 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 được chỉ định trong thuộc tính Alt cũng được tính đến robot tìm kiếm khi lập chỉ mục một 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 thư rác: chúng tôi không khuyên bạn nên liệt kê một số lượng lớn các phím đượ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 hình ảnh này có thể được sửa đổi một chút và viết như sau: “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.