HTML | 메타데이터 : 검색 최적화, 문자 인코딩, 모바일 반응성, 오픈 그래프(The Open Graph protocol)

⭕ HTML | 메타데이터 : 검색 최적화, 문자 인코딩, 모바일 반응성, 오픈 그래프(The Open Graph protocol)

➡️ 좋은 메타데이터란?

• 웹 페이지의 내용을 정확하게 반영하고, 사용자가 검색할 만한 키워드를 포함하는 것
• 다양한 레퍼런스를 살펴보면, 사용자가 클릭할 만한, 너무 길지 않은 등의 요소가 중요하다는 점을 강조함
• 결론적으로 정답이 있다기보다는, 정확하고 사용자의 이목을 끌 만한 키워드가 포함되어야 한다고 생각됩니다. ✨

 

➡️ 문자 인코딩

• 문자 인코딩을 UTF-8로 설정함
• UTF-8은 대부분의 문자를 표현할 수 있는 인코딩 방식으로, 글로벌 콘텐츠에 권장함

<meta charset="UTF-8">

 

➡️ 모바일 뷰포트

• 모바일 장치의 뷰포트를 설정함
• 반응형 디자인에 필수적임

<meta name="viewport" content="width=device-width, initial-scale=1.0">

 

 

➡️ 파비콘(favicon)

• 프로젝트 루트 폴더에 favicon.ico 파일을 위치함
• 파비콘 사이즈는 192 x 192임
• 화질이 좋은 파비콘을 원할 경우 PNG 파일 형식을 사용함

 

➡️ 오픈 그래프(The Open Graph protocol)

• 웹 페이지를 소셜 미디어로 공유할 때 사용함
• Facebook에 의해 만들어진 프로토콜
• <script> 태그보다 상단에 배치하는 것을 권장함
• 주요 구성
  1. og:type: 페이지의 유형 (예: website, video.movie)
  2. og:site_name: 페이지가 속한 사이트의 이름
  3. og:title: 페이지의 제목, 사이트의 이름과 다를 수 있음
  4. og:description: 페이지에 대한 간단한 설명, 잘못 작성 시 악성 페이지로 인식될 수 있음
  5. og:image: 페이지의 대표 이미지 URL
  6. og:url: 페이지의 실제 URL, 명시한 URL과 다를 수 있음

<meta property="og:type" content="website" />
<meta property="og:site_name" content="Starbucks" />
<meta property="og:title" content="Starbucks Coffee Korea" />
<meta property="og:description" content="스타벅스는 세계에서 가장 큰 다국적 커피 전문점으로, 64개국에서 총 23,187개의 매점을 운영하고 있습니다." />
<meta property="og:image" content="./images/starbucks_seo.jpg" />
<meta property="og:url" content="https://starbucks.co.kr" />