<head> 태그 안에 새롭게 메타 태그를 추가했다.
카카오톡 나와의 채팅에서 확인해본 결과, meta tag를 포함하지 않아 다소 밋밋하다는 생각이 들었다.
이에 따라 Open Graph 태그를 활용해 정보를 추가하는 비교적 간단한 작업을 진행했다.
한 가지 작업 중에 시간을 소비한 것은 og:image 태그를 사용할 때 이미지 경로르 어떻게 설정할지 몰라 잠시 헤맸다.
OG 태그는 name 대신 property, 이 외에는 그대로 content 속성을 사용하는데, og:image의 경우 해당 이미지가 보이는 파일 경로를 설정하는 부분을 명확히 이해하지 못했다. 이에 따라 이미지 경로를 상대 경로, src 속성 등을 활용해 바꾸어보았는데 잘못된 접근이었다.
SSR을 잘 이해하고 있으면 간단히 해결할 수 있는 문제였는데, content 내에 해당 이미지를 확인할 수 있는 절대경로, 즉 서버에서 랜더링 된 이미지의 경로를 그대로 넣어주면 되었다. 이를 확인할 수 있는 가장 간단한 방법은 배포된 페이지를 기준으로 이미지 경로를 그대로 넣어주면 된다.
내 웹 페이지를 예를 들어보자면, 내가 og:image로 사용할 이미지는 assets/me.jpeg였다. 이를 토대로 msshim.com/assets/me.jpeg링크를 content 속성에 입력하면 해결할 수 있는 아주 간단한 문제(..)였다.
개발자 심민섭의 포트폴리오 웹 페이지
프론트엔드 개발자 심민섭의 개인 포트폴리오 웹 페이지입니다. 프로젝트를 진행하면서 구현했던 부분과 어려웠던 점, 그리고 어떻게 극복했는지 서술되어 있습니다. 이력서 페이지에서 전체
msshim.com
'Project > 유지보수.리팩토링' 카테고리의 다른 글
| [포트폴리오 웹페이지]프로젝트 메타인지하기, 마이그레이션 준비 (0) | 2024.08.18 |
|---|---|
| [포트폴리오 웹 페이지] 웹사이트 리팩토링 (0) | 2023.06.08 |
댓글