<3> head elements
필자가 자주 사용하는 <head> elements
웹사이트 작업을 하다보면 <head> elements 로 무엇을 넣어야 할지 고민할 때가 있습니다. 필자의 경우에는 우선 <meta> 항목으로는 아래 6가지 속성을 기본적으로 사용하는 편입니다.
<meta charset="utf-8">
<meta name="description" content="이 문서에 대한 설명">
<meta name="keywords" content="이 문서에 대한 키워드">
<meta name="author" content="웹 사이트 작성자 이름">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Head Elements</title>
최근에는 PC 뿐만 아니라 모바일 버전까지 고려한 반응형, 적응형 웹사이트 작업을 진행하는 경우가 많기 때문에 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 또한 기본값으로 넣어주고 있습니다.
위 속성값 중 keywords 의 경우에는 과거 검색 엔진에 잘 걸리기 위해서 낚시성 키워드를 사용하는 경우가 많아 검색 결과에 정확도를 떨어뜨렸기 때문에 구글 측에서는 keywords 에 대한 내용물을 검색엔진에 반영하고 있지 않습니다. 결론은 100% 필요한 요소는 아닙니다.
<head> elements 성지를 발견하다.
얼마전 우연히 페이스북에서 head elements 에 대해 정리한 Github 자료를 발견하였습니다. 내용을 살펴보면 크게 Recommended, Not Recommended, Do Not Use 로 elements 항목들을 구분하였습니다. ( 역시 해외에서도 Explorer 는 항상 문제가 되는 것 같습니다. -_-;;; )
여기에서는 기본적인 <head> elements 로 아래 4가지 속성이 꼭 들어가야 한다고 얘기하고 있습니다.
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Page Title</title>
그리고 <meta> 의 "keywords", "author" 속성값을 추천하지 않는 설명하고 있습니다. 특히 "author" 의 경우에는 아래 코드로 대체하는 것이 더 좋다고 얘기하고 있습니다.
<link rel="author"> or humans.txt file
<link> 는 HTML과 CSS 를 연결시켜주거나 favicon 을 적용시킬 때 사용되는 태그로만 이해하고 있었는데, 이렇게 수십개의 항목이 존재한다는 점에서 놀라웠습니다. 필자도 처음 보는 항목들이 많아서 천천히 살펴보고 싶었으나 내용도 많고 눈으로 해당 결과물을 즉각적으로 확인하기 힘들기 때문에 자세한 내용은 위 링크주소 내용을 살펴봐 주세요 ^^
결국 <head> elements 는 웹사이트 기획의도에 따라서 어떤 <meta>, <link> 속성값을 사용할지 결정된다는 것을 확인할 수 있습니다. 굳이 basic elements 를 결론짓자면 아래 코드처럼 정리해볼 수 있을 것 같습니다.
<meta charset="utf-8">
<meta name="description" content="이 문서에 대한 설명">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="author" href="humans.txt">
<title>Page Title</title>
물론 결론 저의 개인적인 생각이니 여러분이 자주 사용하는 스타일로 작성해주시면 됩니다. 다른 분들은 어떤 elements 를 주로 사용하는지 코멘트 남겨주셔도 좋을 것 같습니다. ^^
