Thêm thẻ H1 vào cấu trúc trang chủ website của bạn đơn giản

Một số trang web hiện nay khi kiểm tra thì không có thẻ H1 ở trang chủ, ngay cả Điện Máy Xanh cũng vậy (toàn thẻ H3), tạm bỏ qua yếu tố về SEO, nhiều người vẫn muốn thẻ H1 có mặt ở cấu trúc trang chủ mặc dù không muốn nó xuất hiện ở giao diện người dùng.

Để giải quyết vấn đề này, mình cũng test qua nhiều cách (ví dụ thêm nó vào nội dung trang chủ, thêm h1 vào file header.php,…), nhưng có một giải pháp mình nghĩ là tối ưu hơn, đó là thêm đoạn code vào file function.php (đây cũng là file mà mình hay dùng để custom cho nhiều tính năng đã hướng dẫn trước đây)

Để thêm thẻ H1 vào trang chủ, các bạn làm các bước như sau:

Bước 1: vào Admin và click vào Theme File Editor

Bước 2: chọn child Theme mà bạn đang sử dụng

Bước 3: tại file function.php các bạn thêm dòng code sau đây vào cuối và bấm lưu lại

//thêm h1 cho hompage
function add_h1_to_homepage() {
    if (is_front_page()) {
        echo '<h1 class="homepage-title">' . get_bloginfo('name') . '</h1>';
    }
}
add_action('wp_head', 'add_h1_to_homepage');

Lúc này H1 sẽ xuất hiện trên header của website, nếu bạn không muốn nó xuất hiện trước giao diện người dùng, bạn chỉ việc thêm CSS ẩn nó đi là xong

Như đoạn code trên mình có đặt cho nó class=”homepage-title”, do đó để ẩn nó trên giao diện người dùng, bạn thêm đoạn CSS sau:

/*an h1 tren homepage*/
h1.homepage-title {
    display: none;
}

Hoặc bạn có thể thêm trực tiếp 1 tiêu đề h1 vào nội dung đầu tiên của trang chủ (trong body trang chủ không phải header), như ở Theme Flatsome bạn có thể thêm 1 row -> col -> text với h1, sau đó bạn đặt tên class cho row đó và tiến hành css với cú pháp display:none là được.

Ví dụ với theme Flatsome, mình tạo 1 row ngay đầu tiên với tên class=”h1home”, sau đó tại row này mình thêm 1 col và 1 text với nội dung là thẻ h1, tiếp đến tại custom css mình thêm dòng css sau đây:

.h1home {
    display: none;
}

Như vậy là xong, như mình đã nói: có rất nhiều cách khác nhau, nên nếu bạn rành về code hay web thì có thể tùy chọn cách nào hay và đơn giản mà thực hiện, còn nếu bạn thích cách làm trên thì có thể làm theo hướng dẫn.

Vừa rồi có một bạn, cũng thêm H1 cho trang chủ nhưng lại thêm nhầm code vào < body > dẫn đến việc thẻ H1 này xuất hiện trên hàng trăm Url khác, không chỉ gây nên lỗi duplicate H1 mà còn bị lỗi multiple H1 (vì khi vào Url bài viết hay sản phẩm, ngoài thẻ H1 của tiêu đề bài viết hay sản phẩm đó, còn có thêm thẻ H1 đã thêm ở < body >, vì vậy các bạn nên lưu ý điều này.

Nếu bạn yêu thích bài viết này, hãy chia sẻ nó và theo dõi mình để đón đọc thêm nhiều bài chia sẻ khác trong thời gian tới. Cảm ơn bạn