웹사이트 추석 과제 중
참가자들끼리 투표해서 상을 준다고 한다.
남들이랑 차별점을 주려고 여러가지 시도해봤는데
그 중 하나가 meta 태그다.
meta 태그로 썸네일을 바꾼다면 들어가기 전부터 남들과 차별점을 둔다.
<meta name="viewport" content="width=device-width" />
<meta property="og:image" content="image/LIFEPOST.jpg" />
<meta property=" og:title" content="LIFE POST" />
<meta property="og:description" content="LIFE POST NEWS" />원래 작성된 meta 태그는 이렇다
카카오톡으로 확인한 결과 썸네일이 잘 떠서 슬랙에 결과물을 올렸는데 Slack에서는 썸네일이 안 떴다.
진짜 당황해서 계속 찾아봤다.
여러 시도를 해본 결과
- meta image 는 절대 주소로 입력해야한다.
- og 태그 말고 twitter card 태그도 작성해야 한다.
아... 둘 다 안 했었네... 🥹
바로 수정해줬다.
무료 이미지 호스팅 / 이미지 업로드
이미지를 업로드 하고공유해보세요. 원하는 곳 어디든 끌어놓기로 이미지를 바로 업로드해보세요.(이미지당 32 MB 가능) 다이렉트 링크, BBCode 및 HTML 미리보기등을 제공해드립니다.
imgbb.com
이미지 호스팅 사이트에서 업로드를 해준 뒤 절대주소를 얻는다.
밑에 것들을 <head></head> 사이에 넣어준다.
// 썸네일에 뜰 것들 제목, 내용, 이미지
<meta property="twitter:title" content="제목" />
<meta name="twitter:image" content="이미지 절대주소" />
<meta property="twitter:description" content="사이트 설명" />
// 이미지 크기 크거나 작을 때 조절
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:card" content="summary">
해결!
'TIL' 카테고리의 다른 글
| TIL 2023-10-05 CSS 부모요소 자식 요소 크기에 맞추기 (0) | 2023.10.05 |
|---|---|
| TIL 2023 - 10 - 04 깃, 깃허브 사용법 (0) | 2023.10.04 |
| 나의 미래 신문 홈페이지 (0) | 2023.09.28 |
| 내일배움캠프 9기 자바스프링 사전캠프 웹 개발 AtoZ 5주차 (0) | 2023.09.25 |
| 내일배움캠프 9기 자바스프링 사전캠프 웹 개발 AtoZ 4주차 (0) | 2023.09.25 |
