들어가며
카카오톡이나 페이스북에 내 우피 페이지 링크를 공유했는데, 원하지 않는 이미지가 뜨거나 설명이 없어 당황한 적 없으신가요? 방문자는 링크를 클릭하기 전, 공유된 이미지와 설명을 보고 첫인상을 결정합니다. 잘 설정된 공유 이미지는 클릭률을 높이는 중요한 요소이죠.
이미 
메타 태그(공유 정보) 설정하기 를 통해 기본적인 내용을 안내해 드렸지만, 오늘은 공유 이미지와 설명을 내 마음대로 설정하는 모든 방법을 A to Z로 알려드릴게요. 이 글은 메타 태그 가이드의 '업그레이드 심화 버전'입니다!
메타 태그(공유 정보) 설정하기 를 통해 기본적인 내용을 안내해 드렸지만, 오늘은 공유 이미지와 설명을 내 마음대로 설정하는 모든 방법을 A to Z로 알려드릴게요. 이 글은 메타 태그 가이드의 '업그레이드 심화 버전'입니다!1. 공유 이미지 설정
공유 이미지를 설정하고, 각 페이지별로 우선순위를 다르게 하는 방법은 여러가지가 있습니다. 여기에서는 지금까지의 사용자 경험과 문의를 바탕으로 가장 편할 것이라고 생각하는 방법을 공유합니다.
1단계: 모든 페이지의 기본, '대표 공유 이미지' 설정하기
가장 먼저 해야 할 일은 내 모든 우피 페이지에 적용될 기본 이미지를 설정하는 것입니다.
1.
2.
'대표 공유 이미지 (og:image)' 섹션에 이미지를 업로드해 주세요.
'노션 페이지의 커버 이미지를 덮어씁니다' 옵션을 꼭 체크해 주세요.
이미지 최적화 꿀팁!
•
사이즈: 페이스북(메타) 권장 사이즈인 1200x627 픽셀을 추천해요.
•
용량: 웹페이지 로딩 속도를 위해 이미지는 가벼울수록 좋습니다. 화질을 유지하면서 300kb 내외로 최적화해 보세요.
이제 모든 페이지는 방금 업로드한 '대표 공유 이미지'로 사용합니다. 물론 사이트를 운영하다보면, 특정 페이지의 공유 이미지를 다르게 해야할 일이 생깁니다.
2단계: 특정 페이지만 '노션 커버 이미지'로 공유하기
"전체 대표 이미지는 그대로 쓰면서, 이 페이지만큼은 노션에 설정한 커버 이미지로 보여주고 싶어!"라고 생각하신다면, YAML 코드 블럭을 사용할 차례입니다.YAML 코드 블럭, 이름만 들으면 어려워 보이지만 정말 간단해요. 노션 페이지 최상단에 코드 블럭을 만들고, 언어를 YAML로 선택한 뒤 아래 코드를 딱 한 줄만 넣어주세요.
Yaml 관 관련해서는 아래의 글을 한번 읽어보시면, 5분도 걸리지 않을 거예요
ignoreMainOgImage: true
YAML
복사
이 코드는 "메인 대표 이미지를 무시하고(ignore) 이 페이지의 노션 커버를 공유 이미지로 사용하겠다"라는 뜻입니다. 정말 간단하죠?
3단계: 내가 원하는 '특정 이미지'를 공유 이미지로 사용하기
대표 이미지도, 노션 커버 이미지도 아닌 전혀 다른 이미지를 공유 이미지로 쓰고 싶을 때도 있습니다. 이 방법 역시 YAML 코드 블럭으로 해결할 수 있습니다.=
ogImage: "사용할 이미지의 주소(웹에서 접근 가능한 주소)"
YAML
복사
"그런데 이미지 주소는 어디서 구하나요? 이미지 서버가 없는데요?"
걱정 마세요! 여러분의 노션 페이지가 바로 이미지 서버가 됩니다.
방법 1: 노션 페이지에 보이는 이미지를 사용하는 경우
1.
이미지가 포함된 노션 페이지를 우피로 게시합니다.
2.
게시된 우피 페이지에 접속해서 원하는 이미지에 마우스 오른쪽 버튼을 클릭하세요.
3.
'이미지 주소 복사'를 선택해 주소(URL)를 얻습니다.
4.
복사한 주소를 ogImage: "주소"의 따옴표 안에 붙여넣으면 끝!
방법 2: 페이지 본문에는 안 보이지만 공유할 때만 쓰고 싶은 이미지가 있다면, 우피의 oopy:hide 기능을 활용해 보세요.
1.
사용할 이미지를 노션 페이지에 일단 업로드합니다.
2.
위 '방법 1'과 동일하게, 게시된 우피 페이지에서 해당 이미지의 주소를 복사합니다.
3.
다시 노션 편집 화면으로 돌아와 oopy:hide 라는 이름의 토글 블럭을 만듭니다.
4.
이미지 주소를 복사해 둔 이미지를 이 oopy:hide 토글 블럭 안으로 쏙 옮겨주세요.
이렇게 하면 페이지에서는 이미지가 숨겨지지만, 이미지 주소는 그대로 살아있기 때문에 공유 이미지로 사용하는 데 아무런 문제가 없습니다. 우피의 기능들은 이렇게 조합해서 사용할 때 더 강력해진답니다! oopy:hide 와 관련해서는 아래의 글을 참고해주세요
정리
헷갈리시나요? 하지만 지금까지 수년의 서비스를 운영하면서 들은 99.9%의 활용은 위의 3가지 방법으로 처리할 수 있습니다!
2. 공유 설명(Description) 설정하기
이미지만큼이나 중요한 것이 바로 '공유 설명'입니다. 어떤 내용의 페이지인지 알려주는 이 설명은 검색엔진최적화(SEO) 측면에서도 아주 중요합니다. 검색엔진의 기본 검색 단위는 ‘페이지’이기 때문에, 페이지마다 고유한 설명을 달아주는 것이 좋습니다.
설정 방법은 역시 YAML 코드 블럭을 사용해 간단하게 해결할 수 있습니다.
description: "여기에 페이지를 설명하는 문구를 적어주세요. 검색엔진과 방문자 모두에게 좋은 인상을 줄 수 있습니다."
YAML
복사
주의할 점! 설명 문구는 큰따옴표(")로 감싸주는 것이 안전합니다. 그리고 문구 안에는 큰따옴표를 또 사용하지 않도록 주의해 주세요!
마무리하며
검색엔진최적화(SEO), 메타 태그... 복잡하고 어렵게 느껴질 수 있지만, 결국 기본은 '사람들에게 내 콘텐츠를 어떻게 잘 보여줄까?'라는 고민에서 시작됩니다. 그 첫걸음이 바로 오늘 알아본 공유 이미지와 설명 설정입니다.
지금 바로 여러분의 우피 페이지에 멋진 공유 이미지와 매력적인 설명을 추가해 보세요. 방문자의 클릭을 유도하고, 더 나아가 잠재 고객을 사로잡는 첫 단추가 될 거예요!
