Thẻ IMG là gì? Cách sử dụng thẻ IMG trong SEO mới nhất 2020

5/5 - (1 bình chọn)

Nếu muốn tăng SEO cho một bài đăng nên chúng ta cần thêm hình ảnh thích hợp để bài viết đạt chuẩn SEO nhiều thêm nữa. Công cụ thẻ IMG được sử dụng như thế nào? Bạn có thể tìm hiểu cách sử dụng thể IMG qua bài đăng Cách dùng thẻ IMG trong seo mới nhất 2020 của ATP Software ngay nhé.

Khái niệm

Tag được dùng để nhúng một hình ảnh vào văn bản HTML
Tag có 2 tính chất cần thiết là src và alt, trong đó:
- src: đường kéo tham chiếu đến image.
- alt: được sử dụng như một văn bản thay thế khi image không hiển thị (hoặc không có sẵn). Đáng quan tâm là alt không hề dùng để hiển thị khi di chuyển chuột lên image, muốn văn bản hiển thị khi di chuyển chuột lên image thì ta dùng tính chất title thay thế.

Những điểm không giống nhau giữa HTML và XHTML

HTML4.01	XHTML1.0	XHTML1.1
không cần phải kết thúc tag	Cần khoảng trắng và ký tự “/” cho việc chấm dứt tag

Tính chất

Mẹo sử dụng:

Tính chất bắt buộc

Tính chất	Trị giá	Gợi ý	Mô tả
alt	Text	alt=”Đây là alt”	xác định text thay thế cho hình ảnh.
src	URL	src=”img/ img_name.gif”	xác định đường kéo tham chiếu của hình ảnh

Thuộc tính tùy chọn

Tính chất	Giá trị	Ví dụ	Giới thiệu
align	top bottom middle left right	align=”top”	Được sử dụng để sắp xếp vị trí của hình ảnh theo thành phần bao ngoài. Không khuyến khích sử dụng, sử dụng thuộc tính text-align của css để thay thế. không được hỗ trợ trong DTD Strict
border	pixels	border=”1px”	Xác định chiều rộng đường viền bao quanh image. không đề nghi dùng, sử dụng tính chất border của css để thay thế. Không được hỗ trợ trong DTD Strict
height	pixels tỷ lệ	height=”50px”	Xác định chiều cao của hình ảnh
hspace	pixels	hspace=”5px”	Dựng lại khoảng trắng bên trái và phải của image. không khuyên rằng dùng, dùng thuộc tính padding của css để thay đổi. Không được support trong DTD Strict
ismap	ismap	ismap=”ismap”	Sử dụng tính chất này thì khi click vào hình ảnh, tọa độ vị trí nhấn chuột sẽ gửi lên server như một chuổi truy vấn URL.
longdesc	URL	longdesc=”des.html”	Dựng lại một trang có chứa giới thiệu chi tiết content của hình ảnh thông qua tham số URL.
usemap	#mapname	usemap=” #mapName”	Dựng lại một hình ảnh thuộc khu vực hình ảnh map khi sử dụng
vspace	pixels	vspace=”5px”	Dựng lại khoảng trắng bên trên và dưới của image. không đề nghi dùng, sử dụng thuộc tính padding của css để thay thế. không được support trong DTD Strict
width	pixels phần trăm	width=”50px”	Xác định chiều rộng của image

Một vài bí quyết sử dụng thẻ img

Chúng ta có khả năng dùng thẻ img kết hợp cùng các thẻ khác để tạo giao diện site.

Kết hợp thẻ a để tạo link hình

Nếu như bạn mong muốn khi người sử dụng click chuột vào hình của bạn thì nó chuyển đến một trang nào đó thì bạn dùng thêm một thẻ a bao quan cái hình đó là được.

Chẳng hạn như: coi DEMO

1
2
3

<ahref="https://freetuts.net">
<imgsrc="http://code.freetuts.net/upload/config/images/hoc-lap-trinh-online.png"title="Học lập trình"/>
a>

Kết hợp thẻ map để gắn link vào một vị trí nhỏ trong hình

Giả sử bạn có một hình ảnh vệ tinh trong đó có một góc nhỏ là ảnh mặt trời. Bạn mong muốn khi click vào góc nhỏ mặt trời trong hình đấy thì nó sẽ chuyển tới hình full về mặt trời, bí quyết làm như ví dụ dưới đây.

Chẳng hạn như: coi DEMO

1
2
3
4
5

<imgsrc="http://www.w3schools.com/TAGS/planets.gif"width="145"height="126"alt="Planets"usemap="#planetmap">
<mapname="planetmap">
<areashape="rect"coords="0,0,82,126"alt="Sun"href="http://www.w3schools.com/images/sun.gif">
map>

Giải thích:

Trong thẻ img có một tính chất là usemap="#planetmap" có ý có nghĩa là chỉ định map được apply vào hình này, vì giá trị của nó là #planemap nên nó sẽ thu thập thẻ map có name="planemap".
Trong thẻ map có định nghĩa một area với các tính chất
- shape="rect" tức là rectangle
- coords="0,0,82,126" tức là danh sách các tọa độ hình thành area, lấy hình ảnh trên kia làm chuẩn mực để đo và được tính bằng pixel.
- alt="sun" là khi hover chuột vào vị trí có tọa độ trên thì sẽ xuất hiện title này
- href="http://www.w3schools.com/images/sun.gif" là đường link khi click vào area này thì chuyển đến.

Và đây được gọi là SEO (hình ảnh)

Bạn đã bao giờ tìm kiếm hình ảnh trên các công cụ tìm kiếm Google chưa? Nếu bạn chưa bao giờ làm việc đó thì tôi nghĩ bài viết này chỉ làm mất thời gian của bạn thôi. Còn nếu bạn đều đặn làm Điều này thì bạn có bao giờ lưu ý nó không? SEO hình ảnh

su-dung-the-img-seo-hinh-anh

Khi hình ảnh của bạn xuất hiện ở trang đầu Image Search, năng lực trao đổi liên kết sẽ rất cao. Họ thấy hình ảnh từ Web của bạn thu hút – đương nhiên họ sẽ click vào coi. Khi đấy traffic đã tăng lên rồi đấy! Tuyệt hơn nữa nếu họ lấy hình ảnh đó từ Web của bạn để dán vào site của họ. Đây cũng là một cách cực kì hay nữa để xây dựng liên kết cho site của bạn.

Đó là lời giải đáp của của câu hỏi “vì sao có thể sửa đổi và cải thiện hình ảnh”. Còn bây giờ, con người sẽ giải đáp xem “làm sao để sửa đổi và cải thiện hình ảnh cho công cụ tìm kiếm”

Tại sao thẻ ALT đặc biệt ?

1. Tăng sử dụng thử người sử dụng

Thẻ Alt thuộc những nguyên lý căn bạn trong thiết kế Web. Mục tiêu ban đầu thẻ được thiết kế để mô tả ý nghĩa hình ảnh cho khách truy cập không tải được hình trong những hoàn cảnh “Khách chặn hiển thị hình ảnh, mạng yếu, trình duyệt chuyên dụng cho người khiếm thị”. Một Web với toàn bộ hình ảnh có thẻ Alt chắc chắn sẽ được đề cao bởi người sử dụng kể cả trong trường hợp hình ảnh chẳng thể hiện thị.

2.Tác dụng của thẻ Alt trong SEO

Sử dụng thẻ alt ngoài việc tăng trải nghiệm người dùng nó còn giúp site của bạn được các công cụ tìm kiếm nhận xét cao. Kết hợp với việc thiết lập thẻ title cho hình ảnh có cơ hội làm tăng lượt truy cập tự nhiên từ google image.

Google đã tạo có thể công cụ hỗ trợ cải thiện năng lực nhận dạng hình ảnh trực tiếp không qua tên hay thẻ alt. Trong một vài trường hợp google có thể tự khái niệm hình ảnh của site bằng phương án quét ảnh qua thuật toán. Vì vậy có một vài hình ảnh có thể được google thứ hạng cho những truy vấn khác với mục đích của nhân sự cấp cao Website.