iFrame là thành phần hay thẻ tag của một HTML element giúp nhúng HTML, hình ảnh, video hay trang web khác vào website của mình. iFrame là viết tắt của cụm từ Inline Frame và tạm dịch là khung nội tuyến. Ngoài khái niệm về iFrame, về phương diện người sử dụng thì các lợi ích khi sử dụng iFrame là gì? Cùng tìm hiểu nhé!
iFrame là gì?
iFrame là một công cụ đưa hình ảnh/video/trang web vào bài viết/website của bạn.
Với iFrame, bạn có thể tăng sự thu hút cho website. Đồng thời tối ưu hóa SEO và tăng tỷ lệ truy cập, time-on-site trên web. Có thể xem iFrame là một phần của nội dung web chứ không phải là một phần của thiết kế giao diện website.
Ví dụ, website bạn đăng tải một bài viết hướng dẫn sử dụng cho khách hàng, nhưng để miêu tả một cách cặn kẽ và chi tiết, bạn thêm một video có liên quan từ Youtube để mô tả rõ hơn cho người đọc. Trong trường hợp này, bạn có thể thêm iFrame vào ngay bên trong bài viết của mình.
Ưu nhược điểm của iFrame
iFrame là một thẻ HTML dùng để hiển thị nội dung từ Website khác trên Web WordPress bạn sở hữu. Để dễ hiểu hơn, tôi thường hình dung nó như một cửa sổ cho phép khách truy cập tương tác với nội dung từ một Website khác mà không cần rời khỏi trang Web duyệt. Điều này có thể giúp hạn chế ảnh hưởng đến tốc độ tải Server và Website của bạn.
Tôi sẽ đưa ra một ví dụ cụ thể để bạn dễ hiểu hơn nhé. Bạn gắn Video trên Website của mình. Khách truy cập có thể xem trực tiếp Video đó từ máy chủ Youtube tại vị trí bạn gắn trên Web mà không cần tải thêm Video trên máy chủ của bạn.
iFrame còn nhiều ưu điểm khác mà tôi muốn giới thiệu với bạn ngay sau đây:
Nó có thể hiển thị nhiều quảng cáo, cho phép bạn nhúng nội dung trực quan một cách tự do.
Bạn có thể hiển thị nội dung từ nguồn bên ngoài ở mọi vị trí trên Website một cách thuận tiện.
Một ưu điểm khác tôi đánh giá rất cao, đó là iFrame rất an toàn. Lý do vì người xem không có quyền truy cập vào mã của nội dung gốc.
Tuy nhiên, mọi vấn đề đều có hai mặt. Bên cạnh những ưu điểm tuyệt vời, tôi cũng muốn lưu ý với bạn một số hạn chế của Iframe.
Nếu liên kết với các trang độc hại, nó có thể gây ra các mối nguy hiểm về bảo mật. Máy tính của người dùng có thể bị lây nhiễm mã độc và khiến trang bạn mất độ tin cậy.
iFrame có thể làm chậm trang Web, không lý tưởng để tối ưu hóa công cụ tìm kiếm. Đây là một điểm hạn chế khiến tôi rất cẩn trọng khi dùng thẻ HTML này. Tôi khuyên bạn chỉ nên sử dụng nó khi thật sự cần thiết.
Ngoài ra, không phải mọi loại thiết bị đều hỗ trợ Iframe.
Có nên sử dụng iFrame cho trang Web hay không?
Như tôi đã phân tích ở trên, iFrame mang lại rất nhiều lợi ích cho bạn. Nó làm cho trang Web của bạn được minh họa sinh động, sáng tạo hơn. Đây là yếu tố quan trọng giúp bạn giữ chân người truy cập ở lại trang Web lâu hơn, tăng tỷ lệ quay lại trang. Những điều này cũng góp phần giúp bạn tăng thứ hạng trang Web trên trang kết quả của các công cụ tìm kiếm.
Tuy nhiên, bạn cũng cần cân nhắc những vấn đề có thể gặp phải khi sử dụng iFrame. Nếu bạn không thể đảm bảo thông tin của nội dung trích từ trang Web khác là chính xác, hợp pháp. Nguy hiểm hơn nữa, các đoạn mã có thể chứa mã độc. Chúng không chỉ ảnh hưởng xấu đến trang của bạn, mà còn có thể gây nguy hiểm đến người dùng. Thông tin quan trọng có thể bị lấy cắp, Website có thể bị chuyển hướng không kiểm soát,… Tất cả đều có thể ảnh hưởng đến uy tín của bạn.
Khi bạn chèn nội dung của trang khác lên Website của mình, Google Search Bots sẽ không dẫn đến Website của bạn mà liên kết đến Link được nhúng. Điều này ảnh hưởng lớn đến việc SEO của bạn, dẫn khách hàng đi đến trang khác.
Chính vì thế, tôi nghĩ chúng ta chỉ nên sử dụng iFrame khi thật sự cần thiết. Đừng dùng nó quá thường xuyên nhé.
Làm thế nào để sử dụng iFrame?
Đúng như tên gọi, cách sử dụng iFrame chính là dán đường link tài liệu bạn muốn hiển thị trên website ngay trên giao diện làm việc của WordPress. Để thao tác dễ dàng với iFrame, bạn cần hiểu ý nghĩa những cụm từ/thuật ngữ xuất hiện trong những dòng code. Đầu tiên, hãy tham khảo đoạn code dưới đây:
Đoạn code trên sẽ giúp hiển thị video hướng dẫn Youtube trên website bạn. Hãy xem qua các tag có ý nghĩa gì nhé:
… tag được dùng để chứa video bên trong iFrame.
Nguồn của iFrame [src] là phần nội dung gốc từ server bên ngoài [hoặc server nội bộ khác]. Nguồn URL này phải được đặt trong dấu ngoặc kép. [Trong ví dụ này là: “//youtu.be/_Nrd76bcqEw”]
Width và height là chiều rộng và cao của iFrame. Bạn có thể thêm kích thước mặc định như là 680×480 pixels [px] trong ví dụ. Hoặc, bạn có thể sử dụng số phần trăm [10%-100%] để tự chỉnh kích thước iFrame tự động.
Các thuộc tính của iFrame
- Src là thuộc tính khai báo nguồn của iFrame, nguồn iFrame phổ biến mà các website thường sử dụng là Youtube
- Src là thuộc tính khai báo nguồn của iFrame, nguồn iFrame phổ biến mà các website thường sử dụng là Youtube
iFrame có nhiều thuộc tính từ đơn giản nhất như trích xuất nguồn, chiều rộng, chiều cao đến phức tạp hơn như kẻ đường viền iFrame, canh lề trái phải… Tuy nhiên, ở bài viết này, chúng tôi sẽ giới thiệu đến bạn đọc những thuộc tính cơ bản nhất của iFrame:
- src: Thuộc tính khai báo đường dẫn tới 1 trang web hoặc 1 file tài liệu nào đó.
- width: Thuộc tính dùng để khai báo chiều rộng của iFrame [đơn vị là px hoặc %]
- height: Thuộc tính dùng để khai báo chiều cao của iFrame [đơn vị là px hoặc %]
- name: Thuộc tính này dùng để đặt tên cho frame. Nó hay được dùng khi muốn hiển thị 1 liên kết nào đó trong 1 frame có thuộc tính name
- frameborder: Thuộc tính dùng để thiết lập đường viền bao quanh frame. Thuộc tính này sẽ có 2 giá trị: 0 – ẩn đường viền, 1 – hiện đường viền. Nếu không khai báo thuộc tính này thì mặc định là đường viền được hiển thị
Để hiểu hơn về cấu trúc lẫn cách làm việc của iFrame, hãy cùng tham khảo đoạn code ngay dưới đây:
Có thể thấy, đoạn code có những thuộc tính bao gồm khai báo đường dẫn [src], xác định chiều rộng, chiều cao [width, height], đặt tên frame [name] và ẩn thiết lập đường viền [frameborder].
Nên dùng iFrame khi nào?
Thay vì sử dụng iFrame từ nguồn khác, doanh nghiệp có thể sáng tạo video để truyền thông đa phương tiện
Khi không còn sự lựa chọn khác
Để đảm bảo an toàn cho website bạn nên hạn chế dùng iFrame. Bạn muốn hiển thị một đoạn video từ website nào đó? Bạn không chắc chắn về mức độ bảo mật? Bạn có thể lưu video đó về và tải nó lên một nơi lưu trữ online. Từ đó dùng thẻ video để hiển thị nếu bạn sử dụng CMS mã nguồn mở, blogger hay Hosting WordPress. Với các website mã nguồn đóng, bạn nên yêu cầu lập trình viên thêm chức năng đăng video cho mình.
Với các video trên Youtube hay các trang mạng xã hội như Instagram, Twitter, Facebook…, bạn có thể sử dụng trực tiếp cơ chế nhúng sẵn có. Bởi nó sẽ an toàn hơn việc nhúng bằng iFrame rất nhiều. Hãy luôn kiểm tra nguồn của mã iFrame bạn đang sử dụng. Chỉ sử dụng iFrame link từ những website uy tín và chất lượng cao.
Truyền thông đa phương tiện
Để tránh phương hại đến SEO của website, bạn có thể sử dụng một cách nữa là truyền thông đa phương tiện. Hãy cố gắng sáng tạo nội dung phù hợp trên các kênh truyền thông trực tuyến của mình. Nếu thực hiện được việc này, không chỉ nguồn của nhúng iFrame được đảm bảo mà còn tạo được sự thống nhất chặt chẽ trong nội dung truyền thông của doanh nghiệp đấy!
Từ khóa:
- Iframe with HTML content
- Nhúng iframe vào web
- Iframe react-native
- Popup iframe html
- Iframe trong HTML
- Get element in iframe jQuery
Nguồn: //www.emg.com.vn/: