Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Refactor/#652: SEO 최적화 및 head 옵션 검토 #653

Merged
merged 7 commits into from
Feb 12, 2024
Merged

Refactor/#652: SEO 최적화 및 head 옵션 검토 #653

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
1acc46c
fix: queryClient 중복 오류 제거
semnil5202 Feb 10, 2024
a742f48
refactor: 사용하지 않는 daum POI 검색 제거
semnil5202 Feb 10, 2024
cb863f9
refactor: favicon s3 에서 local 로 변경
semnil5202 Feb 10, 2024
74d2355
refactor: script 태그 위치 조정 DOM 파싱 중단 여부에 따른 위치조정
semnil5202 Feb 10, 2024
95df6ba
refactor: keyword, description 추가
semnil5202 Feb 10, 2024
5fe1cb8
feat: open graph meta 태그 적용
semnil5202 Feb 10, 2024
f11be33
refactor: image 태그 alt 누락 일괄 적용
semnil5202 Feb 10, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
37 changes: 27 additions & 10 deletions frontend/public/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,19 +2,41 @@
<html lang="ko">
<head>
<base href="/" />
<link
rel="icon"
href="https://dr702blqc4x5d.cloudfront.net/2023-map-be-fine/icon/favicon.svg"
/>
<link rel="icon" href="./mapbefine_favicon.svg" />
<meta charset="utf-8" />
<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" />

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

티맵 api가 먼저 로딩안되도 되서 이렇게 되는건가여?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

음 결과적으로 말씀드리면 먼저 로딩이 됩니다. 그 브라우저 렌더링 순서대로 가보면

DOM 파싱 + CSSOM 중에 script 태그 만나면 파싱 중단되잖습니까? 근데 저희는 SPA 방식이니 메인 번들 자바스크립트가 읽혀야 DOM에 그려져서 결과적으로

DOM 파싱 -> script 태그 -> script 로딩 완료 -> 자바스크립트 메인 번들 읽힘 -> 화면 렌더링

순으로 추측 하고있습니다. 추측인 이유는.. 제가 실험한 결과를 기반으로 결론을 낸 것이라 그렇습니다. 혹시 잠재적인 오류가 있다면 알려주세요~

image

위 이미지 보시면 main.bundle.js 진입점에 브레이크 포인트 걸고 DOM 파싱된 결과입니다. 보다싶이 tmap script 태그가 이미 렌더링 된 이후라서 문제가 없는 것 같습니다.

<title>괜찮을지도</title>
<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" />
Comment on lines +12 to +30
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

메타 태그 추가 너무 좋습니다!

</head>
<body>
<div id="root"></div>

<!-- T Map -->
<script
script
src="https://apis.openapi.sk.com/tmap/vectorjs?version=1&&appKey=P2MX6F1aaf428AbAyahIl9L8GsIlES04aXS9hgxo"
></script>
<script src="//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>

<!-- Google tag (gtag.js) -->
<script
Expand All @@ -30,10 +52,5 @@

gtag('config', 'G-5BQ0F8QB8B');
</script>

<title>괜찮을지도</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
11 changes: 11 additions & 0 deletions frontend/public/mapbefine_favicon.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added frontend/public/mapbefine_og_image.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion frontend/src/components/MyInfo/UpdateMyInfo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ function UpdateMyInfo({
$justifyContent="center"
$alignItems="center"
>
<MyInfoImg src={myInfo.imageUrl} />
<MyInfoImg src={myInfo.imageUrl} alt="내 프로필 이미지" />
<Space size={5} />
<Box>
<MyInfoInput value={myInfo.nickName} onChange={onChangeMyInfoName} />
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/components/PinImageContainer/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -116,7 +116,7 @@ function PinImageContainer({ images, getPinData }: PinImageContainerProps) {
{isModalOpen && (
<ImageModal closeModalHandler={closeModal}>
<ModalImageWrapper>
<ModalImage src={modalImage} />
<ModalImage src={modalImage} alt="선택한 장소 이미지" />
<Space size={3} />
<Button variant="custom" onClick={closeModal}>
닫기
Expand Down
3 changes: 3 additions & 0 deletions frontend/src/components/common/Input/SingleComment.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -111,6 +111,7 @@ function SingleComment({
<Flex $gap="12px">
<ProfileImage
src={comment.creatorImageUrl}
alt="프로필 이미지"
width="40px"
height="40px"
/>
Expand Down Expand Up @@ -202,6 +203,7 @@ function SingleComment({
<div style={{ display: 'flex', gap: '12px' }}>
<ProfileImage
src={user?.imageUrl || ''}
alt="프로필 이미지"
width="40px"
height="40px"
/>
Expand All @@ -228,6 +230,7 @@ function SingleComment({
<Flex>
<ProfileImage
src={replyList[0].creatorImageUrl || ''}
alt="프로필 이미지"
width="28px"
height="28px"
/>
Expand Down
2 changes: 0 additions & 2 deletions frontend/src/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,8 +33,6 @@ if (process.env.REACT_APP_GOOGLE_ANALYTICS) {
ReactGA.initialize(process.env.REACT_APP_GOOGLE_ANALYTICS);
}

const queryClient = new QueryClient();

root.render(
<QueryClientProvider client={queryClient}>
<ThemeProvider theme={theme}>
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/pages/NewTopic.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -190,7 +190,7 @@ function NewTopic() {
<Flex>
{showImage && (
<>
<ShowImage src={showImage} alt="사진 이미지" /> <Space size={2} />{' '}
<ShowImage src={showImage} alt="지도 이미지" /> <Space size={2} />{' '}
</>
)}

Expand Down
Loading