잘 된 그리드 디자인이나 깔끔하게 코딩이 되어있는 홈페이지들을 훔쳐보던 중에 위에서부터 읽다보니
<head> 사이에 메타 네임(meta name)이 맨 먼저 보인다.
홈페이지에 대한 키워드를 읽어들인다는 역할은 대충 알고 있는데, 다양한 방식으로 쓰이는 것 같아 종류를 찾아보았다.
(1) 메타 태그(meta tag)란?
-자신의 홈페이지에 관한 정보를 메타태그를 통해 담아놓을 수 있다.
구글이나 검색 사이트에서 정보를 찾아주는 검색 로봇이 이 메타태그를 보고 찾아준단다.
메타태그를 잘 활용하면 내 홈페이지를 방문하는데 수월할 것이란다. 쓰는 방식은 <head> 사이에 삽입하면 된다.
(2) 메타 태그의 종류
1) 홈페이지,혹은 페이지에 관한 정보를 설명하기 위한 태그
백악관 스크립션을 한번 긁어봤다.
"WhiteHouse.gov is the official web site for the White House and President Barack Obama,
the 44th President of the United States. This site is a source for information about the President,
White House news and policies, White House history, and the federal government."
2) 언어 태그 : 이 페이지가 한글인지 영문인지 구분하는 태그, 폰트타입도 설정할 수 있단다.
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr" />
3) 키워드 : 내 홈페이지가 검색되기 위한 단어를 작성한다.
역시 백악관 키워드를 긁어봤다. 대통령의 버락이란 이름이 오타가 많은지 유난히 많다.
"President, Barack Obama, White House, United States of America,
44th President, White House history, President Obama, Barck, Barek, Barak, Barrack, Barrak, Obma, Barack"
4) 모바일 디바이스에 맞춰 홈페이지의 해상도를 맞춰주는 태그
스마트폰에서 웹서핑을 하는 사람들을 위해 스마트폰 사이즈에 딱 맞춰 홈페이지가 보여지도록 하는 태그네요.
애플 홈페이지는 모바일에서도 1024를 지원하도록 하였네요
<meta name="viewport" content="width=1024" />
마케팅쪽을 생각해서 매타 태그를 잘 해놓으면 검색순위에도 상위에 배치되고 자주 노출된다. 구체적일수록 순위는 올라가지만 구체적으로 찾는 사람이 많지 않기 때문에 적절히 타켓팅해서 메타태그의 키워드를 작성한다.
'개인적인 것 > 주워 배운 것들' 카테고리의 다른 글
| 작심삼일 올해 운동 계획 포기직전 이라면? - 피토크레시(Fitocracy) 운동 기록 웹사이트 (0) | 2015.01.17 |
|---|---|
| 알아두면 좋은 해외 웹사이트 소개 (0) | 2015.01.05 |
| 애자일(Agile)에 대해 알아보기 (0) | 2014.02.26 |
| 그리드(Grid) 디자인에 유용한 그리드 시스템 웹사이트 (0) | 2012.10.15 |
| Div와 CSS에 대한 간단요약 (0) | 2012.10.15 |