Cách tối ưu hóa video nền tự động phát trong WordPress – Yoast SEO Video
Video nền tự động phát là một tính năng phổ biến trên trang chủ của nhiều trang web, từ các thương hiệu Thương mại điện tử lớn đến các công ty dịch vụ và phần mềm B2B. Bạn có thể sử dụng sự quan tâm trực quan bổ sung để thu hút sự chú ý của khách truy cập mới và thể hiện cá tính thương hiệu của bạn. Với WordPress, việc thiết lập nền video rất đơn giản. Trong bài đăng này, tôi sẽ đi sâu vào cách thiết lập tính năng này và những điều cần cân nhắc khi bạn chọn sử dụng nền video tự động phát trên trang web của mình.
Thật tốt khi đề cập rằng thật dễ dàng để vô tình thực hiện nó theo cách cản trở hiệu suất trang web và nỗ lực SEO. Theo nguyên tắc chung, những video lớn chiếm toàn bộ màn hình có thể tác động tiêu cực đến trải nghiệm người dùng. Tốt hơn hết bạn nên tách video nền ra một phần nhất định của màn hình. Ngoài ra, hãy đảm bảo không có bản nhạc tự động tải ở chế độ nền, vì không có gì khó chịu hơn việc tải một trang và ngay lập tức phát ra âm thanh không mong muốn.
Nhưng giả sử bạn đã đánh giá các rủi ro tiềm ẩn và theo dõi tỷ lệ thoát cũng như tỷ lệ thoát trước và sau khi triển khai thì công cụ sáng tạo thú vị này rất đáng để thử nghiệm. Trong bài đăng này, chúng ta sẽ điểm qua các yếu tố chính cần xem xét khi đặt video nền tự động phát. Sau đó, chúng ta sẽ tìm hiểu cách tối ưu hóa tính năng này cho người dùng cũng như công cụ tìm kiếm.
Bước 1: Chọn phương pháp phù hợp để đưa video lên trang chủ của bạn
Tùy chọn A: Mã nhúng từ nền tảng lưu trữ video
Bạn có sự linh hoạt nhất với tùy chọn này, nhưng nó cũng đòi hỏi một lượng nhỏ kiến thức kỹ thuật. Chỉ cần nhập mã nhúng HTML thô vào khối Gutenberg ‘nhúng’ hoặc nguồn của trang nếu bạn đang chỉnh sửa trực tiếp. Sử dụng CSS để đảm bảo video phù hợp với thiết kế bạn mong muốn.
Tùy chọn này lý tưởng nếu bạn cảm thấy thoải mái với một số công việc phát triển nhẹ và muốn sử dụng nền tảng lưu trữ như Wistia hoặc Vimeo. Bằng cách này, bạn có thể tối ưu hóa phong cách và giao diện video trực tiếp trong nền tảng lưu trữ. Sau đó, bạn có thể đưa nó lên trang web của mình thông qua mã nhúng.
Tùy chọn B: Khối ‘Cover’ thông qua trình soạn thảo Gutenberg
Tùy chọn này cho đến nay là cách đơn giản nhất để thêm video nền vào WordPress. Tuy nhiên, phương pháp này có thể tạo ra các vấn đề về hiệu suất vì nó yêu cầu bạn phải tự lưu trữ video trên trang web của mình. Cuối cùng, bạn tải tệp video có kích thước đầy đủ trên mỗi lần tải trang. Điều này có thể khiến mọi thứ chậm lại đáng kể và cản trở trải nghiệm người dùng.
Để sử dụng phương pháp này, chỉ cần chọn khối “Cover” trong trình chỉnh sửa Gutenberg, sau đó tải video bạn muốn sử dụng lên.
Từ đây, bạn có thể thêm lớp phủ văn bản vào video nếu muốn.
Tùy chọn C: Sử dụng Elementor với YouTube
Nếu bạn đang sử dụng trình tạo trang Elementor trên trang web WordPress của mình thì ở đây có một tính năng tích hợp cho phép bạn thêm nền video. Đoạn video ngắn này là minh chứng tuyệt vời về cách bạn có thể thực hiện điều này. Nó khá đơn giản. Chỉ cần chọn một mẫu có chiều rộng đầy đủ trong Elementor, thêm phần tử video nền vào và bạn đã sẵn sàng!
Với Elementor, bạn có thể tải lên video của riêng mình và tự lưu trữ video đó trên trang web. Sau đó, video sẽ được phát bằng thẻ video HTML5. Một tùy chọn khác là bao gồm liên kết YouTube. Nếu bạn đang đi theo con đường này, tôi thực sự khuyên bạn nên sử dụng tùy chọn YouTube. Điều này giúp tránh các vấn đề về hiệu suất có thể xảy ra khi phân phát video từ máy chủ web của chính bạn.
Từ đây, bạn có thể chọn phần video mà bạn muốn lặp trong nền bằng cách chỉ định điểm bắt đầu và điểm cuối cho vòng lặp.
Tùy chọn D: Sử dụng plugin chuyên dụng
Có một số plugin miễn phí có sẵn, chẳng hạn như Advanced WordPress Backgrounds, bao gồm chức năng cho video nền tự động phát. Hình nền WordPress nâng cao cho phép bạn thêm video từ URL Vimeo hoặc YouTube, cũng như tự lưu trữ. Tôi muốn giới thiệu tùy chọn trước đây vì lý do tương tự như với phương pháp Elementor.
Cuối cùng, có những ưu và nhược điểm đối với từng phương pháp. Nếu bạn có kỹ năng kỹ thuật, tôi khuyên bạn nên làm việc trực tiếp với mã và bao gồm cả phần nhúng, sau đó điều chỉnh CSS cho phù hợp. Nhưng nếu điều đó vượt quá khả năng kỹ năng của bạn một chút, hãy chọn tùy chọn plugin hoặc Elementor.
Bước 2: Tải video nền không đồng bộ trong WordPress
Một vấn đề lớn mà video nền tự động phát có thể gây ra là tốc độ tải chậm.
Nếu người dùng sử dụng kết nối có băng thông hạn chế, phần còn lại của trang có thể tải, trong khi nền video có thể không xuất hiện cho đến rất lâu sau đó. Hoặc tệ hơn, với việc triển khai kém, video tải chậm có thể chặn hiển thị các thành phần trang quan trọng khác. Trong cả hai trường hợp, điều này không chỉ cản trở trải nghiệm người dùng mà còn có thể ảnh hưởng tiêu cực đến thứ hạng tìm kiếm – đặc biệt là khi Google ưu tiên các trang web nhanh và mượt mà.
Để tránh cả hai trường hợp này, hãy đảm bảo bạn đặt video của mình tải bằng JavaScript không đồng bộ để các thành phần trang khác và video tải đồng thời. Ngoài ra, hãy đảm bảo bạn đang lưu trữ video của mình trên nền tảng hỗ trợ tính năng phát trực tuyến thích ứng như YouTube, Vimeo hoặc Wistia. Truyền phát thích ứng có nghĩa là máy chủ video tự động giảm tốc độ bit của video để đáp ứng băng thông của người dùng.
Mặc dù điều này nghe có vẻ hơi khó khăn từ quan điểm kỹ thuật nhưng thực sự không nhất thiết phải như vậy! Bởi vì plugin Yoast Video SEO sẽ làm tất cả cho bạn, đảm bảo mọi thứ tải nhanh chóng và liền mạch. Nếu bạn chưa thiết lập điều đó cho trang web của mình, hãy thực hiện hành động tiếp theo ngay lập tức!
Bước 3: Chọn vòng lặp của bạn và giữ nó ngắn
Video nền tự động phát cần lặp lại theo vòng lặp. Vì vậy, việc lựa chọn trình tự thích hợp là rất quan trọng để mang lại trải nghiệm hấp dẫn. Cách thực hiện điều này phụ thuộc rất lớn vào cách quay video của bạn. Nếu video có nhiều đoạn cắt và thay đổi cảnh thì một vài giây quay của mỗi cảnh có thể rất hiệu quả. Nó cung cấp gần như một “bản xem trước” của video được mong đợi. Tránh những đoạn cắt quá nhanh và nhiều chuyển động – video phải hỗ trợ thông tin trên trang chủ nhưng không làm sao lãng thông tin đó.
Tuy nhiên, sẽ hơi khác một chút đối với những video mang lại cảm giác quay một cảnh hoặc hoạt hình nhiều hơn. Thay vào đó, bạn cần tìm một trình tự có phần đầu và phần cuối của vòng lặp trông rất giống nhau. Điều này nhằm giúp chúng hòa hợp với nhau một cách dễ dàng.
Điều quan trọng là phải suy nghĩ về cách bạn muốn vòng lặp hoạt động khi thực hiện chỉnh sửa. Tốt nhất bạn nên chỉnh sửa một video cụ thể cho mục đích này. Tuy nhiên, nếu bạn gặp khó khăn khi sử dụng một số nội dung có sẵn và không thể chỉnh sửa lại, hãy thử tìm điểm bắt đầu và điểm kết thúc trong nội dung hiện có sao cho hài hòa với nhau. Sau đó, sử dụng nền tảng lưu trữ hoặc các công cụ trong WordPress của bạn (ví dụ: với cách tiếp cận Gutenberg) để quy định điểm bắt đầu và điểm kết thúc.
Video nền tự động phát thường dài khoảng 10-30 giây. Bạn muốn có đủ chuyển động và thay đổi để cung cấp một số diễn biến tường thuật và trực quan trong suốt vòng lặp. Nhưng bạn không muốn video quá dài và phức tạp đến mức làm xao lãng phần còn lại của trang.
Bước 4: Quyết định xem nền video của bạn có nên nhấp để phát hay không và xóa các thành phần trình phát bổ sung
Về cơ bản có hai loại video nền tự động phát. Chúng hoạt động như một đoạn giới thiệu cho toàn bộ video hoặc chúng tồn tại hoàn toàn dưới dạng nội dung hình ảnh độc lập. Trong trường hợp đầu tiên, bạn muốn video của mình có thêm chức năng. Bạn muốn có nút phát đưa người dùng vào trải nghiệm video toàn màn hình, thường thông qua lớp phủ/hộp đèn. Trong trường hợp thứ hai, bạn muốn xóa tất cả các thành phần trình phát để video xuất hiện hoàn toàn dưới dạng hình ảnh chuyển động chứ không phải video có các điều khiển hiển thị.
Khi bạn muốn video của mình hoạt động như một hình thu nhỏ chuyển động để có trải nghiệm lớn hơn, điều này đòi hỏi bạn phải thực hiện thêm một chút công việc. Các phần nhúng của Wistia cung cấp tính năng này một cách tự nhiên và một ví dụ tuyệt vời về điều này là trên trang chủ SparkToro.
Nếu bạn đang sử dụng một nền tảng khác thì về cơ bản, bạn sẽ cần thêm lớp phủ nút phát vào video tự động phát, lớp phủ này sẽ tải video phụ lên trên cùng khi được nhấp vào.
Bạn có thể xóa các điều khiển trình phát bằng hầu hết các nền tảng lưu trữ trả phí – chẳng hạn như Vimeo và Wistia. Tuy nhiên, nếu bạn đang sử dụng tính năng nhúng YouTube tiêu chuẩn và muốn xóa các điều khiển trình phát, việc này sẽ cần được xử lý thông qua trình phát phụ. Điều này là do trình phát YouTube không cho phép bạn xóa các phần tử. Các tùy chọn C và D như được nêu chi tiết ở bước 1 sẽ cung cấp giải pháp cho vấn đề này.
Bước 5: Đảm bảo nền video có tỷ lệ chính xác trên thiết bị di động
Một lỗi phổ biến khác với video nền tự động phát trong WordPress là không đảm bảo chức năng di động tốt. Video màn hình rộng 16×9 khá nhỏ khi xem qua khung dọc tiêu chuẩn trên thiết bị di động. Do đó, cách trình bày tổng thể của trang cần phải khá khác biệt.
Video có thể điều chỉnh một cách linh hoạt để chỉ có kích thước nhỏ, với các thành phần còn lại của trang được sắp xếp lại và di chuyển theo nó. Hoặc video có thể được ẩn ở kích thước màn hình nhỏ hơn. Nói chung, tôi thích thu nhỏ video cho phần còn lại của trang và sử dụng CSS để đảm bảo văn bản và menu cốt lõi hiển thị cùng với video ngay cả ở kích thước nhỏ hơn đó.
Sai lầm cốt lõi cần tránh là chỉ nhúng một video khổng lồ bị cắt bớt hoặc chiếm toàn bộ trang trong màn hình đầu tiên trong chế độ xem trên thiết bị di động. Một lần nữa, plugin Yoast Video SEO là bạn của bạn ở đây! Nó tự động đảm bảo video đáp ứng cho tất cả các nền tảng lưu trữ video chính.
Bước 6: Bao gồm siêu dữ liệu thích hợp cho SEO
Bước tối ưu hóa cuối cùng là đảm bảo bạn bao gồm tất cả siêu dữ liệu Schema.org cần thiết cho tìm kiếm của Google – cụ thể là tiêu đề, hình thu nhỏ và thời lượng video. Lưu ý rằng là video tự động phát, bản thân hình thu nhỏ sẽ không bao giờ xuất hiện với người dùng. Tuy nhiên, tệp hình ảnh cần được tham chiếu trong dữ liệu Schema.org thông qua vi dữ liệu hoặc JSON-LD. Điều này đảm bảo rằng video có thể được hiển thị dưới dạng đoạn mã chi tiết video trong tìm kiếm của Google.
Có vẻ phức tạp? Đừng lo lắng, plugin Yoast Video SEO sẽ tự động hóa tất cả cho bạn! Để biết chi tiết hơn về dữ liệu cần thiết cho SEO, hãy xem bài đăng này về cách tối ưu hóa các trang video của bạn.
Bài viết gần đây
Sản phẩm nổi bật
- Microthemer v7.3.2.3 – WordPress Visual CSS Editor 99.000 ₫
- Axtra v2.6 – Digital Agency Creative Portfolio Theme 120.000 ₫
- StreamVid v6.0.6 – Streaming Video WordPress Theme 99.000 ₫
- Streamit WP v3.4.8 – Video Streaming WordPress Theme + RTL 99.000 ₫
- QSM Advanced Assessment v1.2.3 99.000 ₫
- FluentCommunity Pro v1.1.0 99.000 ₫
- Organio v1.5.9 – Organic Food Store WordPress 99.000 ₫
- HiStudy v2.8.2 – Education WordPress Theme 120.000 ₫