블로그를 운영하거나 홈페이지를 만들다 보면 방문자에게 위치를 안내해야 할 일이 종종 생깁니다. 특히 맛집 리뷰, 매장 소개, 행사 안내 글에서는 지도가 포함되면 신뢰도와 편의성이 크게 높아집니다. 이번 글에서는 블로그스팟, 워드프레스, 티스토리 플랫폼에 구글맵을 가장 간편하게 삽입하는 방법을 소개합니다.
구글맵을 iframe으로 블로그에 삽입하는 방법
구글맵은 복잡한 API를 따로 설정하지 않아도 됩니다. HTML의 iframe 태그만 이용하면 누구나 쉽게 블로그에 지도를 넣을 수 있습니다.
1. 구글 지도 접속 및 원하는 장소 검색
구글 지도에 접속하여 원하는 위치를 검색합니다. 예를 들어, "강경해물칼국수"을 입력해 검색합니다.
2. 공유 버튼 클릭
검색한 위치가 나오면, 위치 정보 창에 있는 ‘공유’ 버튼을 클릭합니다.
3. ‘지도 퍼가기’ 선택 및 코드 복사
공유 팝업 창에서 ‘지도 퍼가기’ 탭을 선택하면 iframe 형식의 HTML 코드가 생성됩니다. 이 코드를 복사합니다.
4. HTML 코드 블로그에 삽입 (아래 코드가 아닌 실제 맵 코드를 넣어야 함)
복사한 코드를 블로그 글쓰기 화면의 HTML 편집 모드에서 원하는 위치에 붙여넣습니다.
<iframe src="https://www.google.com/maps/embed?pb=..." width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
Tip:
src속성은 수정하지 않고 그대로 사용합니다.width,height,style등은 원하는 디자인에 맞게 자유롭게 조정할 수 있습니다.
구글맵 삽입 방식: iframe vs 이미지 삽입 차이점
블로그에 지도를 넣을 때 단순 이미지로 삽입하는 방법과 iframe 코드를 사용하는 방법에는 명확한 차이가 있습니다.
- SEO 최적화 관점
- 이미지를 삽입하면 구글 검색 엔진이 지도 정보를 이해하지 못합니다. 반면, iframe을 활용하면 별도로 위치 정보를 제공하지 않아도 검색 엔진이 내용을 더 잘 인식할 수 있어 SEO에 긍정적인 영향을 줍니다.
- 페이지 로딩 속도
- 지도 이미지는 파일 용량이 커질 수 있어 페이지 로딩 속도를 저하시킬 위험이 있습니다. iframe은 구글 서버를 통해 지도 데이터를 불러오기 때문에 블로그 자체 서버에 부담을 주지 않습니다.
- 사용자 편의성
- 이미지는 단순히 보여주는 용도에 그치지만, iframe 삽입 지도는 클릭하여 확대, 축소, 거리 측정, 길찾기 등 다양한 상호작용이 가능합니다. 방문자에게 훨씬 실용적인 경험을 제공합니다.
- 업데이트 관리
- 이미지로 삽입하면 주소나 위치 정보가 바뀔 때마다 새로 캡처해서 수정해야 합니다. 그러나 iframe 삽입 지도는 원본 지도 정보를 그대로 불러오기 때문에 별도 수정이 필요 없습니다.
구글맵 블로그 포스팅 활용 예시
- 지역 상점 소개 글에 지도 삽입하여 방문자가 정확한 위치를 바로 파악할 수 있도록 합니다.
- 여행기 포스팅에 각 관광지의 위치를 구글맵으로 표시하여 여행 경로를 한눈에 보여줄 수 있습니다.
- 행사 안내 글에서 행사장 위치를 삽입해 참가자가 쉽게 찾아올 수 있도록 안내합니다.
리뷰를 마치며
블로그스팟, 워드프레스, 티스토리 등 다양한 플랫폼에서 구글맵을 삽입하는 것은 생각보다 매우 간단합니다. 복잡한 API 설정 없이 iframe 코드만으로 지도를 추가할 수 있고, 디자인도 자유롭게 커스터마이징할 수 있어 블로그 완성도를 크게 높여줍니다.
특히 SEO 최적화와 사용자 편의성 측면에서도 iframe 삽입은 최고의 선택입니다. 앞으로 블로그나 홈페이지를 꾸밀 때, 구글 지도 삽입 방법을 적극 활용해보세요. 작은 변화가 방문자 경험과 블로그 신뢰도를 크게 향상시킬 수 있습니다.
