js 공부(ft. sparta)/5주차
5-10. og 태그
c_sm
2023. 4. 25. 20:35
우리가 만든 팬명록 서비스를 클라우드 환경으로 올리기전에(즉 모든 사람에게 공개하기전에)
og태그를 만들어보도록 한다.
og태그들을 만들어두면 우리가 사이트를 뿌리게 될때 만들어진 og:title, og:name 등이 나오기 때문에 좀더 그럴싸해 보이게된다.
먼저 og태그 넣기 코드를 복사해서 index.html에서 title 바로 밑에다가 붙여준다.
<meta property="og:title" content="내 사이트의 제목" />
<meta property="og:description" content="보고 있는 페이지의 내용 요약" />
<meta property="og:image" content="이미지URL" />
그리고 구글에 자신이 좋아하는 가수의 공연 이미지를 찾는다.
오른쪽을클릭해서 이미지주소를 복사한다.
https://img.hankyung.com/photo/202209/01.31260167.1.jpg
이 url을 이미지 url을 지우고 대신 넣어준다.
<meta property="og:title" content="내 사이트의 제목" />
<meta property="og:description" content="보고 있는 페이지의 내용 요약" />
밑으로 내려가보면 background에도 똑같은것을 붙여넣어준다.
현재 있는건 가수 10cm 이기때문이다.
그리고 더 아래로 내려가서 title도 바꿔주고,
다시 위로 올라와서 아래 코드처럼 수정해준다.
<meta property="og:title" content="아이유 팬명록" />
<meta property="og:description" content="아티스트에게 응원 한마디!" />
저장후 가서 확인해보면 아래와 같이 바뀐것을 볼 수 있다.
이제 우린 배포를 해볼꺼다.
이 페이지가 친구들도 볼 수 있도록 말이다.
다음시간에 같이해보도록 한다.