Merge pull request #294 from oduck-team/chore/279

chore: SEO를 위한 기타 설정
oduck-team · Nov 14, 2023 · 2bb7551 · 2bb7551
2 parents c0ffbcf + 73b0a77
commit 2bb7551
Show file tree

Hide file tree

Showing 8 changed files with 76 additions and 56 deletions.
diff --git a/index.html b/index.html
@@ -1,4 +1,4 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="ko">
   <head>
     <meta charset="UTF-8" />

diff --git a/public/apple-touch-icon.png b/public/apple-touch-icon.png
diff --git a/public/robots.txt b/public/robots.txt
@@ -0,0 +1,2 @@
+User-agent: *
+Allow: /
diff --git a/src/components/Head/index.tsx b/src/components/Head/index.tsx
@@ -3,11 +3,13 @@ import { Helmet } from "react-helmet-async";
 interface HeadProps {
   title?: string;
   description?: string;
+  image?: string;
 }
 
 export default function Head({
   title = "오덕 | 애니 리뷰 커뮤니티",
-  description = "",
+  description = "애니 리뷰 커뮤니티 오덕입니다. 애니 리뷰를 중심으로 다양한 애니 커뮤니티를 만나보세요.",
+  image = "https://oduck.io/logo/logo-rect.png",
 }: HeadProps) {
   return (
     <Helmet>
@@ -19,11 +21,14 @@ export default function Head({
       <meta property="og:url" content="https://oduck.io" />
       <meta property="og:title" content={title} />
       <meta property="og:description" content={description} />
+      <meta property="og:image" content={image} />
 
       {/* Twitter meta tag list */}
       <meta property="twitter:domain" content="https://oduck.io"></meta>
       <meta name="twitter:title" content={title} />
       <meta name="twitter:description" content={description} />
+      <meta name="twitter:card" content="summary_large_image" />
+      <meta name="twitter:image" content={image} />
     </Helmet>
   );
 }
diff --git a/src/features/animes/routes/Detail/index.tsx b/src/features/animes/routes/Detail/index.tsx
@@ -1,5 +1,6 @@
 import { useParams } from "react-router-dom";
 
+import Head from "@/components/Head";
 import Loader from "@/components/Loader";
 import SectionDivider from "@/components/SectionDivider";
 import useGetAnimeReviews from "@/features/reviews/hook/useGetAnimeReviews";
@@ -32,33 +33,36 @@ export default function AnimeDetail() {
 
   if (anime)
     return (
-      <AnimeDetailContainer>
-        {/* TODO: 평점 */}
-        <Hero {...anime} starScoreAvg={10} />
-        <SectionDivider />
+      <>
+        <Head title={`${anime.title} | 오덕`} image={anime.thumbnail} />
+        <AnimeDetailContainer>
+          {/* TODO: 평점 */}
+          <Hero {...anime} starScoreAvg={10} />
+          <SectionDivider />
 
-        {/* 줄거리 및 정보 */}
-        <PlotAndInfo
-          {...anime}
-          voiceActors={anime.voiceActors.map((actor) => actor.name)}
-        />
-        <SectionDivider />
+          {/* 줄거리 및 정보 */}
+          <PlotAndInfo
+            {...anime}
+            voiceActors={anime.voiceActors.map((actor) => actor.name)}
+          />
+          <SectionDivider />
 
-        {/* 평점 */}
-        <Ratings />
-        <SectionDivider />
+          {/* 평점 */}
+          <Ratings />
+          <SectionDivider />
 
-        {/* 리뷰 목록 */}
-        <Reviews
-          reviews={reviews?.pages ?? []}
-          isLoading={isLoading}
-          totalReviewCount={anime.reviewCount}
-          sortOptions={SORT_OPTION}
-          selectedOption={selectedSortOption}
-          handleChipClick={handleChipClick}
-        />
-        <div ref={targetRef}></div>
-        {isLoading && <Loader display="oduck" />}
-      </AnimeDetailContainer>
+          {/* 리뷰 목록 */}
+          <Reviews
+            reviews={reviews?.pages ?? []}
+            isLoading={isLoading}
+            totalReviewCount={anime.reviewCount}
+            sortOptions={SORT_OPTION}
+            selectedOption={selectedSortOption}
+            handleChipClick={handleChipClick}
+          />
+          <div ref={targetRef}></div>
+          {isLoading && <Loader display="oduck" />}
+        </AnimeDetailContainer>
+      </>
     );
 }
diff --git a/src/features/common/routes/Error/404/index.tsx b/src/features/common/routes/Error/404/index.tsx
@@ -1,3 +1,5 @@
+import Head from "@/components/Head";
+
 import {
   NotFoundContainer,
   Content,
@@ -8,18 +10,21 @@ import {
 
 export default function NotFound() {
   return (
-    <NotFoundContainer>
-      <Content>
-        <div>
-          <ErrorImage src="/logo/logo-empty.png" alt="error" />
-        </div>
-        <Message>페이지를 찾을 수 없어요</Message>
-        <div>
-          <HomeButton size="lg" to="/" reloadDocument>
-            홈으로
-          </HomeButton>
-        </div>
-      </Content>
-    </NotFoundContainer>
+    <>
+      <Head title="오덕 | 404" />
+      <NotFoundContainer>
+        <Content>
+          <div>
+            <ErrorImage src="/logo/logo-empty.png" alt="error" />
+          </div>
+          <Message>페이지를 찾을 수 없어요</Message>
+          <div>
+            <HomeButton size="lg" to="/" reloadDocument>
+              홈으로
+            </HomeButton>
+          </div>
+        </Content>
+      </NotFoundContainer>
+    </>
   );
 }
diff --git a/src/features/common/routes/Home/Discord/index.tsx b/src/features/common/routes/Home/Discord/index.tsx
@@ -5,7 +5,7 @@ export default function Discord() {
     <DiscordContainer>
       <a
         target="_blank"
-        href="https://discord.gg/h2aXh2hx"
+        href="https://discord.gg/wY6YZbTUn4"
         rel="noopener noreferrer"
       >
         <div>

diff --git a/src/features/common/routes/Home/index.tsx b/src/features/common/routes/Home/index.tsx
@@ -2,6 +2,7 @@ import styled from "@emotion/styled";
 import { useNavigate } from "react-router-dom";
 
 import Button from "@/components/Button";
+import Head from "@/components/Head";
 import AnimeCarousel, {
   AnimeWithReview,
 } from "@/features/animes/components/AnimeCarousel";
@@ -165,21 +166,24 @@ export default function Home() {
   };
 
   return (
-    <HomeContainer>
-      <AnimeCarousel animes={carouselAnimes} />
-      <AnimeRanking title="이번주 TOP10" contents={rankingAnimes} />
-      <Discord />
-      <AnimeSlide title="2023년 3분기 신작" animes={slideAnimes} />
-      <RecentReview />
-      <AnimeSlide title="덕후들의 눈물샘을 터뜨린" animes={slideAnimes} />
-      <AnimeSlide title="이불밖을 못 나오게 하는" animes={slideAnimes} />
-      <Bottom>
-        <span>감명 깊게 본 애니를 다른 회원님들과 공유해보세요!</span>
-        <Button name="리뷰" size="lg" onClick={handlerReviewButtonClick}>
-          한줄리뷰 남기러가기
-        </Button>
-      </Bottom>
-    </HomeContainer>
+    <>
+      <Head />
+      <HomeContainer>
+        <AnimeCarousel animes={carouselAnimes} />
+        <AnimeRanking title="이번주 TOP10" contents={rankingAnimes} />
+        <Discord />
+        <AnimeSlide title="2023년 3분기 신작" animes={slideAnimes} />
+        <RecentReview />
+        <AnimeSlide title="덕후들의 눈물샘을 터뜨린" animes={slideAnimes} />
+        <AnimeSlide title="이불밖을 못 나오게 하는" animes={slideAnimes} />
+        <Bottom>
+          <span>감명 깊게 본 애니를 다른 회원님들과 공유해보세요!</span>
+          <Button name="리뷰" size="lg" onClick={handlerReviewButtonClick}>
+            한줄리뷰 남기러가기
+          </Button>
+        </Bottom>
+      </HomeContainer>
+    </>
   );
 }