티스토리에 Google 선호 출처 버튼 설치하는 방법

티스토리 스킨에 코드를 한 번 넣으면 모든 글에 Google 검색 선호 출처로 추가 버튼을 표시할 수 있습니다. 이 글에서는 스킨을 안전하게 백업하고, 생성된 코드를 글 본문 치환자 앞이나 뒤에 넣는 과정을 설명합니다.

[##_article_rep_desc_##]

설치 전에 티스토리 주소를 확인하세요

기본 티스토리 주소를 사용한다면 내블로그.tistory.com을 입력합니다. 독립 도메인을 연결했다면 방문자가 실제로 접속하고 검색 결과에 표시되는 대표 도메인을 입력하세요. 개별 글 주소를 넣어도 생성기는 하위 경로를 제외하고 도메인만 사용합니다.

Google은 도메인과 서브도메인 단위 출처를 지원하지만 하위 폴더는 별도 출처로 지원하지 않습니다. 버튼을 설치하기 전에 생성기의 Google에서 내 출처 확인 기능으로 주소가 검색되는지 확인하는 것이 좋습니다.

1. 티스토리용 코드 생성하기

1. Google 선호 출처 버튼 생성기를 엽니다.
2. 티스토리 대표 주소를 입력합니다.
3. 플랫폼에서 티스토리를 선택합니다.
4. 본문 시작 전 또는 본문 하단을 선택합니다.
5. 밝은 테마·어두운 테마와 버튼 언어를 선택합니다.
6. 내 설치 코드 만들기를 누른 다음 추천 설치 코드를 복사합니다.

2. 사용 중인 티스토리 스킨 백업하기

HTML을 수정하기 전에 현재 스킨을 백업하세요. 티스토리 관리자에서 꾸미기 → 스킨 변경으로 이동해 다운로드로 현재 스킨 파일을 저장하거나 보관 기능을 이용하면, 문제가 생겼을 때 원래 상태로 돌아갈 수 있습니다.

3. 스킨 HTML에 코드 붙여넣기

1. 티스토리 관리자에서 꾸미기 → 스킨 편집으로 이동합니다.
2. HTML 편집을 누릅니다.
3. 편집기 안을 클릭하고 검색 기능으로 [##_article_rep_desc_##]를 찾습니다.
4. 본문 시작 전을 선택했다면 치환자 바로 앞에, 본문 하단을 선택했다면 치환자 바로 뒤에 생성 코드를 붙여넣습니다.
5. 적용을 눌러 저장합니다.

워플 생성 코드에는 <s_permalink_article_rep> 조건이 포함되어 있어 글 목록이 아니라 개별 글 화면에만 버튼을 표시합니다. 또한 Google 공식 publisher.js를 불러와 방문자의 브라우저 언어와 선택한 테마에 맞는 버튼을 렌더링합니다.

4. 모바일과 PC에서 확인하기

공개 글을 PC와 모바일에서 각각 열어 버튼 위치를 확인합니다. 티스토리 앱 내부 브라우저나 카카오톡 브라우저는 이전 화면을 캐시할 수 있으므로 변경이 보이지 않으면 창을 닫았다 다시 열거나 일반 브라우저의 시크릿 창에서 확인하세요.

버튼이 표시되지 않을 때

• [##_article_rep_desc_##]가 여러 개라면 <s_permalink_article_rep> 내부의 실제 본문 치환자를 선택했는지 확인합니다.
• 코드 일부가 빠지거나 따옴표가 자동 변경되지 않았는지 생성 코드와 비교합니다.
• 스킨 최적화 코드가 외부 JavaScript를 지연하거나 차단하는지 확인합니다.
• 광고 차단 브라우저나 콘텐츠 차단 기능을 잠시 끄고 테스트합니다.
• 스킨을 변경한 뒤 버튼이 사라졌다면 새 스킨 HTML에 코드를 다시 넣습니다.

자주 묻는 질문

티스토리 기본 주소와 독립 도메인 중 무엇을 넣나요?

검색 결과의 대표 주소와 방문자가 실제로 사용하는 공개 주소를 입력하세요. 독립 도메인으로 완전히 전환했다면 일반적으로 독립 도메인을 사용합니다.

모든 글을 하나씩 수정해야 하나요?

아닙니다. 스킨 HTML의 본문 치환자 주변에 한 번 설치하면 기존 글과 새 글에 함께 적용됩니다.

스킨을 변경해도 유지되나요?

스킨 HTML에 직접 넣은 코드는 다른 스킨으로 교체할 때 유지되지 않을 수 있습니다. 새 스킨을 적용한 뒤 코드를 다시 설치하세요.

티스토리의 글 본문 치환자와 퍼머링크 조건은 티스토리 공식 스킨 가이드에서도 확인할 수 있습니다.