Giúp độc giả tìm thấy trang web của bạn thông qua các nguồn được ưu tiên trong Google Tìm kiếm

Nếu là chủ sở hữu trang web, bạn có thể giúp khán giả tìm thấy ấn phẩm của mình dưới dạng nguồn được ưu tiên trên Google Tìm kiếm. Khi người dùng chọn trang web của bạn làm nguồn ưu tiên, nội dung của bạn sẽ có nhiều khả năng xuất hiện hơn trong phần "Tin bài hàng đầu", được đánh dấu bằng huy hiệu "ưu tiên". Trong Chế độ AI và Thông tin tổng quan do AI tạo, nội dung của bạn có thể được làm nổi bật bằng huy hiệu "ưu tiên" đối với những người dùng đã chọn trang web của bạn làm nguồn được ưu tiên.

Các nguồn được ưu tiên trong Chế độ AI Các nguồn được ưu tiên trong phần Tin bài hàng đầu

Phạm vi cung cấp tính năng

Tính năng nguồn được ưu tiên hiện có trên toàn cầu đối với tính năng "Tin bài hàng đầu" và hỗ trợ tất cả ngôn ngữ mà Google Tìm kiếm hỗ trợ. Các nguồn được ưu tiênn cũng có thể xuất hiện trong Chế độ AI và Thông tin tổng quan do AI tạo bằng tất cả ngôn ngữ và ở mọi địa điểm có hỗ trợ các tính năng đó.

Chỉ những trang web cấp miền và cấp miền con mới đủ điều kiện xuất hiện trong công cụ lựa chọn nguồn. Ví dụ: https://www.example.com/ và https://code.example.com/ đủ điều kiện để trở thành nguồn được ưu tiên, nhưng thư mục con https://www.example.com/blog thì không đủ điều kiện.

Cách giúp người dùng tìm thấy trang web của bạn dưới dạng nguồn ưu tiên

Nếu trang web của bạn xuất hiện trong công cụ lựa chọn nguồn (để kiểm tra, hãy nhập trang web của bạn vào hộp tìm kiếm của công cụ), bạn có thể sử dụng các phương pháp sau để hướng dẫn độc giả chọn trang web của bạn làm nguồn ưu tiên:

  • Triển khai JavaScript chuẩn (nên dùng): Nhúng một nút tương tác vào các trang web của bạn để độc giả có thể thêm trang web của bạn làm nguồn ưu tiên rồi quay lại trang của bạn mà không bị gián đoạn. Bằng cách chỉ thêm hai dòng vào HTML, lựa chọn này sẽ cho người dùng thấy một nút được bản địa hoá tự động, theo kiểu Google, hỗ trợ cho việc tuỳ chỉnh thiết bị và ngôn ngữ.
  • Triển khai JavaScript nâng cao bằng thành phần thiết kế tuỳ chỉnh: Nếu bạn muốn dùng thành phần thiết kế của riêng mình và tuỳ chỉnh nút JavaScript tiêu chuẩn, hãy làm theo hướng dẫn triển khai JavaScript nâng cao. Quy trình giao diện người dùng của người dùng cuối vẫn giống như phương thức triển khai JavaScript tiêu chuẩn.
  • Triển khai đường liên kết sâu: Nếu không triển khai được nút tương tác (ví dụ: CMS của bạn không hỗ trợ nút này), bạn có thể dùng đường liên kết sâu để hướng mọi người thêm trang web của bạn làm nguồn ưu tiên. Bạn có thể thực hiện việc này bằng cách thêm một đường liên kết dạng văn bản hoặc một hình ảnh mà người dùng có thể nhấp vào trên các trang web của mình. Bạn cũng có thể sử dụng đường liên kết sâu trong bài đăng trên trang xã hội, bản tin qua email hoặc nội dung quảng bá.

Triển khai JavaScript tiêu chuẩn (nên dùng)

Chỉ cần thêm 2 dòng vào HTML, bạn có thể thêm một nút tương tác được dịch tự động, nút này cho phép độc giả có thể thêm trang web của bạn làm nguồn ưu tiên và quay lại nơi họ rời đi trên trang của bạn mà không bị gián đoạn. Bạn cũng có thể thiết lập giao diện của nút (tối hoặc sáng), đồng thời ghi đè ngôn ngữ của nút. Bạn nên triển khai theo cách này vì sẽ mang lại trải nghiệm tốt nhất cho độc giả.

Dưới đây là hình ảnh minh hoạ:

Nút Thêm vào nguồn ưu tiên bằng JavaScript

Để nhúng nút JavaScript này vào trang web, hãy làm như sau:

  1. Thêm thẻ <script> sau vào trang web của bạn (tốt nhất là trong phần tử <head>), đây là thẻ sẽ tải thư viện Nguồn ưu tiên. 
    <script async src="https://news.google.com/swg/js/v1/publisher.js"></script>
  2. Thêm thẻ <div> sau đây vào bất cứ vị trí nào bạn muốn nút "Thêm vào nguồn ưu tiên" xuất hiện trong nội dung trang web của mình. 
    <div google-add-preferred-source-btn></div>

Thiết lập giao diện của nút

Theo mặc định, nút "Thêm vào nguồn ưu tiên" sẽ xuất hiện trong giao diện sáng. Để điều chỉnh giao diện, hãy thêm thuộc tính dữ liệu data-theme vào phần tử <div> rồi thiết lập thuộc tính đó thành light hoặc dark: 

<div google-add-preferred-source-btn data-theme="dark"></div>

Ghi đè ngôn ngữ của nút

Theo mặc định, nút "Thêm vào nguồn ưu tiên" sẽ xuất hiện bằng ngôn ngữ của người dùng dựa trên chế độ cài đặt của trình duyệt. Để ghi đè hành vi này, hãy thêm thuộc tính dữ liệu data-lang vào phần tử <div> rồi thiết lập thuộc tính này thành mã của ngôn ngữ mà bạn muốn (tải danh sách mã của các ngôn ngữ được hỗ trợ xuống): 

<div google-add-preferred-source-btn data-lang="en"></div>

Tải mã của các ngôn ngữ được hỗ trợ xuống

Triển khai JavaScript nâng cao bằng các thành phần thiết kế tuỳ chỉnh

Theo mặc định, nút JavaScript tiêu chuẩn sẽ tự động quét DOM để tìm các phần tử có thuộc tính google-add-preferred-source-btn và kết xuất hình ảnh huy hiệu tiêu chuẩn. Tuy nhiên, đối với các chế độ tích hợp tuỳ chỉnh mà bạn muốn kích hoạt quy trình từ các phần tử giao diện người dùng hoặc các cột mốc ứng dụng của riêng mình, bạn có thể khởi động ứng dụng một cách có lập trình và liên kết quy trình với các điều kiện kích hoạt tuỳ chỉnh.

Khi tích hợp thư viện Nguồn ưu tiên vào giao diện người dùng tuỳ chỉnh, các mốc quan trọng của ứng dụng hoặc ứng dụng khung hiện đại, bạn có thể kiểm soát hoàn toàn các chế độ cài đặt thời gian chạy và khởi tạo quy trình theo phương pháp có lập trình nhờ SDK JavaScript của chúng tôi. Chúng tôi cung cấp 2 phương pháp tích hợp riêng biệt, tuỳ thuộc vào công cụ và cấu trúc của bạn: Nhập mô-đun ES (ESM) và hàng đợi lệnh gọi lại theo tập lệnh tiêu chuẩn (IIFE). Cả hai mô hình phân phối đều cho thấy các chức năng và phương thức giống hệt nhau.

Nhập mô-đun ES

Đối với các thiết lập bản dựng hiện đại và môi trường dựa trên mô-đun, hãy nhập thư viện trực tiếp vào mã của bạn. 

import { preferredSource } from
  "https://news.google.com/swg/js/v1/publisher.mjs";

// 1. Initialize directly using the imported module instance
preferredSource.init({
  theme: 'light', // Theme choice: "light" or "dark" (default "light")
  lang: 'en'      // Optional: override language (defaults to page language)
});

// 2. Programmatically bind flow invocation using a click handler
const button = document.querySelector('#myButton');
button.onclick = () => {
  preferredSource.addPreferredSource();
};

Hàng đợi lệnh gọi lại theo tập lệnh tiêu chuẩn

Đối với các phương thức tích hợp thẻ theo tập lệnh tiêu chuẩn, hãy tải tập lệnh sau vào <head> của tài liệu bằng thuộc tính preferred-sources-control="manual" để ngăn quá trình tự động kết xuất hình ảnh nút: 

<script async preferred-sources-control="manual" src="https://news.google.com/swg/js/v1/publisher.js"></script>

Sau đó, hãy dùng hàng đợi lệnh gọi lại PREFERRED_SOURCE chung để khởi tạo các lựa chọn và liên kết các điều kiện kích hoạt tuỳ chỉnh: 

<script>
  (self.PREFERRED_SOURCE = self.PREFERRED_SOURCE || []).push(
    function(preferredSource) {
      // 1. Initialize with options
      preferredSource.init({
        theme: 'light',
        lang: 'en'
      });

      // 2. Programmatically bind trigger button
      const button = document.querySelector('#myButton');
      button.addEventListener('click', () => {
        preferredSource.addPreferredSource();
      });
  });
</script>

Để biết các cách triển khai thành phần tương tác ở giao diện người dùng và phần phụ trợ minh hoạ cho hoạt động sử dụng trực tiếp trên các nút, vùng chứa khai báo, tập lệnh IIFE và gói Mô-đun ES, hãy khám phá bản minh hoạ Nguồn ưu tiên.

Nếu không thể sử dụng JavaScript trên trang web của mình, bạn có thể chuyển sang dùng một đường liên kết sâu để chuyển hướng người dùng đến công cụ lựa chọn nguồn. Tại đây, họ có thể thêm trang web của bạn làm nguồn ưu tiên và xác nhận lựa chọn của mình.

Sử dụng định dạng URL sau đây và thay thế example.com bằng tên miền của ấn bản, định dạng này sẽ đưa người dùng đến thẳng trang web của bạn trong công cụ lựa chọn nguồn: 

https://www.google.com/preferences/source?q=Your_Website's_URL

Ví dụ về đường liên kết dạng văn bản

<a
  href="https://www.google.com/preferences/source?q=example.com">
  Add as Preferred Source
</a>
 
<a
  href="https://www.google.com/preferences/source?q=example.com">
  <img src="path/to/your/button.png" alt="Add as Preferred Source">
</a>

Thành phần hình ảnh của nút

Bạn có thể thiết kế huy hiệu quảng bá tuỳ chỉnh của riêng mình hoặc tải các thành phần đồ hoạ chính thức đã qua dịch thuật do Google cung cấp xuống:

Tải thành phần hình ảnh của nút xuống