이번 글에서는 내 쇼핑몰을 카카오톡에 공유했을 때 나타나는
'메타태그(meta tag)'를 바꿔보도록 하겠다.
메타태그는 이전 글에서도 다룬 적이 있는데, 한번 더 다뤄보도록 하겠다.
이전 글이 궁금하다면 아래를 클릭하도록 하자 ▼
메타태그란 무엇인가?/ 메타(meta)태그 크롤링하기/ 네이버 영화 크롤링해서 웹에 메모하기
메타태그란?
'메타(meta) 태그는 HTML을 통해 만든 웹 페이지를
브라우저가 개괄적으로 판단할 수 있도록 도움을 주기 위해서 사용하는 태그'이다.
그리고 메타 태그는<head></head> 부분에 들어가서 사이트의 속성을 설명해준다.
예시로, 우리가 카카오톡으로 URL을 보냈을 때의 생김새를 보면 된다.
아래 예시는 내 티스토리 블로그를 카톡으로 전송했을 때의 사진이다.
카카오톡은 썸네일과 디스크립션을 아래와 같이 보여주기 위해
어떤 메타(meta) 태그를 활용했을까?
티스토리의 사진 ☞ og:image
HwanE Develop Blog ☞ og:title
남들과는 다르게 ☞ og:description
자. 그러면 우리가 바꿀 것은, 우리가 만든 쇼핑몰을 공유하기 위해
카카오톡으로 전송했을 때 나타나는 이미지와, 타이틀, 디스크립션 부분이다.
바꾸지 않았을 때는 아래와 같이 자동으로 작성이 된다.
우리가 바꾸고자 하는 부분에 해당하는 메타태그 코드는 아래와 같다.
content 뒤에는 바꾸려는 내용을 적어주면 된다.
index.html 파일 / meta 태그 기본 틀 코드
<meta property="og:title" content="내 사이트의 제목" />
<meta property="og:description" content="보고 있는 페이지의 내용 요약" />
<meta property="og:image" content="{{ url_for('static', filename='ogimage.png') }}" />여기서 조금 고민을 해야 하는 부분은 og:image 속성이다.
여기서는 'url_for( )'이라는 메소드를 사용해준다.
url_for( ) 메소드를 간략히 설명하자면 첫 번째로 적은 'static'이란 이름의 폴더 안에 있는
'filename' 즉, 리소스 이름이 'ogimage.png'인 리소스를 가지고 오라는 뜻이다.
자. 그러면 static 폴더 안에 넣을 리소스를 찾으러 가자.
구글에 원하는 사진 이름에 사이즈를 더해서 검색을 해주자.
나는 맥북 이미지를 800x400 사이즈가 필요해 아래와 같이 검색했다.
그리고 원하는 사진에 마우스 우클릭을 통해 다른 이름으로 저장한다.
저장을 하는데, 우리 shoppingmal 폴더, 즉 쇼핑몰을 만들었던
프로젝트에 'static'이라는 폴더에 넣어준다.
사진이 static 폴더에 있는데, 파일 형식이나 이름을 모르겠다면 마우스 우클릭을 해
'속성'을 눌러 이름과 파일 형식 .jpg인지 .png인지 확인해준다.
index.html 파일 / 메타태그(meta tag) 코드
<meta property="og:title" content="HwanE 맥북(MacBook) 쇼핑몰 " />
<meta property="og:description" content="사고싶었던 맥북을 가상으로 사볼 수 있는 가상의 간편 쇼핑몰" />
<meta property="og:image" content="{{ url_for('static', filename='2018-macbook-pro.jpg') }}" />보여주고자 하는 내용으로 메타태그를 수정해서
<head></head> 태그 안에 넣어준다.
자. 그러면 서버 컴퓨터에 수정된 코드로 교체 해주는 작업을 해야 한다.
우선적으로 현재 서버가 돌아가고 있다면, 서버를 종료한 후에 '파일질라(fileZilla)' FTP 프로그램으로
수정된 index.html 파일을 넣어주고, 다시 서버를 돌리는 순서로 해줘야 한다.
돌아가고 있는 서버를 종료시켜주자.
ps -ef | grep 'app.py'
현재 실행 중인 프로세스를 보여주는데, 'app.py'라는 이름의 프로세스만 보여주는 명령어.
아래와 같이 작성하고 엔터를 누른다.
kill -9 (프로세스 번호) 명령어를 입력해주어
실행 중인 프로세스를 '강제종료' 시켜준다.
파일질라(FileZilla)라는 FTP 프로그램을 켜준다.
파일질라가 아니더라도 기존에 사용하는 FTP 프로그램이 있다면 그것을 사용해도 좋다.
그런데 없다면, 아래를 참고해서 다운로드 받아주도록 하자 ▼
파일질라(FileZilla) 설치하기/ FTP 프로그램 추천/ FTP란 무엇인가?/ 파일질라 설치 방법
파일질라를 켜서 서버 컴퓨터에 올려놨던
기존에 만들어둔 static 폴더와 templates 폴더, app.py 파일을 삭제한다.
그리고 현재 우리 로컬 컴퓨터에
새롭게 수정한 static 폴더와 templates 폴더, 그리고 app.py 파일을
마우스로 끌어다가 오른쪽으로 넣어준다. 그러면 아래에 '전송 중'이 뜨면서
서버 컴퓨터로 수정된 파일이 들어가게 된다.
파일질라(FileZilla)를 통해 수정된 파일을 서버 컴퓨터에 넣었다면
다시 서버를 켜주도록 하자.
서버로 접속해, 우선 app.py 파일이 있는 디렉터리로 이동한다.
'cd' 명령어로 디렉토리에 들어가주고, 'ls' 명령어로 디렉터리에 있는 리스트를 본다.
그리고 아래의 명령어를 입력해준다.
nohup python app.py &
해당 명령어를 입력해주면
우리 컴퓨터를 킨 상태로 서버를 돌리고 있지 않아도, 가상의 컴퓨터가 서버를 돌리고 있기 때문에
컴퓨터를 꺼도 서버가 켜져 있는 상태가 되어 웹에 접속할 수가 있다.
위 명령어를 입력 후 엔터를 눌러주면 아래와 같은 화면이 뜬다.
그러면 서버가 켜진 것이다.
엔터를 한번 더 치면 명령어를 입력할 수 있는 상태가 된다.
그래도 서버는 켜져있으니 안심하도록 하자.
ps -ef | grep 'app.py' 명령어로 서버 프로세스가 작동하는지 확인해도 좋다.
자 그러면 잘 작동하는지 살펴보자.
카톡으로 쇼핑몰 주소(URL)을 전송하면
아래와 같이, 이전과는 다른 썸네일이 나타난다.
그리고 타이틀과 디스크립션 부분에도 우리가 작성했던 내용이 담긴 것을 확인할 수 있다 !
그런데
메타태그(meta tag)부분을 바꾸고, 서버에 업로드 했음에도 바뀌지 않는 경우가 있다!
이 부분은 '카카오톡' 앱의 입장에서도 생각해봐야 한다.
카카오톡 앱에서 URL에 대한 메타(meta) 태그 부분을 크롤링해서 가져오는데,
사용자가 URL을 공유할 때마다 크롤링하면 얼마나 비효율적인가...
그렇기 때문에 크롤링한 메타(meta) 태그 부분을 한 번 가져오고 당분간은 저장해놓는다.
웹 사이트에 메타 태그 부분이 매일 바뀔 일은 없을테니 말이다.
그래도 우리는 실습을 하고 있으니, 바뀐 부분을 바로 확인해보고 싶지 않은가.
그럴 땐 수동으로 og 태그 캐시 데이터를 초기화할 수 있다.
이 기능들은 카카오톡이나 페이스북에서 제공하고 있다.
카카오톡 og 태그 캐시 데이터 지우기 ▼
https://developers.kakao.com/tool/clear/og
카카오계정 로그인
여기를 눌러 링크를 확인하세요.
accounts.kakao.com
페이스북 og 태그 캐시 데이터 지우기 ▼
https://developers.facebook.com/tools/debug/
공유 디버거 - Facebook for Developers
공유 디버거를 사용하면 Facebook에 공유될 때 콘텐츠가 표시되는 모습을 미리 보거나 오픈 그래프 태그를 사용하여 문제를 디버깅할 수 있습니다. 이 도구를 사용하려면 Facebook에 로그인하세요.
developers.facebook.com
댓글