티스토리 뷰
og 태그 만들기
- 나홀로메모장에서 배웠던 og:image, og:title, og:description 태그 기억하시나요?
내 프로젝트도 카톡/페이스북/슬랙에 공유했을 때 예쁘게 나오도록, 미리 꾸며봅시다!
- static 폴더 아래에 이미지 파일을 넣고, 각자 프로젝트 HTML의 <head>~</head> 사이에 아래 내용을 작성하면 og 태그를 개인 프로젝트에 사용할 수 있습니다.
1. "내 사이트의 제목" 입력하기
2. "보고 있는 페이지의 내용 요약" 입력하기
3. 적당한 이미지를 만들거나/골라서 static폴더에 ogimage.png로 저장하기!
(사이즈 800x400인 이미지를 구글에서 검색!)
[코드스니펫] - og태그 넣기
<meta property="og:title" content="내 사이트의 제목" />
<meta property="og:description" content="보고 있는 페이지의 내용 요약" />
<meta property="og:image" content="{{ url_for('static', filename='ogimage.png') }}" />
<title>원페이지쇼핑몰</title>
<meta property="og:title" content="내 사이트의 제목"/>
<meta property="og:description" content="보고 있는 페이지의 내용 요약"/>
<meta property="og:image" content="{{ url_for('static', filename='ogimage.png') }}"/>
- 참고! 이미지를 바꿨는데 이전 ogimage가 그대로 나와요!
그것은 페이스북/카카오톡 등에서 처음 것을 한동안 저장해놓기 때문입니다.
페이스북 og 태그 초기화 하기: https://developers.facebook.com/tools/debug/
공유 디버거 - Facebook for Developers
공유 디버거를 사용하면 Facebook에 공유될 때 콘텐츠가 표시되는 모습을 미리 보거나 오픈 그래프 태그를 사용하여 문제를 디버깅할 수 있습니다. 이 도구를 사용하려면 Facebook에 로그인하세요.
developers.facebook.com
카카오톡 og 태그 초기화 하기: https://developers.kakao.com/tool/clear/og
카카오계정 로그인
여기를 눌러 링크를 확인하세요.
accounts.kakao.com
'항해' 카테고리의 다른 글
| 항해톡 발표 CORS (0) | 2022.02.08 |
|---|---|
| [1week_팀 프로젝트] 전시어때(9조)팀 프로젝트 회고 (2) | 2022.01.13 |
| 5주차_18(도메인 구입하기) (0) | 2021.12.18 |
| 5주차_17(nohup 설정하기) (0) | 2021.12.18 |
| 5주차_16(포트포워딩-상식) (0) | 2021.12.18 |
