Refactor/#652: SEO 최적화 및 head 옵션 검토 #653
Conversation
| <meta | ||
| name="keyword" | ||
| content="지도, 붕어빵, 카페, 관심사, 맛집, 명소, 기록, 모아보기, 공유" | ||
| /> | ||
| <meta | ||
| name="description" | ||
| content="내 관심사로 지도를 만들어보세요. 여러 지도를 한 번에 모아볼 수도 있고, 공개된 다른 지도에서 마음에 드는 장소만 뽑아서 내 지도에 추가할 수도 있어요." | ||
| /> | ||
|
|
||
| <meta property="og:title" content="괜찮을지도" /> | ||
| <meta | ||
| property="og:description" | ||
| content="내 관심사로 지도를 만들어보세요." | ||
| /> | ||
| <meta property="og:locale" content="ko_KR" /> | ||
| <meta property="og:url" content="https://mapbefine.com/" /> | ||
| <meta property="og:type" content="website" /> | ||
| <meta property="og:site_name" content="괜찮을지도" /> | ||
| <meta property="og:image" content="./mapbefine_og_image.png" /> |
| @@ -7,6 +7,13 @@ | |||
| <meta name="theme-color" content="#000000" /> | |||
| <meta name="viewport" content="width=device-width, initial-scale=1" /> | |||
| <meta http-equiv="cache-control" content="max-age=31536000, no-cache" /> | |||
|
|
|||
There was a problem hiding this comment.
티맵 api가 먼저 로딩안되도 되서 이렇게 되는건가여?
There was a problem hiding this comment.
음 결과적으로 말씀드리면 먼저 로딩이 됩니다. 그 브라우저 렌더링 순서대로 가보면
DOM 파싱 + CSSOM 중에 script 태그 만나면 파싱 중단되잖습니까? 근데 저희는 SPA 방식이니 메인 번들 자바스크립트가 읽혀야 DOM에 그려져서 결과적으로
DOM 파싱 -> script 태그 -> script 로딩 완료 -> 자바스크립트 메인 번들 읽힘 -> 화면 렌더링
순으로 추측 하고있습니다. 추측인 이유는.. 제가 실험한 결과를 기반으로 결론을 낸 것이라 그렇습니다. 혹시 잠재적인 오류가 있다면 알려주세요~
위 이미지 보시면 main.bundle.js 진입점에 브레이크 포인트 걸고 DOM 파싱된 결과입니다. 보다싶이 tmap script 태그가 이미 렌더링 된 이후라서 문제가 없는 것 같습니다.
|
원래 src/assets 도 크게 의미는 없었는데 assets가 src 내부의 컴포넌트에서만 쓰이다 보니 그렇게 진행했습니다. 쓰다보니 문득 든 생각인데 저희가 보는 화면의 결과물은 build 된 결과물이므로 즉 index.html에서 사용하는 assets는 반드시 public 내에서만 있어야겠네요. src/assets는 build 되면 assets란 폴더 자체가 존재하지 않을 예정이니 저희가 따로 assets 폴더를 dist 결과물 내에 복사 붙여넣기 하지 않는이상 문제가 생길 것 같습니다. (확인해보니 dist에 assets가 없어서 해당 파일을 가져오지 못합니다.) 따라서 public 내에 위치해야만 하네요~~ |
작업 대상
📄 작업 내용
스크린샷
최적화 전 LightHouse 점수
Description, Keyword 추가 시
Open Graph meta 태그 추가했습니다.
현재 저희 서비스는 og 미적용이고 펀잇은 og 적용되어 있는데 비교해보면 다음과 같은 차이가 있습니다.
head에 사용된 favicon, image 경로 public 파일에 둔 것 괜찮나요?
원래 저희 이미지 소스는 src/assets로 두었는데 index.html에 사용된 소스는 public에 두었습니다. 이 부분에 대해서 의견 부탁드립니다.
📎 관련 이슈
close #652
레퍼런스