티스토리에서 구글 웹스토리 연동하는 방법

티스토리에서 구글 웹스토리 연동하는 방법

 

 

티스토리에서 구글 웹스토리 연동하는 방법

 

📑 목차

• 웹스토리 개요와 장점
• 준비물과 필수 설정
• 웹스토리 만들기(도구별)
• 퍼블리시 & 퍼마링크 관리
• 티스토리에 임베드하는 방법
• SEO·애드센스 체크리스트
• 자주 겪는 오류 해결
• 운영 팁 & 활용 아이디어

 

웹스토리 개요와 장점

구글 웹스토리(Web Stories)는 모바일 풀스크린 카드형 콘텐츠로, 짧은 텍스트·이미지·동영상을 묶어 스와이프로 보여주는 포맷입니다. 짧은 체류가 아닌 연속 소비를 유도해 페이지/세션과 체류 시간을 개선하고, 검색·탐색 탭·이미지 탭 등 다양한 노출 면을 확보할 수 있습니다.

 

핵심: 모바일 트래픽이 많은 티스토리에서 웹스토리를 연결하면 신규 유입과 브랜딩을 동시에 잡을 수 있습니다.

 

카드형 스토리는 스와이퍼 기반이라 완독률과 체류 시간을 높이는 데 유리합니다.

 

준비물과 필수 설정

• 구글 계정(웹스토리 관리/서치콘솔용)
• 웹스토리 제작 도구 1개: Web Stories for WordPress 또는 MakeStories/NewsroomAI 같은 호스티드 에디터
• 퍼블리시용 도메인(URL): 자체 도메인 혹은 도구가 제공하는 공개 URL
• 티스토리 편집 권한(HTML 모드 사용 가능)

가능하면 스토리의 퍼마링크를 한 곳에서 관리해 나중에 수정·통계를 일원화하세요.

웹스토리 만들기(도구별)

① WordPress 플러그인(Web Stories) 사용

1. 워드프레스 관리자 → Plugins → Web Stories 설치/활성화
2. 템플릿 선택 → 페이지(카드) 추가 → 텍스트 280자 내, 24px 이상 권장
3. 비디오(세로 9:16)·이미지(1080×1920) 삽입, 접근성 텍스트 대체
4. Poster image·Title·Excerpt 설정 후 Publish

② 호스티드 에디터(MakeStories 등)

1. 무료 계정 생성 → 템플릿 선택
2. 배경·레이어·애니메이션 설정, 각 페이지에 1~2 메시지로 간결하게
3. Publish 후 제공되는 공개 URL 또는 <amp-story-player> 임베드 코드 복사

텍스트 대비 4.5:1 이상, 주요 버튼은 터치 영역 44×44px 이상을 권장합니다.

 

템플릿을 활용해 8~12페이지 정도의 짧고 명확한 흐름으로 구성하세요.

 

퍼블리시 & 퍼마링크 관리

• 스토리별 고정 URL 확보: 예) https://example.com/stories/keyword-guide/
• 썸네일(Poster) 640×853 이상, OG 이미지 세팅
• 스토리 내 CTA 페이지(더 읽을 글/구독/카테고리 허브) 1장 포함

티스토리에 임베드하는 방법

방법 A: 링크/썸네일로 연결(가장 간단)

1. 티스토리 에디터 기본 모드에서 스토리 썸네일 삽입
2. 썸네일에 스토리 고정 URL 링크 걸기(새 창 권장)

방법 B: 플레이어로 임베드(HTML 모드)

티스토리 글쓰기 → HTML 모드에서 아래 예시를 원하는 위치에 붙여넣습니다.

<link rel="stylesheet" href="https://cdn.ampproject.org/amp-story-player-v0.css">
<script async src="https://cdn.ampproject.org/amp-story-player-v0.js"></script>

<amp-story-player style="width:100%;max-width:480px;height:720px;border-radius:12px;overflow:hidden">
  <a href="스토리-고정URL-여기에"></a>
</amp-story-player>

• 여러 스토리를 캐러셀처럼 넣고 싶으면 <a href="...">를 여러 개 추가
• 스마트폰 뷰를 고려해 height는 560~720px 사이로 테스트

 

HTML모드에서 <amp - story - player>를 사용하면 본문에서 바로 스토리를 재생할 수 있습니다

 

SEO·애드센스 체크리스트

• 스토리 제목에 핵심 키워드 포함, 포스터/OG 이미지 일치
• 각 페이지에 대체 텍스트·명확한 캡션 제공
• 티스토리 본문에는 스토리 요약 + 관련 글 내부 링크 2~3개 배치
• 광고: 스토리 자체 광고는 과도하게 넣지 말고, 티스토리 글의 상/중/하 균형 배치
• 서치 콘솔에 스토리 URL 제출(색인 상태 확인)

팁: 스토리 마지막 페이지에 “더 읽을 글(허브 페이지)”를 연결하면 체류 시간과 전환이 함께 증가합니다.

자주 겪는 오류 해결

• 플레이어가 안 보임: 스크립트/스타일 CDNs가 차단되지 않았는지, HTML 모드가 맞는지 확인
• 기기에서 비율 깨짐: width/height 고정값을 비율 박스나 max-width로 조정
• 이미지 저화질: 1080×1920 권장, WebP/AVIF 사용
• 색인 누락: 스토리 URL을 서치 콘솔로 제출, 내부 링크/사이트맵에 포함

운영 팁 & 활용 아이디어

• 시즌·이슈형 스토리로 실시간 트래픽 확보 → 본문 가이드로 유입 전환
• 연재형 스토리(1/3/5편)로 체류 시간 누적
• 대표 이미지 + 30초 요약 스토리 + 상세 본문 3종 세트로 발행

 

오늘의 정보가 도움이 되셨나요?

티스토리에서 구글 웹스토리 연동하는 방법을 통해 더 편리한 고급정보를 활용하시기 바랍니다.

감사합니다.