홈페이지 영상 넣기 — 유튜브 퍼가기 vs 직접 올리기, 속도 · 자동재생 · 검색 노출 설정
홈페이지 영상은 대부분 유튜브에 먼저 올리고 '공유 > 퍼가기' 코드로 넣는 편이 가장 손이 덜 갑니다. 다만 코드를 그대로 붙이면 첫 화면이 무거워지고, 자동재생이 안 되거나, 구글이 영상을 못 찾는 일이 생깁니다. 이 글은 넣는 방식 고르기 → 퍼가기 코드 손보기 → 속도 · 자동재생 → 검색 노출 순서로, 공식 문서에서 확인한 내용만 정리했습니다.
- 유튜브 영상은 '공유 > 퍼가기'에서 나온 HTML 코드를 붙여 넣습니다. 시작 지점은 주소 뒤 ?start=초 로 정합니다.
- 화면 아래쪽에 있는 영상 iframe에는 loading="lazy"를 붙여, 손님이 그 근처까지 내려올 때 불러오게 합니다.
- 브라우저는 소리 없는(음소거) 자동재생만 항상 허용합니다. 소리 나는 자동재생을 기대하고 만들지 않습니다.
- 구글 동영상 검색에 나오려면 영상이 주인공인 페이지, 안정적인 썸네일, VideoObject의 name · thumbnailUrl · uploadDate가 필요합니다.
1유튜브로 퍼갈까, 영상 파일을 직접 올릴까?
가게 소개 영상, 시술 과정, 매장 둘러보기 영상은 두 가지 방법으로 넣습니다. 유튜브에 올린 뒤 퍼가기 코드(iframe)를 붙이는 방법, 그리고 mp4 파일을 내 호스팅에 올려 <video> 태그로 보여 주는 방법입니다. 어느 쪽이 나은지는 영상 길이와 쓰임에 따라 갈립니다.
| 비교 항목 | 유튜브 퍼가기(iframe) | 파일 직접 올리기(<video>) |
|---|---|---|
| 알맞은 영상 | 1분 넘는 가게 소개 · 작업 과정 · 강의 영상 | 몇 초짜리 배경 · 첫 화면 짧은 장면 |
| 호스팅 부담 | 유튜브 서버가 재생 | 내 호스팅 용량 · 전송량을 씀 |
| 화면 위 요소 | 유튜브 로고 · 추천 등 플레이어 화면 | 내가 정한 화면만(컨트롤 숨김 가능) |
| 자막 | 유튜브 자막 기능 사용 | <track>과 .vtt 자막 파일 |
| 관리 | 유튜브 채널 영상과 함께 관리 | 홈페이지 파일로 따로 관리 |
2유튜브 퍼가기 코드는 어디서 받고, 무엇을 고치나요?
YouTube 고객센터의 '동영상 및 재생목록 퍼가기' 도움말 기준으로 순서를 옮기면 다음과 같습니다.
- 컴퓨터에서 유튜브 영상 아래 공유 > 퍼가기를 누르고 나온 HTML 코드를 복사합니다.
- 특정 장면부터 틀려면 주소 뒤에 ?start=초 를 붙입니다. 1분 30초부터라면 start=90 입니다.
- 시청 기록을 남기지 않는 개인 정보 보호 강화 모드를 쓰려면 주소의 youtube.com 을 youtube-nocookie.com 으로 바꿉니다. 이 모드에서는 맞춤 광고가 나오지 않습니다.
- iframe에 title="매장 둘러보기 영상"처럼 무슨 영상인지 적어, 화면 읽기 프로그램을 쓰는 손님도 알 수 있게 합니다.
- 첫 화면 아래에 있는 영상이면 loading="lazy"를 덧붙입니다(3장).
3영상 때문에 홈페이지가 느려지지 않게 하려면?
MDN(모질라 개발자 문서)의 지연 로딩 안내는 <img> · <iframe> · <video>에 loading 속성을 달면, 화면 밖에 있는 동안 불러오기를 미루고 손님이 근처까지 스크롤할 때 불러온다고 설명합니다. 첫 화면 밖 영상이 여러 개인 소개 페이지라면 효과가 큽니다. 반대로 첫 화면 한가운데 있는 영상에는 붙이지 않습니다.
파일을 직접 올릴 때는 <video>의 속성 세 가지를 챙깁니다. poster는 영상이 내려받아지는 동안 보여 줄 그림, preload="none" 또는 "metadata"는 재생 전에 받을 양을 줄이라는 신호입니다. MDN은 preload가 브라우저에 주는 '힌트'일 뿐 반드시 따르지는 않는다고 적고 있습니다.
| 영상 위치 | 권장 설정 |
|---|---|
| 첫 화면 배경(직접 올림) | 짧게 자른 파일 + poster + muted · playsinline |
| 본문 중간 유튜브 | iframe + loading="lazy" + title |
| 영상이 여러 개인 갤러리 | 모두 lazy, 한 페이지에 너무 많이 두지 않음 |
속도를 실제로 재는 법은 순천 홈페이지 속도 글의 PageSpeed Insights 읽는 법을 그대로 쓰면 됩니다.
4자동재생은 왜 소리 없이만 되나요?
Chrome 자동재생 정책은 "음소거 자동재생은 항상 허용된다"고 적습니다. 소리가 나는 자동재생은 손님이 그 사이트를 클릭 · 터치한 적이 있거나, (PC에서) 예전에 그 사이트에서 소리 있는 영상을 본 기록이 쌓였거나, 사이트를 홈 화면에 추가한 경우 등에만 허용됩니다. 처음 들어온 손님에게는 대부분 소리 없이 재생된다고 보고 만듭니다.
- 첫 화면 배경 영상: autoplay · muted · playsinline · loop 를 함께 쓰고, 소리 없이도 뜻이 통하게 자막을 영상 안에 넣습니다.
- MDN 설명대로 muted="false"나 autoplay="false"로는 꺼지지 않습니다. 끄려면 속성을 아예 지웁니다.
- iframe 안의 플레이어가 자동재생하려면 iframe에 allow="autoplay"가 있어야 합니다(Chrome 정책의 iframe 위임).
5구글 동영상 검색에도 우리 영상이 나오게 하려면?
Google 검색 센터의 동영상 권장사항(2026-02-20 업데이트)은 영상을 찾는 조건을 이렇게 정리합니다. 영상이 담긴 페이지가 먼저 색인되어야 하고, 영상이 다른 요소에 가려지면 안 되며, 안정적인 주소의 썸네일이 있어야 합니다. 블로그 글 속에 끼워 넣은 영상은 '보기 페이지'로 보지 않으니, 꼭 검색에 걸리게 하고 싶은 영상은 그 영상이 주인공인 페이지를 따로 둡니다.
| VideoObject 속성 | 구분 | 적는 내용 |
|---|---|---|
| name | 필수 | 영상 제목(사이트 안에서 겹치지 않게) |
| thumbnailUrl | 필수 | 영상마다 다른 썸네일 주소 |
| uploadDate | 필수 | 처음 게시한 날짜 · 시간(ISO 8601) |
| description · duration · embedUrl | 권장 | 설명 · 길이(PT00H30M5S 형식) · 플레이어 주소 |
같은 문서는 손님이 클릭 · 스와이프해야만 영상이 로드되는 방식은 피하라고 합니다. 그래서 '썸네일을 눌러야 유튜브 iframe이 생기는' 꾸밈은 속도에는 좋지만 영상 색인에는 불리할 수 있습니다. 검색 노출이 목적인 보기 페이지에서는 iframe을 그대로 두고 loading="lazy"만 쓰는 편이 안전합니다. 가게 정보 구조화 데이터는 용인 구조화 데이터 글을 함께 보십시오.
6홈페이지 영상, 올리기 전에 무엇을 마지막으로 확인하나요?
- 영상 속 음악 · 글꼴 · 사람 얼굴이 사용 허락을 받은 것인지 확인합니다.
- 소리 없이 봐도 뜻이 통하도록 자막을 넣습니다. 직접 올린 영상은 <track>으로 .vtt 자막을 붙일 수 있습니다.
- 휴대폰에서 첫 화면을 열어 영상이 전화 · 예약 버튼을 가리지 않는지 봅니다.
- 영상 아래에 같은 내용을 글로 2~3줄 적어, 영상을 안 트는 손님과 검색엔진도 내용을 알게 합니다.
- 보기 페이지를 만들었다면 Search Console의 URL 검사로 렌더링된 HTML에 영상이 보이는지 확인합니다.
우리 홈페이지가 지금 얼마나 무거운지, 영상이 검색에 잡히는지 먼저 알고 싶다면 무료 SEO 점검을 신청해 보십시오. 영상 촬영 · 편집부터 홈페이지에 넣는 작업까지 전국 비대면으로 진행합니다. 제작 상담은 제작 문의로 남겨 주시면 됩니다.
자주 묻는 질문
유튜브 퍼가기 영상도 내 홈페이지 검색 노출에 도움이 되나요?
Google 검색 센터는 YouTube 같은 다른 회사 플레이어를 삽입해도 영상이 색인될 수 있다고 하면서, 자체 보기 페이지에 구조화 데이터를 제공하는 것이 좋다고 안내합니다. 영상만 붙이지 말고 제목 · 설명 글과 VideoObject를 함께 둡니다.
첫 화면 영상이 휴대폰에서 자동으로 안 나옵니다.
소리가 켜져 있으면 브라우저가 막을 수 있습니다. muted와 playsinline을 함께 넣었는지 확인하고, 소리 없이도 이해되게 자막을 영상 안에 넣으십시오.
