[Ops] Improve Search Engine Optimization with semantic HTML and structured data

[Copilot]

SEO 최적화: 시맨틱 HTML 및 구조화된 데이터 개선

---

🏄🏼‍♂️‍ Summary (요약)

• 검색 엔진 최적화를 위해 중복 메타 태그 제거, JSON-LD 구조화 데이터 추가, 시맨틱 HTML 적용, 이미지 접근성 개선

🫨 Describe your Change (변경사항)

HTML 메타 태그 최적화

• 중복된 Open Graph 및 Twitter Card 메타 태그 제거
• 외부 리소스(CDN, Kakao, Apple) preconnect/dns-prefetch 추가로 성능 개선

구조화된 데이터 (JSON-LD)

• Schema.org WebApplication 마크업 추가
• 애플리케이션 정보(이름, 카테고리, 설명, 가격) 포함
• 검색 엔진 가이드라인 준수

시맨틱 HTML 개선

• MainPage.tsx: 클릭 가능한 div → Button 컴포넌트, main/section/h1 시맨틱 태그 적용
• UserBox.tsx: 클릭 가능한 div → button 요소 (aria-label 포함)

이미지 접근성

• 모든 이미지에 설명적인 alt 텍스트 추가
  • UserProfileIcon: "사용자 프로필"
  • SpaceOverview: 동적 alt (스페이스 이름 포함)
  • TemplateCard (mobile/desktop): 동적 alt (템플릿 이름 포함)

// Before
<div onClick={handleClick}>
  <img src={imageUrl} />
</div>

// After
<button type="button" aria-label="내 정보 수정하기" onClick={handleClick}>
  <img src={imageUrl} alt={`${name} 프로필`} />
</button>

🧐 Issue number and link (참고)

• #[issue_number]

📚 Reference (참조)

• Schema.org WebApplication
• MDN Semantic HTML

Original prompt

---

This section details on the original issue you should resolve

<issue_title>[Ops] Improve Search Engine Optimization</issue_title>
<issue_description>Act as an SEO expert specialized in React and Next.js.

Optimize this component/page for SEO.

• Use semantic HTML instead of generic divs.
• Optimize metadata (title, meta description, Open Graph).
• Ensure only one h1 exists and reflects the main keyword.
• Improve text content for search intent and readability.
• Ensure images use optimized alt text.
• Consider Core Web Vitals and hydration-safe patterns.

Return the optimized React/Next.js code only.</issue_description>

Comments on the Issue (you are @copilot in this section)

• Fixes [Ops] Improve Search Engine Optimization #783

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

[coderabbitai]

Important

Review skipped

Auto reviews are limited based on label configuration.

🏷️ Required labels (at least one) (1)

• Not Rabbit

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}