[ Fix ] OG IMG 경로변경 -> 익스텐션으로 확인 완!

[yarimu]

#️⃣ Related Issue

Closes #292

✅ Done Task

• OG이미지를 보이게 하라!!!

☀️ New-insight

서진이가 말해준 방식을 잘 이해하진 못한듯 하여 추가적으로 방식을 찾아서 일단 해보았습니다..!

PR이나 이미지 업로드 플랫폼에 이미지를 업로드한 후 변환된 URL을 og:image에 적용 -> 코드에 반영해 이미지 URL만 변경
맞을까요?? 뭔가 이미지 업로드 플랫폼에 이미지를 업로드 한다는게 무서워서..

💎 PR Point

일단은 '서버측 리다이렉션 설정'방식으로 변경해 보았습니다..!
만약 이미지 경로가 /public/OG.jpeg와 같은 내부 경로에 있을 경우, 서버에서 외부 URL로 리다이렉션해 접근할 수 있도록 설정할 수도 있다고 합니다!!
예를 들어, Nginx?나 Apache 설정?을 통해 https://www.seonyak.com/og-image로 요청이 오면 /public/OG.jpeg로 리다이렉트해주는 것이라고 하는데.. 일단 서버친구에게 요청을 해야하는 부분일까요?? 이게 너무 투머치라면.. 서진이가 알려준 방식으로 변경하겠습니다..!!

아! 그리고 파비콘 폴더가 별도로 있길래 파비콘 파일 옮겨 두었습니당!

📸 Screenshot

[se0jinYoon]

음 . .
참고자료1

1. 위에 아티클 읽으면 이미지를 uri로 변환하라는게 뭔지 알거야!
   따로 이미지 변환 플랫폼을 쓸 필요는 없고, 우리 pr에 이미지 올리면 깃허브에서 링크로 바꿔주잖아! 그 링크 복사해서 content자리에 넣어주면 돼!

넥제이긴한데 참고해도 상관없을 거 같아!

2. 아니면 언니가 했던 방법대로 진행하려면 위에 아티클 참고해보면 좋을 것 같아! 이미지를 public 경로 아래에두고, 위 아티클에서 한 방법처럼 경로 지정해서 넣어주면 될 거 같아!

따로 서버에 요청할 필요는 없습니다 -!
이게 배포를 해봐야 확인할 수 있어서 . . (배포 안 하고 페이스북 이용해서 확인하는 방법도 있긴한데 내가 페북 아이디비번을 까먹어서 시도할 수 없었어 . .) 언니가 원래 접근했던 방식인 2번 방식으로 수정해서 우선 배포해보고, 적용안되면 1번 방식처럼 url 바꿔서 적용해봅시다!

참고해서 수정하면 말해주세요!

[lydiacho]

지나가던 나그네입니당 ~

로컬에서 OG image 확인해보는 방법이에요!

참고링크

요렇게 생긴 크롬 익스텐션 깔고,
로컬에서 프젝 실행시킨 상태에서 저 아이콘 누르면 임시 배포링크를 만들어줘요!

요놈 링크 복사해다가 일반 배포링크처럼 카톡에 붙여넣으면 메타태그 확인해볼 수 있습니다 ㅎ ㅎ

참고로 현재 상태는 og 이미지 안뜨고 있는 상황인데
제가 사소한거 쇽샥 해결해서 테스트해본 이미지입니당

언니의 공부(?)를 위해 어케 고쳤는지는 비밀 하겠습니다 ~ ~ ~

[yarimu]

두근
지금 에러페이지 거의 다 끝나서
에러페이지 변경사항 Pr만 날리고 얼른 해보겠슴당!!
지나가는 나그네님, 오마이리드 감사해요~!~!!

[yarimu]

서진님이 첨부해주신 아티클 잘 읽었습니다!!
덕분에 url변환 및 public방법 모두 제대로 이해할 수 있었습니다!!

승희님이 알려주신 익스텐션으로 반영확인 완료하였습니다!

맨 처음에 시도하던 절대경로 방식으로 해결했는데,

public 폴더가 프로젝트 최상위에 위치한 경우, 웹 서버에서 이미 public 폴더를 루트로 간주할 수 있어서 경로설정에서 public은 생략해도 된다고 하더라구요...

public삭제하니 잘 반영 되었습니다!!

모두모두 감사해요오💖