오늘은 SEO와 메타태그란 것에 대해 배워보았따.
용어 설명
- SEO : 검색 엔진 최적화
- index(색인) : 구글에서는 모든 웹 페이지를 index에 저장한다. 사이트가 하나 생성되면 url도 새로 생성이 되는데, 그 url이 색인 즉 index에 저장되는 것.
- crawling(크롤링) : 특정 웹사이트에서 데이터를 추출해내는 것을 말한다. 신규 또는 업데이트 된 페이지를 찾으면 이를 색인에 등록하게 됨.
- Web crawler(크롤러) : 위에서 언급한 crawling을 하는 자동 소프트웨어라고 보면 된다. 웹에서 페이지를 크롤링한 후에 색인을 생성하는 프로그램
- Google bot(구글봇) : 구글에서 만든 크롤러의 이름
우리가 해야하는 건 크롤러가 크롤링을 잘 해주게끔 웹사이트를 구축하는 것.
구글봇이 내 사이트에서 정보를 보다 더 잘 찾고 저장할 수 있게끔!
이를 위해선 <head></head>태그에 정보를 잘 적어주어야 한다. 이것을 Meta Tag라고 한다.
위 사진에서 meta어쩌고 하는 것들이 보일텐데 저것들이 meta data이다.
이미지에도 나와있지만, 정리해 보겠다.
- description : 웹 페이지에 대한 설명을 정의한다. 내용은 영어라면 160자 정도, 한글이라면 대략 80~100자 정도가 적당하다고 함.
description은 검색엔진에 영향을 주는 요인은 아니고 검색결과에 내 홈페이지가 노출되었을 때 사람들이 클릭할 수 있게끔 하는 요약문을 넣어야 겠쥬?- keywords : 검색할 때에 몇가지 키워드만 입력해도 그에 맞는 사이트들이 나온다. 그 때 이 키워드를 지정해주어야 보다 더 노출이 용이하다고 할 수 있겠다. (그럼 많이할 수록 좋은가?
- robots : 위에서 나온 크롤링 봇(크롤러)들이 정보를 가져가서 색인에 저장하는 것을 허용하려면 이 태그가 필요하다.
content="index, follow"라고 적혀있다.
index라는 것은 사이트 주소를 색인에 저장하여 오픈할 것이라고 하는 것이고, 아직 오픈전이라면noindex라고 적으면 된다.
follow라는 것은 링크를 따라 크롤러가 이동하게 할 것인지 아닌지 지정해주는 것이다. 마찬가지로 원하지 않는다면nofollow로 적으면 되겠다!- open graph : 오픈 그래프는 페이스북이나 트위터 같은 플랫폼에 특정 웹사이트의 게시물을 공유하고 싶을 때 사용한다.
추후 더 자세히 알아볼 땐 ogp.me 방문하기
시멘틱 구조 설계
SEO에 관련된 메타태그만 적는다고 되는 것이 아니고, HTML 코드를 시멘틱 구조로 잘 설계해주는 것이 중요하다.
h1부터 h6까지 있는 헤딩태그 영역이 잘 적혀있는지 혹은 이게 네비게이션 태그인지, 아티클인지, 헤드타이틀인지 본문 등인지 구별이 잘 가게 코드를 짜주어야 한다.
Headings Map이라는 크롬 확장 프로그램을 추천한다고 한다~
헤딩스 맵으로 사이트 구조가 잘 잡혀있는지 확인할 수 있다! 네이버는 구조가 아주 깔끔하게 잡혀있는 것을 볼 수 있다.ㅎㅂㅎb
디자이너가 사이트 구조에 대한 기획까지 맡아 진행하진 않겠지만, 전달받은 구조를 최대한 최적화 되도록 코드를 짜는 것이 중요하겠다.
디자이너가 코딩 공부 즁~♪