Trang này thảo luận về cách bạn có thể tuỳ chỉnh giao diện của hộp tìm kiếm và kết quả tìm kiếm. Nếu bạn muốn triển khai thiết kế của công cụ tìm kiếm bằng tệp ngữ cảnh, hãy xem trang "Thiết kế giao diện bằng XML".
- Tổng quan
- Thiết kế từng thành phần của giao diện người dùng Tìm kiếm
- Lưu trữ kết quả bằng phần tử Tìm kiếm
- Thiết lập bố cục phần tử tìm kiếm
- Thiết kế hộp tìm kiếm
- Thiết kế kết quả
- Triển khai thiết kế trong trang web
Tổng quan
Bạn có thể thay đổi cả hộp tìm kiếm và kết quả tìm kiếm của Công cụ tìm kiếm có thể lập trình trong bảng điều khiển hoặc tệp ngữ cảnh XML. Nếu bạn có một số ít công cụ tìm kiếm, thì việc quản lý và tuỳ chỉnh chúng bằng bảng điều khiển khá đơn giản. Bạn chỉ cần chuyển đến trang Giao diện, chọn một kiểu, thiết kế các thành phần, nhấp vào Lưu là xong. Trang này hướng dẫn bạn cách thực hiện tất cả những việc đó. Tuy nhiên, nếu bạn đang tạo và quản lý một số lượng lớn công cụ tìm kiếm, thì ngay cả quy trình đơn giản đó (khi được lặp lại trên nhiều công cụ tìm kiếm) cũng trở nên tẻ nhạt. Trong những trường hợp như vậy, bạn nên làm việc với XML. Nếu bạn quyết định sử dụng XML, trước tiên hãy đọc trang này để nắm được cách hoạt động chung của mọi thứ; sau đó, hãy đọc trang Thiết kế giao diện bằng XML để tìm hiểu về các phần tử và thuộc tính XML.
Nếu bạn không chắc liệu mình chỉ nên dùng bảng điều khiển hay dùng định dạng XML, hãy xem trang Kiến thức cơ bản. Trang này thảo luận về lợi ích và thách thức của từng định dạng.
Lưu ý: Trước khi bắt đầu thiết kế giao diện cho công cụ tìm kiếm tuỳ chỉnh, hãy đọc Nguyên tắc triển khai Công cụ tìm kiếm có thể lập trình . Đây là một tài liệu ngắn cho biết cách bạn nên xử lý việc sử dụng thương hiệu và thông tin ghi nhận quyền tác giả của Google.
Lưu trữ kết quả bằng Phần tử tìm kiếm
Phần tử Tìm kiếm là một đối tượng mà bạn có thể nhúng vào trang web của mình, cho phép tuỳ chỉnh trên diện rộng. Bạn có thể hiển thị hộp tìm kiếm và kết quả tìm kiếm, cùng nhau trong cùng một trang web mà người đọc đang xem hoặc trong các trang web khác nhau.
Lưu ý: Phần tử Tìm kiếm hoạt động tốt trên thiết bị di động khi được ghép nối với bố cục thu gọn.
Bạn cũng có thể tận dụng Programmable Search Element Control API để tuỳ chỉnh thêm giao diện người dùng tìm kiếm. Nhiều chế độ tuỳ chỉnh được hỗ trợ thông qua các thuộc tính HTML. Ví dụ: bạn có thể chọn trong số 6 bố cục cho trang kết quả hoặc bạn có thể đặt số lượng kết quả tìm kiếm sẽ trả về.
Công cụ tìm kiếm có thể lập trình không còn hỗ trợ lựa chọn lưu trữ iframe nữa. Bạn nên sử dụng bố cục "Hai trang" hoặc "Chỉ kết quả" trong phần tử Tìm kiếm làm các lựa chọn mới. Hãy xem bài đăng trên blog của chúng tôi để biết thêm thông tin.
Thiết kế từng thành phần của giao diện người dùng tìm kiếm
Thành phần có thể tuỳ chỉnh
Các thành phần mà bạn có thể tuỳ chỉnh phụ thuộc vào Bố cục phần tử đã chọn của công cụ tìm kiếm. Ví dụ: bảng điều khiển chỉ cho phép bạn thêm biểu trưng cho những công cụ tìm kiếm do Google lưu trữ; bạn không thể thêm biểu trưng vào những công cụ tìm kiếm sử dụng các lựa chọn lưu trữ khác.
Bạn có thể xác định các thành phần sau bằng bảng điều khiển:
- Bố cục phần tử Tìm kiếm
- Hộp tìm kiếm
- Kết quả tìm kiếm
- Các thẻ tinh chỉnh
- Chương trình khuyến mãi
- Biểu trưng (chỉ do Google lưu trữ)
Thiết lập bố cục phần tử tìm kiếm
Bạn có thể tuỳ chỉnh cách bố trí giao diện người dùng tìm kiếm trên trang web. Bạn có thể đặt hộp tìm kiếm và phần kết quả trong cùng một cột hoặc hiển thị chúng trong các cột riêng biệt, với hộp tìm kiếm trong một cột và phần kết quả trong một cột khác hoặc thậm chí trong một trang khác.
Các lựa chọn về bố cục là (hãy nhấp vào đường liên kết để xem bản minh hoạ):
| Phương thức | Mô tả |
|---|---|
| OverLay | Hiện kết quả tìm kiếm trong một lớp phủ. |
|
Hai trang
Đơn giản Nhiều hộp tìm kiếm/phần kết quả |
Hộp tìm kiếm và phần kết quả tìm kiếm nằm ở hai trang web khác nhau.
Lưu ý: Phần kết quả tìm kiếm cũng có một hộp tìm kiếm. Người dùng có thể gửi trực tiếp các cụm từ tìm kiếm trong trang kết quả tìm kiếm. |
| Độ rộng đầy đủ | Hộp tìm kiếm và phần kết quả tìm kiếm chiếm toàn bộ chiều rộng của trang hoặc cột mà bạn đã chèn phần tử Tìm kiếm. |
| Hai cột | Hộp tìm kiếm và phần kết quả tìm kiếm nằm ở các cột hoặc phần khác nhau trên trang web của bạn. Để đóng phần kết quả tìm kiếm, người dùng nhấp vào biểu tượng X bên cạnh hộp tìm kiếm. |
| Nhỏ gọn |
Giống như lựa chọn chiều rộng đầy đủ, lựa chọn này chiếm toàn bộ chiều rộng của trang hoặc cột, nhưng phần kết quả hiển thị ít kết quả hơn, vì vậy, lựa chọn này chiếm ít không gian dọc hơn khi được mở rộng trong trang web.
Lưu ý: Lựa chọn này được tối ưu hoá cho điện thoại thông minh và thiết bị di động. |
|
Chỉ kết quả
Tìm kiếm qua URL Tìm kiếm qua hộp tìm kiếm |
Kết quả tìm kiếm được đặt ở một trong các trang trên trang web của bạn và trang kết quả tìm kiếm không chứa hộp tìm kiếm. Sử dụng hộp tìm kiếm riêng để gửi cụm từ tìm kiếm.
Lưu ý: Công cụ tìm kiếm có thể lập trình không hiển thị quảng cáo sẽ không có lựa chọn tắt tính năng gắn thương hiệu. Bản minh hoạ: Cách tuỳ chỉnh các lựa chọn xây dựng thương hiệu |
|
Do Google lưu trữ
Cửa sổ hiện tại Cửa sổ mới |
Hộp tìm kiếm được đặt trên một trong các trang web của bạn. Kết quả tìm kiếm sẽ xuất hiện trên một trang web do Google lưu trữ. Trang web này có thể mở trong cùng một cửa sổ hoặc trong một cửa sổ mới. |
Thiết kế Hộp tìm kiếm
Bạn có thể chèn hộp tìm kiếm ở bất cứ đâu trong phần nội dung HTML của trang web. Tuy nhiên, theo quy ước, hộp tìm kiếm thường được đặt ở đầu (hoặc gần đầu) trang web, như trong ví dụ sau:
Hình 1: Trang web có hộp tìm kiếm ở trên cùng.
Bật tính năng tự động hoàn thành
Tính năng tự động hoàn thành cung cấp các lựa chọn về cụm từ tìm kiếm cho người dùng khi họ nhập cụm từ tìm kiếm vào hộp tìm kiếm của bạn. Tính năng này tương tự như các cụm từ tìm kiếm không bắt buộc mà bạn thấy trên Google Tìm kiếm.
Hình 2: Chỉ cần nhập một vài ký tự vào hộp tìm kiếm, một danh sách thả xuống sẽ xuất hiện, cung cấp các lựa chọn cho nhiều cụm từ tìm kiếm.
Công cụ tìm kiếm có thể lập trình điều chỉnh tính năng tự động hoàn thành cho phù hợp với công cụ tìm kiếm của bạn. Công cụ này sử dụng một thuật toán khác lấy dữ liệu từ nhiều nguồn, bao gồm cả các cụm từ tìm kiếm trên công cụ tìm kiếm của bạn, cũng như các từ khoá và cụm từ được trích xuất từ nội dung của những trang web mà công cụ tìm kiếm của bạn bao gồm.
Tính năng tự động hoàn thành nằm trong phần Tự động hoàn thành của trang Tính năng tìm kiếm.
Để bật tính năng tự động hoàn thành, hãy làm như sau:
- Chuyển đến phần Tự động hoàn thành trên trang Tính năng của kết quả tìm kiếm.
-
Bật chế độ kiểm soát Bật tính năng tự động hoàn thành.
Lưu ý: Vì các cụm từ tìm kiếm được tự động hoàn thành được tạo cho từng công cụ tìm kiếm, nên phải mất vài giờ thì tính năng tự động hoàn thành mới bắt đầu xuất hiện trong công cụ tìm kiếm của bạn.
- Nếu đang bật tính năng tự động hoàn thành trong một công cụ tìm kiếm hiện có lần đầu tiên, bạn phải xoá đoạn mã cho hộp tìm kiếm mà bạn đã chèn vào trang web của mình. Thay thế bằng mã mới được tạo trong thẻ Nhận mã. Để biết hướng dẫn chi tiết hơn, hãy xem phần Triển khai thiết kế trong trang web của bạn.
Thiết kế kết quả
Bạn có thể thay đổi các thành phần sau đây của trang kết quả:
- Kết quả của từng người
- Loại phông chữ
- Màu văn bản
- Các thẻ tinh chỉnh
- Chương trình khuyến mãi
- Biểu trưng (chỉ do Google lưu trữ)
Kết quả cá nhân
Nếu muốn phân định trực quan từng kết quả hoặc làm nổi bật những kết quả mà người dùng đang chọn, bạn có thể xác định đường viền và nền cho từng kết quả.
Hình 3: Kết quả có các kết quả riêng lẻ được phân định và kết quả riêng lẻ được đánh dấu khi di chuột.
Thẻ tinh lọc
Nếu bạn đã tạo nhãn tinh chỉnh trong công cụ tìm kiếm, thì các nhãn đó sẽ xuất hiện dưới dạng thẻ trong phần tử Tìm kiếm. Bạn có thể sử dụng bảng điều khiển để thay đổi màu sắc của các thẻ tinh chỉnh.
Khuyến mãi
Nếu đã tạo chương trình khuyến mãi trong công cụ tìm kiếm, bạn có thể thay đổi giao diện của chương trình. Khuyến mãi là một loại kết quả tìm kiếm đặc biệt mà bạn tạo.
Biểu trưng (Chỉ do Google lưu trữ)
Nếu cho phép Google lưu trữ trang kết quả của bạn, bạn có thể chọn thêm một biểu trưng hoặc hình ảnh nhỏ ngay bên cạnh hộp tìm kiếm trong trang kết quả tìm kiếm. Hình ảnh phải là tệp .jpg, .png hoặc .gif được lưu trữ trên một trang web (của riêng bạn hoặc từ một trang web không có hạn chế về bản quyền). Bạn có thể liên kết một URL với hình ảnh để biến hình ảnh đó thành một hình ảnh có thể nhấp vào.
Sau đây là ví dụ về trang kết quả có biểu trưng.
Hình 4: Hộp tìm kiếm có hình ảnh
Triển khai thiết kế trong trang web của bạn
Sau khi thiết kế giao diện cho công cụ tìm kiếm, bạn có thể triển khai công cụ đó trong trang web của mình bằng cách làm như sau:
- Nhấp vào Lưu trong các mục mà bạn đã sửa đổi trên trang Giao diện.
- Nhấp vào Lấy mã trong mục Bố cục của trang Giao diện.
-
Sao chép đoạn mã được tạo trong cửa sổ bật lên Mã.
Nếu bạn đã chọn bố cục hai cột, hãy sao chép hai đoạn mã: một cho hộp tìm kiếm và một cho kết quả.
Nếu bạn đã chọn bố cục hai trang, hãy nhập URL của trang web sẽ hiển thị kết quả cho công cụ tìm kiếm của bạn. Nhập tên tham số truy vấn được nhúng trong URL, được phân tích cú pháp theo trang kết quả tìm kiếm. Cuối cùng, hãy sao chép 2 đoạn mã.
Đoạn mã cho bố cục chỉ có kết quả là dành cho trường hợp kết quả tìm kiếm xuất hiện trên một trang mới. Nhập tên tham số truy vấn được nhúng trong URL, được phân tích cú pháp theo trang kết quả tìm kiếm. Cuối cùng, hãy sao chép đoạn mã kết quả tìm kiếm.
-
Chèn mã này vào mọi trang mà bạn muốn có một hộp Công cụ tìm kiếm có thể lập trình. Bạn có thể dán mã này vào bất kỳ vị trí nào trong thẻ
<body></body>của trang web.Lưu ý: Để có khả năng tương thích cao nhất trên nhiều trình duyệt, bạn nên sử dụng một loại tài liệu được hỗ trợ, chẳng hạn như
<!DOCTYPE html>cho các trang HTML.Nếu đang sử dụng hiệu ứng di chuột cho phần tử Tìm kiếm, thì trang HTML của bạn phải sử dụng một loại tài liệu được hỗ trợ, chẳng hạn như
<!DOCTYPE html>.
Nếu bạn đã chọn bố cục hai cột, hãy chèn mã cho hộp tìm kiếm vào một cột và mã cho kết quả vào một cột khác.
Nếu bạn đã chọn bố cục hai trang, hãy chèn mã cho hộp tìm kiếm vào trang web mà bạn muốn hộp tìm kiếm xuất hiện và mã cho kết quả vào trang web mà bạn muốn kết quả tìm kiếm xuất hiện.
Nếu bạn đã chọn bố cục chỉ có kết quả, hãy chèn đoạn mã vào trang web nơi bạn muốn kết quả tìm kiếm xuất hiện.