[오픈그래프] 티스토리 공유할 때 표시되는 이미지와 텍스트 변경하기

 

 

오픈그래프를 것을 추가해서 블로그의 기본 설정을 바꾸지 않고

 

티스토리 블로그를 공유할 때 표시되는 대표 이미지와 제목, 설명을 변경하는 방법입니다.

 

html편집이 익숙하지 않으신 분들도 어렵지 않게 하실 수 있습니다.

 

 

 

 

 

 

아래는 제 티스토리 블로그를 페이스북에 공유했을 때의 모습입니다.

 

티스토리의 블로그 설정 메뉴에서 입력한

 

대표 이미지, 블로그 이름, 블로그 설명이 표시됩니다.

 

 

 

 

블로그 설정은 그대로 유지하면서, 공유할 때 표시되는 내용을 변경해 보도록 하겠습니다.

 

 

 

 

 

 

1. 이미지 등록하기

 

 

대표이미지로 사용할 이미지를 티스토리에 업로드합니다.

 

 

 

 

티스토리에서 설정 > 꾸미기 > 스킨편집 으로 이동합니다.

 

 

 

 

원하는 이미지를 업로드하고, 업로드된 이미지를 우클릭 해서 새 탭에서 열기를 선택합니다.

 

저는 셔터스톡에서 구입한 당근 케이크 이미지를 사용했습니다.

 

 

 

 

 

 

 

 

새 탭에서 열기를 하면, 업로드된 이미지의 경로를 확인할 수 있습니다.

 

이미지의 주소 전체(https://tistory1.daumcdn.net/tistory/3196697/skin/images/cake.png)를 복사합니다.

 

이미지 경로를 복사했으면, 파일업로드 페이지에서 적용 버튼을 클릭해 이미지 업로드를 완료합니다.

 

 

 

 

 

 

2. 오픈그래프(og: open graph) 추가하기

 

 

이제 HTML 편집기에서 티스토리 블로그가 공유될 때  대표 이미지를 복사한 경로의 이미지로 바꾸고,

 

제목과 설명도 원하는 내용으로 표시되도록 오픈그래프를 추가합니다.

 

 

 

 

추가할 내용은 다섯 줄입니다.

 

아래 내용을 복사한 후에 content=""의 내용을 각각 맞게 바꿉니다.

 

<meta property="og:type" content="website">
<meta property="og:title" content="[오픈그래프] 티스토리 공유할 때 표시되는 이미지와 텍스트 변경하기">
<meta property="og:description" content="웹 개발과 SEO 기초 공부">
<meta property="og:image" content="https://tistory1.daumcdn.net/tistory/3196697/skin/images/cake.png">
<meta property="og:url" content="https://noa-xyz.tistory.com">

 

og:type

이 페이지의 종류는?  >> "website"

 

 

og:title

공유할 때 표시될 제목은?  >> 따옴표 안에 원하는 제목을 입력합니다.

 

"[오픈그래프] 티스토리 공유할 때 표시되는 이미지와 텍스트 변경하기"를 입력하면 블로그 이름이 표시됩니다.

 

 

og:description

공유할 때 표시될 설명은? >> 따옴표 안에 원하는 내용을 입력합니다.

 

"UX | SEO | Front-End | VR"를 입력하면 블로그 설명이 표시됩니다.

 

 

og:image

공유할 때 표시될 이미지는? >> 따옴표 안에 위에서 복사한 이미지 경로를 입력합니다.

 

 

og:url

이 페이지의 경로는? >> 따옴표 안에 티스토리 블로그 주소를 입력합니다.

 

 

 

 

 

 

위의 내용은 이렇게 입력됩니다.

 

 

 

위치는

 

<title>[오픈그래프] 티스토리 공유할 때 표시되는 이미지와 텍스트 변경하기</title>

 

아래에 입력했습니다.

 

위의 이미지에 보이는 스크립트 중에서

 

앞에서 본 다섯 줄 외의 name="title", name="description" 등은 일단 무시합니다.

 

내용을 입력했으면, 적용을 클릭합니다.

 

 

 

 

 

 

페이스북에서 다시 제 티스토리 블로그를 공유해보겠습니다.

 

 

 

 

아까와 같은 내용이 표시되지만, 이미지 왼쪽 위에 화살표가 표시됩니다.

 

 

 

클릭하면 새로 업로드해서 og:image로 연결한 이미지가 보입니다.

 

이미지 크기가 600*315보다 크면 이렇게 이미지가 가로폭 전체를 차지하도록 표시됩니다.

 

 

 

 

 

게시된 모습입니다.

 

<meta property="og:title" content="[오픈그래프] 티스토리 공유할 때 표시되는 이미지와 텍스트 변경하기">

 

으로 입력했기 때문에, 그대로 블로그 이름이 표시됩니다.

 

아래의 설명은

 

<meta property="og:description" content="웹 개발과 SEO 기초 공부">

 

라고 입력한 그대로 표시됩니다.

 

 

 

 

 

페이스북에서의 이미지에 대한 설정은

https://developers.facebook.com/docs/sharing/webmasters/images/

Images in Link Shares - 공유 - 문서 - Facebook for Developers

에서 자세히 나와 있습니다.

 

 

몇 가지 내용만 가져오자면,

 

- 최소 사이즈 200x200
- 권장 사이즈 1200x630이상
- 권장 종횡비 1.91:1
- 최대 용량 8MB
- 사이즈가 600*315보다 작으면 이미지가 왼쪽에 표시되고 오른쪽에 제목과 내용이 표시됨.

 

입니다.