[HTML] 2. Netflix, Nomad Coder 홈페이지로 <meta> 태그 알아보기

 

<meta> 태그

• 문서 그 자체를 설명하는 태그이다.
• 어떤 내용을 담고 있고,
• 그 문서의 핵심 키워드는 무엇이며,
• 누가 만들었는지,
• 언어 설정은 어떤 것을 사용하는지 등을 알 수 있다.
• Self-closing 태그이다.

 

넷플릭스 홈페이지에서 (크롬이라면) f12를 눌러 개발자 도구를 열면 이렇게 다양한 meta 태그가 사용된 것을 알 수 있다.

Netflix 페이지에서 사용된 <meta> 태그

<meta http-equiv="Content-Type" content="text/html"; charset=utf-8" />

• 해당 문서의 언어를 설정함.
• 과거 HTML4.01에서 사용하던 방식이며, HTML5에서는 <meta charset=utf-8" /> 로 사용한다.
• utf-8 은 유니코드를 8비트로 인코딩한다는 뜻이며, 웹페이지를 만들 때 기본으로 쓰인다.
• 한글이나 다른 특수문자가 있는 언어를 입력할 때 브라우저가 이를 이해할 수 있게 함.

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

• 렌더링 모드를 설정함.
• 인터넷 익스플로러 버전을 지정하도록 하는데, 이제는 Edge만 남을 예정이라 다음과 같이 작성하면 된다.

<meta name= viewport content= width=device-width initial-scale=1.0 minimum-scale=1.0>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">

1. viewport : iOS에서 페이지를 표시할 때 사용하며, 창 크기를 바꿈
2. apple-mobile-web-app-capable : 웹응용프로그램을 전체 화면에서 작동시킬지를 설정
3. apple-moblie-web-app-status-bar-style : 웹 응용프로그램을 위한 상태 막대의 스타일 설정
4. format-detection : iOS safari 웹페이지에서 가능한 전화번호의 자동 탐색의 가능/불가능 설정

 

<meta name="description" content="스마트 TV, 태블릿, 스마트폰, PC, 게임 콘솔 등 다양한 디바이스에서 영화와 TV 프로그램을 마음껏 즐기세요.">

• 문서를 소개함.
• 구글에 'Netflix' 를 검색하면 다음과 같은 설명글을 볼 수 있다고 한다.

<meta name="keyword" content="영화 보기, 온라인 영화, TV 시청, 인터넷 영화" />

• 홈페이지에 대한 키워드를 알려줌.
• 해시태그를 써서 검색 사이트에 노출시키도록 하는 원리와 비슷함.
• 검색 엔진의 검색 결과에 반영될 수 있다.
• SEO 에서는 중요함!

@Nomad Coder

Nomad Coder 페이지에서 사용된 <meta> 태그

<meta property="og:description" content="코딩은 진짜를 만들어보는거야!. 실제 구현되어 있는 서비스를 한땀 한땀 따라 만들면서 코딩을 배우세요!">

 

• OpenGraph는 웹페이지가 SNS 또는 오픈그래프를 활용한 사이트로 공유될 때 사용되는 정보이다.
• 예로 페이스북에 링크 붙여넣기, 카카오톡 링크 공유할 때 해당 게시물의 제목, 설명, 이미지가 간략히 보여진다.

 

이렇게!