태그들과 검색엔진 최적화

font 태그

글자를 꾸미는데 가장 기본이 되는 태그입니다.

 

font태그는 color size face 총 3가지의 속성을 가집니다color는 글자의 색상을 꾸며주고size는 글자의 크기face는 글꼴을 지정해줍니다.

 

meta 태그

데이터를 설명해주는 태그 쉽게 말해 사이트 자체에 대한 정보나 저작자 등을 제공해주는 역활을 수행합니다

 

<meta name="keywords" content="HTML,CSS,JavaScript"> -> 사이트에 대한 설명(페이지에 표기되지않음)

 

<meta charset="utf-8"> ->해당 페이지를 컴퓨터에 저장할 때 인코딩을 utf-8 방식으로 저장하겠다.( 해당 페이지는 utf-8로 저장된 페이지 입니다) 라는 뜻

 

semantic 태그(의미론적 태그) html5부터 새롭게 정의된 태그

선언한 부분이 어떤 부분인지 의미만을 나타내주는 태그 (기능상의 변화는 없다)

 

article - 본문내용

aside - 광고와 같이 페이지의 내용과는 관계가 적은 내용들

header - 화면의 상단에 위치하는 사이트나 문서의 전체적인 정보를 정의

footer - 화면의 하단에 위치하는 사이트나 문서의 전체적인 정보를 정의

main - 문서에서 가장 중심이 되는 컨텐츠를 정의

nav - 문서의 네비케이션 항목을 정의

section - 문서의 구획들을 정의

<출처 - 생활코딩>

 

등등 많은 의미론적 태그가 있음

 

검색엔진 최적화

보통 웹페이지를 작성할 때, 검색에 잘 노출되도록 우리가 적용시킬 수 있는 기술

 

1.title 태그를 이용하여 페이지의 제목을 나타내라!(title태그의 내용은 검색결과에 반영됨)

 

title태그에 정의한 내용이 실제 구글에서 그 이름으로 자료 제목으로 올라옵니다

 

2.meta 태그 이용하기

<meta name="description content="검색에서 노출되는 설명부분">

meta 태그는  실제 구글에서 자료 제목밑 자료의 설명에 들어가는 부분입니다

 

 

 

 

 

 

3.페이지의 url 구조 개선이해하기 쉬운 url은 콘텐츠의 내용을 전달하는데 좋습니다.

 

4.단순 디렉터리 구조 만들기

../dir1/dir2/dir3/dir4/dir5/dir6/dir7/page.html 과 같이 깊이 중첩된 하위 디렉토리 사용 x내용과 관련이 없는 디렉토리 이름 사용 x

 

5.여러 URL을 통해 같은 내용의 페이지에 접속되는 경우 URL중에서 가장 우선적인 URL로 301리다이렉션을 설정하는 것이 좋은 방법

 

6.사이트 내에서 이동하기 쉽게 만들기

구글에서 개발한 사이트의 내용을 가져갑니다(크롤링)그때 어떤 기준으로 돌아다니나면 링크(하이퍼텍스트)를 통해 돌아다닙니다 따라서 링크의 조직화가 잘되어있어야합니다.

 

7.location.href js로 이동시키면 검색엔진에서 이해를 못할 수 도 있습니다. 하이퍼텍스트(링크)를 사용하여 페이지 이동을 해야합니다