독자가 Google 검색에서 선호하는 소스를 통해 내 사이트를 찾을 수 있도록 지원

웹사이트 소유자는 사용자가 Google 검색에서 내 간행물을 선호하는 출처로 찾을 수 있도록 도울 수 있습니다. 사용자가 내 사이트를 선호하는 출처로 선택하면 '주요 뉴스'에 내 콘텐츠가 표시될 가능성이 높아지며 '선호' 배지가 강조 표시됩니다. AI 모드 및 AI 개요에서 내 사이트를 선호하는 출처로 선택한 사용자에게는 내 콘텐츠가 '선호' 배지와 함께 강조 표시될 수 있습니다.

기능 제공 여부

선호하는 출처 기능은 Google 검색을 사용할 수 있는 모든 언어로 '주요 뉴스' 기능에 대해 전 세계에서 제공됩니다. 선호하는 출처는 AI 모드 및 AI 개요가 제공되는 모든 언어와 지역에서 해당 기능에 표시될 수도 있습니다.

도메인 수준 및 하위 도메인 수준 사이트만 출처 환경설정 도구에 표시될 수 있습니다. 예를 들어 https://www.example.com/ 및 https://code.example.com/은 선호하는 출처에 적합하지만 하위 디렉터리 https://www.example.com/blog는 적합하지 않습니다.

사용자가 내 사이트를 선호하는 소스로 찾을 수 있도록 지원하는 방법

사이트가 출처 환경설정 도구에 표시되는 경우(확인하려면 도구의 검색창에 사이트를 입력하세요) 다음 방법을 사용하여 독자가 사이트를 선호하는 출처로 선택하도록 안내할 수 있습니다.

표준 JavaScript 구현 (권장): 웹페이지에 대화형 버튼을 삽입합니다. 그러면 독자가 사이트를 선호하는 출처로 원활하게 추가하고 페이지로 돌아갈 수 있습니다. HTML에 두 줄만 추가하면 이 옵션은 기기 및 언어 맞춤설정을 지원하는 자동으로 현지화된 Google 스타일 버튼을 렌더링합니다.
맞춤 디자인 애셋을 사용한 고급 JavaScript 구현: 자체 디자인 애셋을 사용하고 표준 JavaScript 버튼을 맞춤설정하려면 고급 JavaScript 구현 안내를 따르세요. 최종 사용자 UI 흐름은 표준 JavaScript 구현과 동일하게 유지됩니다.
딥 링크 구현: 대화형 버튼을 구현할 수 없는 경우 (예: CMS에서 지원하지 않음) 딥 링크를 사용하여 사용자가 사이트를 선호하는 출처로 추가하도록 안내할 수 있습니다. 웹페이지에 텍스트 링크나 클릭 가능한 이미지를 추가하면 됩니다. 소셜 게시물, 이메일 뉴스레터 또는 프로모션에서 딥 링크를 사용할 수도 있습니다.

표준 JavaScript 구현 (권장)

HTML에 두 줄만 추가하면 자동으로 번역된 대화형 버튼을 추가할 수 있습니다. 이 버튼을 사용하면 독자가 사이트를 선호하는 출처로 원활하게 추가하고 페이지에서 중단한 부분으로 돌아갈 수 있습니다. 버튼의 테마(어두운 테마 또는 밝은 테마)를 설정하고 버튼 언어를 재정의할 수도 있습니다. 이 구현은 독자에게 최상의 사용자 환경을 제공하므로 권장됩니다.

다음과 같이 표시됩니다.

웹페이지에 자바스크립트 버튼을 삽입하려면 다음 단계를 따르세요.

웹페이지에 다음 <script> 태그를 추가합니다(<head> 요소에 추가하는 것이 좋습니다). 이는 선호하는 출처 라이브러리를 로드합니다.
```
<script async src="https://news.google.com/swg/js/v1/publisher.js"></script>
```
웹페이지 본문에서 버튼을 표시할 위치에 다음 <div> 태그를 추가합니다.
```
<div google-add-preferred-source-btn></div>
```

버튼 테마 설정

기본적으로 '선호하는 출처에 추가' 버튼은 밝은 테마로 표시됩니다. 테마를 조정하려면 <div> 요소에 data-theme 데이터 속성을 추가하고 light 또는 dark로 설정합니다.

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

버튼 언어 재정의

기본적으로 '선호하는 출처에 추가' 버튼은 브라우저 설정에 따라 사용자의 언어로 표시됩니다. 이 동작을 재정의하려면 <div> 요소에 data-lang 데이터 속성을 추가하고 원하는 언어 코드로 설정하세요 (지원되는 언어 코드 목록 다운로드).

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

지원되는 언어 코드 다운로드

맞춤 디자인 애셋을 사용한 고급 JavaScript 구현

기본적으로 표준 자바스크립트 버튼은 DOM에서 google-add-preferred-source-btn 속성이 있는 요소를 자동으로 스캔하고 표준 배지를 렌더링합니다. 하지만 자체 UI 요소나 애플리케이션 주요 시점에서 흐름을 트리거하려는 맞춤 통합의 경우 프로그래매틱 방식으로 클라이언트를 초기화하고 흐름을 맞춤 트리거에 바인딩할 수 있습니다.

선호하는 출처 라이브러리를 맞춤 사용자 인터페이스, 애플리케이션 마일스톤 또는 최신 프레임워크 애플리케이션에 통합할 때 JavaScript SDK를 사용하여 런타임 설정과 흐름 시작을 완전히 프로그래매틱 방식으로 제어할 수 있습니다. Google은 도구 및 아키텍처에 따라 ES 모듈 가져오기 (ESM)와 표준 스크립트 콜백 대기열 (IIFE)라는 두 가지 통합 접근 방식을 제공합니다. 두 배포 모델 모두 동일한 기능과 메서드를 노출합니다.

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

표준 스크립트 콜백 대기열

표준 스크립트 태그 통합의 경우 preferred-sources-control="manual" 속성을 사용하여 문서의 <head>에 다음 스크립트를 로드하여 자동 버튼 렌더링을 방지합니다.

<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 모듈 번들 전반에서 실시간 사용을 보여주는 대화형 프런트엔드 및 백엔드 구현은 선호하는 출처 데모를 참고하세요.

딥 링크 구현

웹사이트에서 자바스크립트를 사용할 수 없는 경우 딥 링크를 사용하여 사용자를 출처 환경설정 도구로 안내할 수 있습니다. 여기에서 사용자는 사이트를 선호하는 출처로 추가하고 선택사항을 확인할 수 있습니다.

다음 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에서 제공하는 공식 번역 그래픽 저작물을 다운로드할 수 있습니다.

버튼 애셋 다운로드