Hướng dẫn thêm thẻ H1 vào logo website Wordpress
Thẻ H1 rất quan trọng trong việc tối ưu hóa SEO cho website của bạn. Thêm thẻ H1 vào logo trên trang chủ không chỉ giúp cải thiện thứ hạng trên công cụ tìm kiếm mà còn mang lại trải nghiệm người dùng tốt hơn. Trong bài viết này, iNET sẽ hướng dẫn các bạn từng bước để thực hiện điều này trên WordPress.
1. Hướng dẫn thêm thẻ H1 vào logo website Wordpress
Bước 1: Đăng Nhập Và Truy Cập Trình Chỉnh Sửa Chủ Đề
- Đăng nhập vào WordPress: Truy cập bảng điều khiển quản trị (thường là yourdomain.com/wp-admin).
- Đi tới Appearance: Từ menu bên trái, nhấp vào Appearance (Giao diện).
- Mở Theme File Editor: Chọn Theme File Editor (Trình chỉnh sửa tệp giao diện).
Lưu ý: Đảm bảo bạn đang chỉnh sửa chủ đề đang hoạt động (active theme). Tên chủ đề hiện tại sẽ hiển thị ở góc trên cùng bên phải.
Bước 2: Tìm Tệp Header.php
- Xác định danh sách tệp: Bên phải màn hình, bạn sẽ thấy danh sách các tệp của chủ đề.
- Chọn header.php: Cuộn xuống và nhấp vào tệp header.php. Đây là tệp chứa mã cho phần đầu của website, bao gồm logo.
Bước 3: Tìm Mã Hiển Thị Logo
- Kiểm tra mã nguồn: Trong tệp header.php, tìm đoạn mã hiển thị logo. Nó thường nằm gần đầu tệp và có thể trông giống như sau:
<a href="<?php echo esc_url(home_url('/')); ?>" rel="home">
<img src="<?php echo get_theme_mod('custom_logo'); ?>" alt="<?php bloginfo('name'); ?>">
</a>Nếu chủ đề của bạn sử dụng logo tùy chỉnh qua Customizer, mã có thể là:
<?php the_custom_logo(); ?>- Xác nhận vị trí: Đảm bảo đây là phần liên quan đến logo bằng cách kiểm tra thẻ <img> hoặc hàm liên quan đến logo.
Bước 4: Thêm Thẻ H1 Vào Logo
- Chỉnh sửa mã: Thêm thẻ <h1> bao quanh phần mã logo để tối ưu SEO. Ví dụ:
Trước khi chỉnh sửa:
<a href="<?php echo esc_url(home_url('/')); ?>" rel="home">
<img src="<?php echo get_theme_mod('custom_logo'); ?>" alt="<?php bloginfo('name'); ?>">
</a>Sau khi chỉnh sửa:
<h1>
<a href="<?php echo esc_url(home_url('/')); ?>" rel="home">
<img src="<?php echo get_theme_mod('custom_logo'); ?>" alt="<?php bloginfo('name'); ?>">
</a>
</h1>- Trường hợp dùng the_custom_logo(): Nếu chủ đề của bạn sử dụng hàm này, bạn cần tìm hàm trong header.php và bọc nó bằng thẻ <h1>:
<h1>
<?php the_custom_logo(); ?>
</h1>Bước 5: Lưu Và Kiểm Tra
- Lưu thay đổi: Nhấp vào nút Update File (Cập nhật tệp) ở dưới cùng để lưu các thay đổi.
- Kiểm tra website: Mở trang chủ của bạn trong trình duyệt và kiểm tra xem logo có hiển thị đúng không.
- Xem mã nguồn: Nhấp chuột phải trên trang, chọn View Page Source (Xem nguồn trang), tìm <h1> để xác nhận thẻ đã được thêm thành công.
Lưu Ý Quan Trọng:
- Sao lưu trước khi chỉnh sửa: Trước khi thay đổi bất kỳ tệp nào, hãy sao lưu website để tránh lỗi không mong muốn.
- Chỉ dùng một thẻ H1 trên trang chủ: Thẻ H1 nên dành cho logo trên trang chủ. Trên các trang khác (như bài viết hoặc trang tĩnh), hãy dùng H1 cho tiêu đề chính của nội dung.
- Kiểm tra giao diện: Một số chủ đề có thể cần CSS bổ sung để logo không bị lệch sau khi thêm thẻ H1. Nếu cần, thêm CSS vào Appearance > Customize > Additional CSS:
h1 {
margin: 0;
padding: 0;
display: inline-block;
}