블로그 글을 보다 보면 구글 지도가 쏙 들어가 있는 거, 다들 한 번 쯤 보셨죠?
티스토리나 네이버블로그는 그냥 지도 넣는 기능이 있는데 워드프레스 블로그는 없죠.
저도 처음엔 블로그 고수들이 플러그인 같은거 복잡하게 깔아서 만드는 건가? 했었어요.
알고 보니 플러그인 설치 없이 단 1분 만에, 그것도 무료로 깔끔하게 구글 지도를 넣는 방법이 있더라고요!(나만 설레나? ㅋㅋ)
특히 해외여행이나 국내 맛집·여행 포스팅을 할 때 지도를 넣어주면 글의 퀄리티도 확 높아지고, 독자 입장에서도 동선을 한눈에 파악할 수 있어서 정말 편리합니다.
오늘은 워드프레스 기본 기능인 사용자 정의 HTML 블록을 활용해 구글 지도를 직접 넣는 방법을 아주 쉽게 정리해 드릴게요.
구글 지도에서 위치 검색하기
먼저 구글 지도 사이트에 접속합니다.
포스팅에 표시하고 싶은 장소나 맛집, 관광지 이름을 검색해 주세요.
퍼가기 (HTML) 코드 복사하기
장소 검색 후, 왼쪽 장소 정보 창에 보이는 [공유] 버튼을 클릭합니다.
팝업창이 뜨면 상단에 있는 지도 퍼가기 탭을 선택합니다.
지도 크기(소, 중, 대 또는 사용자 지정)를 원하는 대로 선택한 후, 옆에 있는 HTML 복사 버튼을 누릅니다.
이때 복사되는 코드 형태가 바로 웹페이지에 지도를 띄워주는 <iframe> 코드입니다.
워드프레스 글 편집기에 코드 붙여넣기
이제 워드프레스 글 작성 화면으로 돌아옵니다.
지도를 넣고 싶은 위치에서 + (블록 추가) 버튼을 누릅니다.
사용자 정의 HTML (Custom HTML) 블록을 검색해서 추가합니다.
아까 구글 지도에서 복사해 온 HTML 코드를 그대로 붙여넣습니다 (Ctrl + V).
블록 상단의 미리보기 버튼을 눌러 지도가 깨지지 않고 잘 나오는지 확인해 보세요!
꿀팁 하나 더: 모바일에서도 딱 들어맞는 반응형 지도 만들기
마지막으로 꿀팁 하나 더 알려드릴게요.
구글 지도에서 가져온 코드는 너비가 고정 크기(예: width="600")로 지정되어 있어 모바일 화면에서 오른쪽이 잘릴 수 있습니다.
붙여넣은 HTML 코드에서 width="600" 부분을 width="100%"로 수정하세요.
이렇게 바꾸면 PC는 물론 스마트폰 화면 크기에 맞춰 지도가 자동으로 깔끔하게 줄어드는 반응형 지도가 완성됩니다.
블로그 글에 바로 적용해 보세요
직접 써보니 예전처럼 사진하고 글로만 "뚝섬유원지는 자양역 2번 출구로 나와서 100미터 어쩌구~" 설명할 필요 없이 지도를 콕 찍어주는 게 방문자 이탈률을 낮추는 데도 훨씬 효과적입니다.
지금 작성 중이거나 예전에 올려둔 여행이나 맛집 포스팅이 있으신가요?
그러면 바로 구글 지도 퍼가기를 활용해 블로그 글의 완성도를 200% 올려보세요.
블로그 말고 인스타그램도 하시면 [인스타그램 알고리즘 초기화 하는법, 2026년 최신] 이 글도 도움이 되실 것 같습니다. 감사합니다.
){kind=link}