CSR์ ๋ํ์ ์ธ ๋จ์ ์ค ํ๋์ธ ์ทจ์ฝํ SEO ์ ์์ ๋ชจ๋ ์ฌ๋๋ค์ด ์ฌ์ฉํ ์ ์๋ ์๋น์ค๋ฅผ ๋ง๋ค๊ธฐ ์ํ ์น ์ ๊ทผ์ฑ ๊ฐ์ ์์ ์ ์ํํด์ผํ๋ค.
SEO : ๊ฒ์์์ง ์ต์ ํ
๐ React์ SEO
๋ฆฌ์กํธ์ ๊ฐ์ SPA๋ SSR๊ณผ๋ ๋ฌ๋ฆฌ, ์ด๊ธฐ์ HTML์ด ์ต์ํ์ ๋ด์ฉ์ ํฌํจํ๊ณ , ๋๋ถ๋ถ์ ์ฝํ ์ธ ๋ JS๋ฅผ ํตํด ํด๋ผ์ด์ธํธ์ธก์์ ๋ ๋๋ง์ด ๋๋ ๋ฐฉ์์ด๋ค. ๋ชจ๋ ํฌ๋กค๋ฌ๊ฐ ์๋ ๋ง์ ํฌ๋กค๋ฌ๋ค์ด JS๋ฅผ ์ง์ํ์ง ์๊ธฐ ๋๋ฌธ์ ์ด์ ๊ฐ์ ๋ฌธ์ ๊ฐ ๋ฐ์ํ๋ค๊ณ ํ๋ค.(๊ตฌ๊ธ๋ด์ JS๋ฅผ ์ง์ํด์ SEO๊ฐ ๋์์ง ์๋ค๊ณ ํจ)
โจ ํด๊ฒฐ ๋ฐฉ๋ฒ
1. meta ํ๊ทธ ๊ด๋ฆฌ
3. Sitemap ์์ฑ
React-Helmet
import { Helmet } from "react-helmet-async";
interface SEOMetaTagProps {
title?: string;
description: string;
keywords?: string;
imgsrc?: string;
url: string;
}
function SEOMetaTag({
title = "๋ฉ๋ฅ์ํ | ๋ฐ๋ ค๋๋ฌผ ์ปค๋ฎค๋ํฐ",
description,
keywords,
imgsrc = "https://tools.bemypet.kr/static/media/regist_samsek_lili.6a0e7afd4dac533b2c07.png",
url = "https://dev-meongnyang-life.vercel.app",
}: SEOMetaTagProps) {
return (
<Helmet>
<title>{title}</title>
<meta name="description" content={description} data-react-helmet="true" />
<meta name="keywords" content={keywords} />
<meta property="og:type" content="website" />
<meta property="og:title" content={title} />
<meta property="og:site_name" content={title} />
<meta property="og:description" content={description} />
<meta property="og:image" content={imgsrc} />
<meta property="og:url" content={url} />
<meta name="twitter:title" content={title} />
<meta name="twitter:description" content={description} />
<meta name="twitter:image" content={imgsrc} />
<link rel="canonical" href={url} />
</Helmet>
);
}
export default SEOMetaTag;
SEOMetaTag์ ์ปดํฌ๋ํธ๋ฅผ ์์ฑํ์ฌ, ๊ฐ ํ์ด์ง๋ง๋ค ์ง์ ํด์ฃผ์๋ค.
robots.txt
๊ฒ์ ์์ง ํฌ๋กค๋ฌ์๊ฒ ์ฌ์ดํธ์ ํน์ ๋ถ๋ถ์ ํฌ๋กค๋งํ์ง ์๊ฑฐ๋, ์ธ๋ฑ์ฑํ์ง ์๋๋ก ์ง์ํด์ฃผ๋ ์ญํ ์ ํ๋ฉฐ, ๊ฐ์ธ์ ๋ณด๋ฅผ ํฌํจํ๊ฑฐ๋ ๊ฐ์ธํ ํ์ด์ง๋ ์ ์ธํ์ฌ, ๊ฒ์์์ง์ ์ธ๋ฑ์ฑ ๋์ง์๋๋ก ํ์๋ค.
User-agent: *
Disallow: /signup
Disallow: /find/pw
Disallow: /profiles/create
Disallow: /profiles/update
Disallow: /posts/create
Disallow: /posts/update
Disallow: /likes
Disallow: /bookmarks
Allow: /
Sitemap: https://dev-meongnyang-life.vercel.app/sitemap.xml
logInํ์ด์ง๋ ์๋น์ค์ indexํ์ด์ง ์ด๊ธฐ ๋๋ฌธ์ ์ ์ธํ์์ผ๋ฉฐ, ์ ์ ํ์ด์ง(profiles/:userId) ๋ ์ฃผ๋ก ์๋น์ค ํน์ฑ ์, ์ ์ ๊ฐ ์๋ ๋ฐ๋ ค๋๋ฌผ์ ์ ๋ณด๊ฐ ๋ ธ์ถ๋๊ธฐ ๋๋ฌธ์ ๊ฒ์์์ง Allow ํ์๋ค
๐๐ป ๋ถํ์ํ ํ์ด์ง๋ฅผ ์ฐจ๋จํ์ฌ, ๊ฒ์์์ง์ ์์์ ๋ ์ค์ํ ํ์ด์ง์ ํฌ์ปค์ค ์ํด์ผ๋ก์จ, SEO ์ต์ ํ์ ๋์์ด ๋๋ค.
Sitemap
๋ํ์ ์ผ๋ก ๋ง์ด ์ฌ์ฉ๋๋ XML-Sitemaps๋ฅผ ํ์ฉํด, ์ฌ์ดํธ๋งต์ ์์ฑํ์๋ค.
๐ ๋ง์ ์ผ๋ก SEO ์ ์๋ฅผ ๋ณด์ํ ์ ์์๋ค.
์น ์ ๊ทผ์ฑ
โจ ํด๊ฒฐ ๋ฐฉ๋ฒ
1. ๋์ฒด ํ ์คํธ ์ ๊ณต
3. label๊ณผ ์ค๋ช ์ถ๊ฐ
4. ์์ ๋๋น ๊ฐ์
๐ ์ ๊ทผ์ฑ ์ ์๊ฐ 69์ →95์ ์ผ๋ก, ์ฝ 37% ๊ฐ์ ๋ ์ ์์๋ค.
'ํ๋ก์ ํธ' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
[react] ์ด๋ฏธ์ง ์ต์ ํํ๊ธฐ (0) | 2024.07.13 |
---|---|
๊ฒ์๋ฌผ ์ด๋ฏธ์ง CLS ๊ฐ์ (0) | 2024.07.11 |
Firebase ๋ถ๋ถ ๋ฌธ์ ๊ฒ์๊ธฐ๋ฅ ๊ตฌํ (0) | 2024.07.11 |
code Splitting, prefetch ๋ก๋ฉ์๋ ๊ฐ์ (0) | 2024.07.10 |
[react-query] ์ข์์ ๊ธฐ๋ฅ ์ต์ ํํ๊ธฐ (0) | 2024.07.02 |