[Refactor] SEO 최적화

[Arkingco]

Description

당신의 코드베이스는 이미 메타 태그를 사용한 설명, 키워드, 오픈 그래프(OG) 태그 등 SEO 최적화를 위한 여러 좋은 관행을 포함하고 있습니다. 그러나 개선할 수 있는 몇 가지 영역이 있습니다:

1. 메타 태그의 오타 수정: Description.tsx에서, robots와 googlebot 메타 태그의 content 속성에 오타가 있습니다. index,fllow 대신 index,follow가 되어야 합니다.

   13|      <meta name="robots" content="index,follow" />
   14|      <meta name="googlebot" content="index,follow" />

2. OG 이미지에 절대 URL 사용: OpenGraph.tsx에서, og:image와 twitter:image의 content는 상대 경로 대신 절대 URL이 되어야 합니다. 이는 소셜 미디어 플랫폼이 이미지를 올바르게 찾아서 표시할 수 있도록 보장하기 위함입니다.

   10|      <meta property="og:image" content="https://strcat.me/OG.png" />
   20|      <meta name="twitter:image" content="https://strcat.me/OG.png" />

3. 구조화된 데이터 추가: 구조화된 데이터는 검색 엔진이 페이지의 내용을 이해하는 데 도움이 됩니다. 블로그 게시물의 경우 @type WebSite 또는 Article을 사용하는 것과 같이 웹사이트에 대한 보다 자세한 정보를 위해 JSON-LD 구조화된 데이터를 추가하는 것을 고려해보세요.

4. 접근성 보장: SEO는 좋은 접근성 관행에서도 이점을 얻습니다. 모든 이미지에 설명적인 alt 속성이 있는지 확인하고, 키보드 및 화면 독자 사용자를 위해 대화형 요소가 접근 가능한지 확인하세요. 이는 SEO를 개선할 뿐만 아니라 웹 접근성 표준을 준수하는 데에도 좋습니다.

5. 페이지 로드 성능 개선: 제공된 코드 스니펫에 직접적으로 나타나지 않지만, 페이지 로드 시간을 최적화함으로써 SEO 순위를 개선할 수 있습니다. 이는 이미지 최적화, CSS 및 JavaScript의 최소화, 브라우저 캐싱 활용을 포함합니다.

6. 시맨틱 HTML 사용: HTML 마크업이 의미론적이고 적절하게 구조화되어 있는지 확인하세요. 페이지의 영역을 정의하기 위해 <header>, <footer>, <nav>, <main> 태그를 사용하세요. 이는 검색 엔진이 콘텐츠의 구조를 더 잘 이해하는 데 도움이 됩니다.

이러한 영역을 해결함으로써 검색 엔진을 위해 웹사이트를 더욱 최적화하고 SEO 성능을 향상시킬 수 있습니다.

To do

• [ ] 메타테그 오타 수정
• [ ] OG 이미지에 절대 URL 사용
• [ ] 페이지 로드 성능 개선