nextjs에서 카카오톡 공유했을 시에,  open graph코드를 정확히 입력하였는데도 불구하고 자꾸 메타태그의 open graph가 적용이 되지 않았다 ㅠㅠ 그래서 결국 팀장님께 요청을 구했고, loading이 true가 뜨면서, return
false가 반환되어 html 태그가 아예 적용이 되지 않는다는 것을 깨달았다... 여기서, typeof window가 undefined라는 것은, window가 서버 사이드에 있다는 걸 뜻한다.. (하지만 보통 프론트에서는 undefined가 아니면 not null을 반환한다) 아무튼 그렇게 해서 결국엔 meta태그가 적용되는 것을 알 수 있었고, HTML 코드가 잘 나오니 meta 태그가 먹혀 미리보기가 생성되는 것을 볼 수 있었다 😭 감격,,, 아 그리고, 올바르게 렌더되고 있는지는 주말동안 삽질했는데 해결되어 매우 기쁘다 😆😆
og 태그는 open graph 태그를 의미하는데, 카카오톡같은 곳에서 링크를 공유할 때 보이는 썸네일과 타이틀 등의 정보를 표시할 때 쓰는 메타태그입니다. 속성은 아래와 같습니다. og:url - 링크될 URL입니다. og:type - 웹, 앱 등 타입을 지정합니다. og:title - 해당 링크의 제목 입니다. 위 사진에서는 "[Hello_World]개발자 창고입니다." 에 해당합니다, og:description - 설명입니다. "이런 저런 개발을 하고 있습니다."에 해당합니다. og:image - 썸네일 링크입니다. http:// 부터 시작하는 절대 주소로 지정합니다. 이 태그에 담긴 정보들은 카카오 기준 1시간(정확하진 않음) 단위로 캐싱됩니다. 따라서 수정하고 확인할 때 불편함이 있겠죠? https://developers.kakao.com/tool/clear/og 카카오계정 로그인 여기를 눌러 링크를 확인하세요. accounts.kakao.com 그럴 때를 대비에 카카오에서 이런 서비스를 제공합니다. 한 눈에 봐도 로그인이 필요해보입니다. 이 링크로 들어가서 캐쉬를 삭제할 링크를 입력하면 됩니다. 이번 글에서는 내 쇼핑몰을 카카오톡에 공유했을 때 나타나는'메타태그(meta tag)'를 바꿔보도록 하겠다.메타태그는 이전 글에서도 다룬 적이 있는데, 한번 더 다뤄보도록 하겠다. 이전 글이 궁금하다면 아래를 클릭하도록 하자 ▼ 메타태그란 무엇인가?/ 메타(meta)태그 크롤링하기/ 네이버 영화 크롤링해서 웹에 메모하기 메타태그란? '메타(meta) 태그는 HTML을 통해 만든 웹 페이지를 브라우저가 개괄적으로 판단할 수 있도록 도움을 주기 위해서 사용하는 태그'이다. 그리고 메타 태그는<head></head> 부분에 들어가서 사이트의 속성을 설명해준다. 예시로, 우리가 카카오톡으로 URL을 보냈을 때의 생김새를 보면 된다. 아래 예시는 내 티스토리 블로그를 카톡으로 전송했을 때의 사진이다. 카카오톡은 썸네일과 디스크립션을 아래와 같이 보여주기 위해 어떤 메타(meta) 태그를 활용했을까? 티스토리의 사진 ☞ og:image HwanE Develop Blog ☞ og:title 남들과는 다르게 ☞ og:description 자. 그러면 우리가 바꿀 것은, 우리가 만든 쇼핑몰을 공유하기 위해 카카오톡으로 전송했을 때 나타나는 이미지와, 타이틀, 디스크립션 부분이다. 바꾸지 않았을 때는 아래와 같이 자동으로 작성이 된다. 우리가 바꾸고자 하는 부분에 해당하는 메타태그 코드는 아래와 같다. content 뒤에는 바꾸려는 내용을 적어주면 된다. index.html 파일 / meta 태그 기본 틀 코드 여기서 조금 고민을 해야 하는 부분은 og:image 속성이다. 여기서는 'url_for( )'이라는 메소드를 사용해준다. url_for( ) 메소드를 간략히 설명하자면 첫 번째로 적은 'static'이란 이름의 폴더 안에 있는 'filename' 즉, 리소스 이름이 'ogimage.png'인 리소스를 가지고 오라는 뜻이다. 자. 그러면 static 폴더 안에 넣을 리소스를 찾으러 가자. 구글에 원하는 사진 이름에 사이즈를 더해서 검색을 해주자. 나는 맥북 이미지를 800x400 사이즈가 필요해 아래와 같이 검색했다. 그리고 원하는 사진에 마우스 우클릭을 통해 다른 이름으로 저장한다. 저장을 하는데, 우리 shoppingmal 폴더, 즉 쇼핑몰을 만들었던 프로젝트에 'static'이라는 폴더에 넣어준다. 사진이 static 폴더에 있는데, 파일 형식이나 이름을 모르겠다면 마우스 우클릭을 해 '속성'을 눌러 이름과 파일 형식 .jpg인지 .png인지 확인해준다. index.html 파일 / 메타태그(meta tag) 코드 보여주고자 하는 내용으로 메타태그를 수정해서 <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 |
메타 태그 적용 안됨 - meta taegeu jeog-yong andoem
관련 게시물
저작권 © 2024 ko.paraquee Inc.
