seo 검색엔진 최적화 시키기

최적화 하기

• Target keywords를 첫 100~150 자 내에 포함 시키기
  google은 페이지 초반에 나타나는 키워드에 더 가중치를 준다.
• h1 tag를 쓰면 구글이 문서를 이해하기가 더 쉽다
  글의 타이틀을 h1 태그에 포함시키는 것이 좋다
• 타겟 키워드를 최소 하나의 subheading(h2)에 포함시키자
  타겟 키워드를 자주 등장시키자
• meta tag중 title과 description 태그를 최적화 하자
• h1 태그, h2 태그를 적절히 사용
• 타겟키워드를 페이지의 앞부분에 포함
• meta tag중 title과 description을 잘 사용
• react-helmet, react-helmet-async 패키지를 사용
• 중복되지 않게 index.html파일에 같은 내용 삭제하기

• index.tsx에서 HelmetProvider를 감싸기

const root = ReactDOM.createRoot(
  document.getElementById("root") as HTMLElement
);
root.render(
  <React.StrictMode>
    <HelmetProvider>
      <App />
    </HelmetProvider>
  </React.StrictMode>
);

//App.tsx
<div>
 <Helmet>
  //실제 사이트 탭 제목
        <title>sumin practice</title>
//구글에 검색했을때 나오는 설명들
        <meta name="description" content="프론트엔드 과제 사이트" />
        <meta name="keywords" content="개발자, 과제, 부트캠프, 프론트엔드" />

          //오픈그래프 설정
        <meta property="og:type" content="website" />
        <meta property="og:title" content="title sumin practice" />
        <meta property="og:site_name" content="site_name sumin practice" />
        <meta property="og:description" content="description sumin practice" />
        <meta property="og:image" content="../public/logo192.png" />
        <meta
          property="og:url"
          content="https://react-practice-iota-nine.vercel.app/"
        />

            //트위터 태그 추가
        <meta name="twitter:title" content="Twitter Title" />
        <meta name="twitter:description" content="Twitter Description" />
        <meta name="twitter:image" content="/public/image/IMG_5916.jpg" />
        <meta name="twitter:card" content="summary_large_image" />
      </Helmet>
   <h1>프론트엔드 개발자 과제 사이트</h1>
      <h2>프론트엔드 개발자 sumin 과제 입니다!</h2>
</div>

seo최적화 체크 사이트