VIEWPORT LÀ GÌ

     

Thẻ meta viewport là một trong yếu tố rất được coi như trọng vào thiết kế thỏa mãn nhu cầu (Responsive web design) và về tối ưu hóa nguyên lý tìm kiếm (SEO). Nội dung bài viết này giúp đỡ bạn giải nghĩa Meta viewport là gì? cùng cách sử dụng và sửa đều lỗi thường gặp mặt với thẻ viewport trong website wordpress.

Bạn đang xem: Viewport là gì

Meta Viewport là gì

Meta Viewport là một trong những loại thẻ (Meta tags) bên trong phần trường đoản cú trực thuộc tài liệu HTML. Meta Viewport thông tin cho trình chuyên chú biết nội dung của của website đề nghị được hiển thị thế nào cho phù hợp với khung quan sát của thiết bị.

Trong tôi ưu hóa biện pháp tìm tìm (SEO), meta viewport được xem là một nhân tố technical seo, bởi vì phần lớn tác động của thẻ viewport là ảnh hưởng tác động cách buổi giao lưu của website và những kỹ thuật liên quan.

Tại Sao Meta Viewport lại quan liêu trọng

Sự ra đời của đa nền tảng và nhiều thiết bị kéo theo nội dung đề nghị được đặt tại đa kích thước. đưa sử nội dung và bố cục website của chúng ta được đặt tại 1200px. Điều này vẫn là ổn nếu người tiêu dùng sử dụng nội dung đó trên những thiết bị có màn hình lớn (laptop tuyệt TV), nhưng lại sẽ là không cân xứng nếu người tiêu dùng sử dụng đầy đủ thiết bị nhỏ hơn (tablet, năng lượng điện thoại) nhằm theo dõi nội dung đó. Tưởng tượng qua hình ảnh dưới đây.

*
Website khi không tồn tại thẻ meta viewport

Trong trường phù hợp này, người dùng phải theo dõi nội dung được thắt chặt và cố định ở 1200px trong cơ thể có độ phân giải là 414x763px (ngang x dọc) tương tự với chiếc apple iphone 6s cùng như chúng ta thấy, nó như là nhìn qua ô hành lang cửa số vậy.

Vậy cũng giữa những trường vừa lòng như này, thì thẻ Meta Viewport có tính năng gì? chính xác là như kim chỉ nan bạn đầu được bản thân giải nghĩa. Meta Viewport giúp đồng bộ khung người của sản phẩm công nghệ với bố cục tổng quan nội dung theo một tỉ lệ đáp ứng.

Đối với nguyên lý tìm kiếm

Google đã từng có lần nói

Thẻ này thông báo cho trình duyệt biết cách hiển thị một trang trên lắp thêm di động. Sự hiện hữu của thẻ này cho Google biết rằng trang này gần gũi với vật dụng di động.

https://developers.google.com/search/docs/advanced/crawling/special-tags

Cũng trong một bài viết khác.

Các trang được tối ưu hóa cho những thiết bị không giống nhau phải bao gồm thẻ meta viewport làm việc đầu tài liệu. Thẻ meta viewport cung ứng cho trình duyệt chỉ dẫn cách kiểm soát điều hành kích thước và phần trăm của trang.

https://web.dev/responsive-web-design-basics/#viewport

Nếu như các bạn hay quan sát và theo dõi Google, các bạn sẽ biết chúng ta không thường xuyên xuyên công khai minh bạch khẳng định một yếu hèn tố cố định nào kia có tác dụng trong SEO.Nhưng trong hai đoạn trích dẫn trên, bản thân lại không thấy một lời đậy định như thế nào trong đó. Câu hỏi này cho biết thêm thẻ Meta Viewport chính xác là một điều kiện rất cần phải có trong SEO cùng Responsive web design (thiết kế website đáp ứng).

Cấu trúc cơ bạn dạng của một thẻ Meta Viewport là gì

Ví dụ về một thẻ meta viewport gồm trong tài liệu HTML.

… … …Đầu tiên là phần đầu của một thẻ meta, bao hàm value hay quý giá ở đấy chính là viewport. Còn phần máy hai là nội dung bên phía trong thẻ, nằm bên phía trong , hầu hết giá trị bên phía trong content rất có thể là một hoặc nhiều trong những tùy chọn sau đây.

width. Đặt chiều rộng cho khung chú ý (viewport) nó hoàn toàn có thể là một giá bán trị tuyệt đối (pixel, cm, pt,…) hoặc một giá bán trị kha khá (hay đáp ứng) như “device-width” (chiều rộng thiết bị).initial-scale. Đặt giá trị phóng đại form nhìn đầu tiên của tín đồ dùng, thường là “1”. Chúng ta có thể thay biến đổi một giá trị khác (không khuyến khích gắng đổi).minimum-scale. Đặt mức thu phóng về tối thiểu (tức là fan dùng hoàn toàn có thể phóng nhỏ bao nhiêu). Điều này hay không được sử dụng vì nó mang mất quyền kiểm soát của tín đồ dùng.

Xem thêm: Sửa Nút Nguồn Bị Liệt Bao Nhiều Tiền, Sửa Nút Nguồn Samsung Bao Nhiêu Tiền

maximum-scale. Trái lại với thu phóng về tối thiểu.height. Đặt độ cao của khung nhìn (không được khuyến khích áp dụng bởi nhiều lý do, một trong những đó là trình coi sóc thường không cung ứng giá trị này.user-scalable. Nếu thiết lập thì trình trông nom sẽ phòng cản người dùng thu phóng (thực sự ko khuyến khích sử dụng).

Trên 6 tùy lựa chọn trên, các bạn chỉ cần xem xét 2 tùy chọn thứ nhất là: width (chiều rộng khung nhìn) với initial-scale (giá trị thu phóng ban khung quan sát đầu tiên). Vị vậy một cấu trúc tương xứng nhất hiện giờ chính xác là như lấy ví dụ như ban đầu:

Cách kiểm sự hiện hữu của thẻ viewport bên trên trang

Có vô số cách để bạn có thể kiểm tra thẻ meta viewport trên trang. Dưới đấy là 2 biện pháp thông dụng duy nhất mà bạn thích giới thiệu đến các bạn.

Thủ công

Với Window chúng ta nhấn tổ hợp phím “Ctrl + U” hoặc “Command + Option + U” bên trên MacOS tại bất kỳ trang nào bạn có nhu cầu kiểm tra.

Thường thì thẻ meta viewport sẽ mở ra cùng mặt hàng với rất nhiều thẻ meta khác như: Meta title xuất xắc meta description,…Phổ biến hơn là nằm ở trong loại đầu tiên, chỉ bên dưới thẻ meta charset.

Những có thể vì vài vì sao mà bối cảnh (theme) sẽ auto thêm thẻ meta viewport của chính nó và xóa đi thẻ viewport khoác định của CMS (wordpress, blogspot,…) chúng ta cũng có thể nhấn tổ hợp phím “Ctrl + F” hoặc “Command + F” rồi nhập từ bỏ khóa “viewport” vào. Ví như trang đó gồm thẻ viewport, trình lưu ý sẽ lưu lại nó. Giống như ảnh dưới đây.

*
Thẻ viewport được trình duyệt ghi lại khi search kiếm

Tổng thể

Trong Google tìm kiếm console bạn tìm tới mục “tính khả dụng trên thứ di động” tại thực đơn chính. Google sẽ hỗ trợ một bảng báo cáo và đồ vật thị tương quan đến tính khả dụng của website với thiết bị di động.

*
Kiểm tra tính khả dung trên thiết bị di động tại Search

Những Lỗi thường gặp với thẻ Viewport trong search console

Những lỗi thường chạm chán với thẻ meta viewport thường bắt gặp nhất là trên Google search console. Dưới đấy là một trong các chúng.

Chưa đặt hành lang cửa số xem (Viewport not set)

*
Lỗi không đặt của sổ coi (viewport not set) trên search console

Như tên gọi. Sự rứa này đến từ những việc trang không tồn tại thẻ meta viewport, đơn giản và dễ dàng là thêm thẻ này vào với double check (thủ công và tổng thể) lại là xong

Cửa sổ xem không được đặt theo “chiều rộng thiết bị” (Viewport not set lớn “device-width”)

*
Lỗi hành lang cửa số xem ko được đặt theo “chiều rộng lớn thiết bị”

Lỗi này xuất phát từ giá trị phía bên trong thẻ viewport của bạn. Ví dụ là quý giá width (chiều rộng) được để thành một giá bán trị tuyệt đối hoàn hảo thay vày một quý giá đáp ứng.

Đây là lấy ví dụ như về đoạn mã chứa giá trị gây ra “sự cố” này.

nạm đoạn mã đó bằng một đoạn mã phù hợp, chẳng hạn như. . Đơn giản chỉ là cố giá trị 1000px bằng device-width để thông báo cho trình chăm nom biết tự đáp ứng khung quan sát theo chiều rộng của thiết bị.

bonus

Thông thường nhì lỗi trên có thể là lý do chính bắt mối cung cấp đến nhiều lỗi khác tương quan đến “website không thân thiện với sản phẩm di động” trong tìm kiếm console như “Chữ quá nhỏ dại để đọc” cùng “Các phần từ có thể nhấp quá ngay sát nhau”.

*

Lời kết

Trên phía trên là toàn thể nội dung cụ thể giải nghĩa về thẻ meta viewport là gì cùng tầm quan trọng của thẻ metaview port trong thi công website thỏa mãn nhu cầu và SEO.

Xem thêm: So Sánh Ti Thể Và Lục Lạp Và Ti Thể Câu Hỏi 103291, Sự Khác Biệt Giữa Ti Thể Và Lục Lạp

Mong rằng bài viết này đáp án được thắc mắc của những bạn. Nếu khách hàng còn ngẫu nhiên câu hỏi nào đề xuất giải đáp, đừng rụt rè đặt câu hỏi tại mục phản hồi bên dưới.Cảm ơn các bạn đã đọc bài viết.