✅ meta tag
👉 웹 서버와 웹 브라우저간에 상호 교환되는 정보를 정의하는데 사용.
👉 HTML 문서의 < head >와 < /head > 사이에 입력.
👉 (사이트의 디자인에는 전혀 영향을 미치지 않고) 문서가 어떤 내용을 담고 있고, 문서의 키워드는 무엇이며, 누가 만들었는지 등의 문서 자체의 특성을 담고 있다.
✅ meta tag 속성
http-equiv, name, content 3가지 속성이 있다.
1) http-equiv="항목명"
웹 브라우저가 서버에 명령을 내리는 속성으로 name 속성을 대신하여 사용될 수 있으며, HTML 문서가 응답 헤더와 함께 웹 서버로부터 웹 브라우저에 전송되었을 때에만 의미를 갖는다.
2) content="정보값"
meta 정보의 내용을 지정.
3) name="정보 이름"
몇 개의 meta 정보의 이름을 정할 수 있으며 지정하지 않으면 http-equiv 와 같은 기능을 한다.
✅ meta tag 종류
<meta name="Keywords" content="Web, html, 웹 표준" />
/* 검색 엔진에 의해 검색되는 단어를 지정 */
<meta name="Description" content="Web, html, 웹 표준, " />
/* 검색 결과에 표시되는 문자를 지정(페이지 설명/소개글 제공) */
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
/* 문자 코드의 종류 설정(utf-8은 모든 언어의 문자 지원) */
<meta http-equiv="refresh" content="30; url=http://(원하는 주소).com" />
ㅊ
/* meta http-equiv="refresh" 를 통해 해당 문서를 새로고침(refresh)할 시간 간격을 명시함(content="(n)") */
<meta name="robots" content="index, follow" />
/* 페이지를 색인화 하고, 링크 연결 */
/* 반대로 content="noindex, nofollow"로 지정하면 구글에서 자신의 사이트가 색인화 되거나 링크 연결이 되지 않도록 설정할 수 있다. 주로 사이트가 개발중일 때, 자신의 사이트 중 일부 페이지가 구글에 노출되길 원치 않을 때 사용. */
<meta name="author" content="(my name)" />
/* 페이지를 작성한 제작자명을 지정 */
<meta http-equiv="Email" content="naver@naver.com" />
/* 메일 주소 지정 */
<meta http-equiv="Pragma" content="no-cache" />
/* 캐쉬가 되지 않도록 정의 */
<meta http-equiv="viewport" content="width=device-width, initial-scale=1.0" />
/* 뷰포트 설정 - 화면 너비를 기기 너비에 맞추도록 정의 + 최초 업로드 시, 화면을 확대/축소하지 않고 웹페이지를 시작하라고 정의 */검색엔진 최적화(SEO)
✅ <title> 태그 활용
검색 시 제목 부분에 노출, 간결하고 정확하게 웹페이지의 특성 포함하기
✅ <meta name="Description" content="" />
검색 시 설명 부분에 노출, 1~2개의 문장이나 짧은 단락 사용하기(일반적인 설명 사용), 키워드만 나열하기
✅ <meta name="keywords" content="" />
웹페이지 문서에서 핵심 검색단어, 문서에 해당하는 키워드 추출하기
✅ url 구조를 효율적으로 구성
콘텐츠 내용이 잘 드러나도록 구성, 소문자 사용 권장, 단순화하기(과도한 키워드 반복X)
✅ link 활용
검색엔진에 노출을 많이 시키려면 링크를 많이 포함하기(링크를 통해서 다른 페이지로 이동하게 만들기).
웹페이지 제작시 사이트의 이동은 하이퍼텍스트를 이용(주의해야 할 점은 검색 엔진을 위한 것이 아닌, 사용자를 위한 콘텐츠를 작성해야 한다는 것)
사용자의 편의를 고려하지 않는 검색 엔진만을 위한 사이트는 오히려 검색 엔진으로부터 웹스팸으로 인정되어 차단될 수 있다.
