ช่วยให้ผู้อ่านค้นพบเว็บไซต์ของคุณผ่านแหล่งที่มาที่ต้องการใน Google Search

หากคุณเป็นเจ้าของเว็บไซต์ คุณสามารถช่วยให้ผู้ชมค้นหาสื่อเผยแพร่ของคุณเป็นแหล่งข้อมูลที่ต้องการใน Google Search ได้ เมื่อผู้ใช้เลือกเว็บไซต์ของคุณเป็นแหล่งข้อมูลที่ต้องการ เนื้อหาของคุณก็มีแนวโน้มที่จะปรากฏใน "ข่าวเด่น" มากขึ้น โดยจะไฮไลต์ด้วยป้าย "แนะนำ" ในโหมด AI และข้อมูลภาพรวมโดย AI ระบบจะไฮไลต์เนื้อหาของคุณด้วยป้าย "แนะนำ" สำหรับผู้ใช้ที่เลือกเว็บไซต์ของคุณเป็นแหล่งข้อมูลที่ต้องการ

ความพร้อมใช้งานของฟีเจอร์

ฟีเจอร์แหล่งที่มาที่ต้องการมีให้บริการทั่วโลกสำหรับฟีเจอร์ "เรื่องเด่น" ในทุกภาษาที่ใช้งาน Google Search ได้ แหล่งข้อมูลที่ต้องการยังปรากฏในโหมด AI และข้อมูลภาพรวมโดย AI ในทุกภาษาและทุกพื้นที่ที่ฟีเจอร์เหล่านั้นพร้อมให้บริการได้ด้วย

เฉพาะเว็บไซต์ระดับโดเมนและโดเมนย่อยเท่านั้นที่มีสิทธิ์ปรากฏในเครื่องมือค่ากำหนดแหล่งที่มา เช่น https://www.example.com/ และ https://code.example.com/ มีสิทธิ์เป็นแหล่งที่มาที่ต้องการ แต่ไดเรกทอรีย่อย https://www.example.com/blog ไม่มีสิทธิ์

วิธีช่วยให้ผู้ใช้ค้นพบเว็บไซต์ของคุณเป็นแหล่งที่ต้องการ

หากเว็บไซต์ของคุณปรากฏในเครื่องมือค่ากำหนดแหล่งที่มา (หากต้องการตรวจสอบ ให้ป้อนเว็บไซต์ของคุณในช่องค้นหาของเครื่องมือ) คุณสามารถใช้วิธีต่อไปนี้เพื่อแนะนำให้ผู้อ่านเลือกเว็บไซต์ของคุณเป็นแหล่งที่มาที่ต้องการ

การติดตั้งใช้งาน JavaScript มาตรฐาน (แนะนํา): ฝังปุ่มแบบอินเทอร์แอกทีฟในเว็บซึ่งจะช่วยให้ผู้อ่านเพิ่มเว็บไซต์ของคุณเป็นแหล่งที่มาที่ต้องการได้อย่างราบรื่นและนำผู้อ่านกลับมายังหน้าเว็บของคุณ ตัวเลือกนี้จะแสดงผลปุ่มที่แปลเป็นภาษาท้องถิ่นโดยอัตโนมัติในรูปแบบของ Google ซึ่งรองรับการปรับแต่งอุปกรณ์และภาษา โดยเพิ่มโค้ดเพียง 2 บรรทัดลงใน HTML
การติดตั้งใช้งาน JavaScript ขั้นสูงด้วยชิ้นงานการออกแบบที่กำหนดเอง: หากต้องการใช้ชิ้นงานการออกแบบของคุณเองและปรับแต่งปุ่ม JavaScript มาตรฐาน ให้ทำตามวิธีการติดตั้งใช้งาน JavaScript ขั้นสูง ขั้นตอน UI ของผู้ใช้ปลายทางยังคงเหมือนกับการติดตั้งใช้งาน JavaScript มาตรฐาน
การติดตั้งใช้งาน Deep Link: หากติดตั้งใช้งานปุ่มแบบอินเทอร์แอกทีฟไม่ได้ (เช่น CMS ไม่รองรับ) คุณสามารถใช้ Deep Link เพื่อนำผู้ใช้ไปเพิ่มเว็บไซต์เป็นแหล่งที่มาที่ต้องการได้ คุณทำได้โดยเพิ่มลิงก์ข้อความหรือรูปภาพที่คลิกได้ในหน้าเว็บ นอกจากนี้ คุณยังใช้ Deep Link ในโพสต์บนโซเชียล จดหมายข่าวทางอีเมล หรือโปรโมชันได้ด้วย

การติดตั้งใช้งาน JavaScript มาตรฐาน (แนะนํา)

เพียงเพิ่มโค้ด 2 บรรทัดลงใน HTML คุณก็สามารถเพิ่มปุ่มแบบอินเทอร์แอกทีฟที่แปลโดยอัตโนมัติ ซึ่งช่วยให้ผู้อ่านเพิ่มเว็บไซต์ของคุณเป็นแหล่งที่มาที่ต้องการได้อย่างราบรื่น และกลับมายังจุดที่อ่านค้างไว้ในหน้าเว็บได้ นอกจากนี้ คุณยังตั้งค่าธีมของปุ่ม (มืดหรือสว่าง) และลบล้างภาษาของปุ่มได้ด้วย เราขอแนะนำให้ใช้การติดตั้งใช้งานนี้เนื่องจากจะมอบประสบการณ์ของผู้ใช้ที่ดีที่สุดให้แก่ผู้อ่าน

ซึ่งจะมีลักษณะดังนี้

หากต้องการฝังปุ่ม JavaScript ในหน้าเว็บ ให้ทำดังนี้

เพิ่มแท็ก <script> ต่อไปนี้ลงในหน้าเว็บ (ควรอยู่ในองค์ประกอบ <head>) ซึ่งจะโหลดไลบรารีแหล่งที่มาที่ต้องการ
```
<script async src="https://news.google.com/swg/js/v1/publisher.js"></script>
```
เพิ่มแท็ก <div> ต่อไปนี้ในตำแหน่งใดก็ได้ที่คุณต้องการให้ปุ่มปรากฏในส่วนเนื้อหาของหน้าเว็บ
```
<div google-add-preferred-source-btn></div>
```

ตั้งค่าธีมปุ่ม

โดยค่าเริ่มต้น ปุ่ม "เพิ่มลงในแหล่งที่มาที่ต้องการ" จะปรากฏในธีมสว่าง หากต้องการปรับธีม ให้เพิ่มแอตทริบิวต์ข้อมูล data-theme ลงในองค์ประกอบ <div> แล้วตั้งค่าเป็น light หรือ dark ดังนี้

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

ลบล้างภาษาของปุ่ม

โดยค่าเริ่มต้น ปุ่ม "เพิ่มลงในแหล่งที่มาที่ต้องการ" จะแสดงเป็นภาษาของผู้ใช้ตามการตั้งค่าเบราว์เซอร์ หากต้องการลบล้างลักษณะการทำงานนี้ ให้เพิ่มแอตทริบิวต์ข้อมูล data-lang ลงในองค์ประกอบ <div> และตั้งค่าเป็นรหัสภาษาที่ต้องการ (ดาวน์โหลดรายการรหัสภาษาที่รองรับ)

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

ดาวน์โหลดรหัสภาษาที่รองรับ

การติดตั้งใช้งาน JavaScript ขั้นสูงด้วยชิ้นงานการออกแบบที่กำหนดเอง

โดยค่าเริ่มต้น ปุ่ม JavaScript มาตรฐานจะสแกน DOM โดยอัตโนมัติเพื่อหาองค์ประกอบที่มีแอตทริบิวต์ google-add-preferred-source-btn และแสดงผลป้ายมาตรฐาน อย่างไรก็ตาม สำหรับการผสานรวมที่กำหนดเองซึ่งคุณต้องการทริกเกอร์โฟลว์จากองค์ประกอบ UI หรือเหตุการณ์สำคัญของแอปพลิเคชัน คุณสามารถเริ่มต้นไคลเอ็นต์แบบเป็นโปรแกรมและเชื่อมโยงโฟลว์กับทริกเกอร์ที่กำหนดเองได้

เมื่อผสานรวมไลบรารีแหล่งที่มาที่ต้องการเข้ากับอินเทอร์เฟซผู้ใช้ที่กำหนดเอง เหตุการณ์สำคัญของแอปพลิเคชัน หรือแอปพลิเคชันเฟรมเวิร์กสมัยใหม่ คุณจะควบคุมการตั้งค่ารันไทม์และการเริ่มต้นโฟลว์แบบเป็นโปรแกรมได้อย่างเต็มรูปแบบโดยใช้ JavaScript SDK ของเรา เรามีแนวทางการผสานรวมที่แตกต่างกัน 2 แนวทาง โดยขึ้นอยู่กับเครื่องมือและสถาปัตยกรรมของคุณ ได้แก่ การนําเข้าโมดูล ES (ESM) และคิว Callback ของสคริปต์มาตรฐาน (IIFE) ทั้ง 2 รูปแบบการเผยแพร่จะแสดงความสามารถและวิธีการที่เหมือนกัน

การนำเข้าโมดูล ES

สำหรับการตั้งค่าบิลด์สมัยใหม่และสภาพแวดล้อมแบบโมดูล ให้นำเข้าไลบรารีลงในโค้ดโดยตรง

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();
};

คิวการติดต่อกลับตามสคริปต์มาตรฐาน

สำหรับการผสานรวมแท็กสคริปต์มาตรฐาน ให้โหลดสคริปต์ต่อไปนี้ใน <head> ของเอกสารที่มีแอตทริบิวต์ preferred-sources-control="manual" เพื่อป้องกันการแสดงปุ่มอัตโนมัติ

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

หมายเหตุ: หากละเว้นแอตทริบิวต์ preferred-sources-control="manual" ระบบจะค้นหาและเริ่มต้นองค์ประกอบที่มีแอตทริบิวต์ google-add-preferred-source-btn ทันที

จากนั้นใช้คิวเรียกกลับส่วนกลาง PREFERRED_SOURCE เพื่อเริ่มต้นตัวเลือกและเชื่อมโยงทริกเกอร์ที่กำหนดเอง

<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>

หากต้องการดูการใช้งานฟรอนท์เอนด์และแบ็กเอนด์แบบอินเทอร์แอกทีฟที่แสดงการใช้งานจริงในปุ่ม, คอนเทนเนอร์แบบประกาศ, สคริปต์ IIFE และแพ็กเกจโมดูล ES โปรดดูเดโมแหล่งที่มาที่ต้องการ

การใช้งาน Deep Link

หากใช้ JavaScript ในเว็บไซต์ไม่ได้ คุณสามารถใช้ Deep Link เพื่อนำผู้ใช้ไปยังเครื่องมือค่ากำหนดแหล่งที่มา ซึ่งผู้ใช้จะเพิ่มเว็บไซต์ของคุณเป็นแหล่งที่มาที่ต้องการและยืนยันการเลือกได้

ใช้รูปแบบ URL ต่อไปนี้และแทนที่ example.com ด้วยชื่อโดเมนของสื่อเผยแพร่ ซึ่งจะนำผู้ใช้ไปยังเว็บไซต์ของคุณโดยตรงในเครื่องมือการตั้งค่าแหล่งที่มา

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

ตัวอย่างลิงก์ข้อความ

<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>

ชิ้นงานรูปภาพของปุ่ม

คุณสามารถออกแบบป้ายโปรโมชันที่กำหนดเองหรือดาวน์โหลดเนื้อหากราฟิกที่แปลแล้วอย่างเป็นทางการซึ่ง Google จัดเตรียมไว้ให้ได้ดังนี้

ชิ้นงานปุ่มดาวน์โหลด