NK.Lim

Frontend

정보로서의 HTML과 검색엔진 최적화(SEO)

1 분 소요

font 태그

시각적인 디자인이기 때문에 정보로서의 의미를 나타내지 않기 때문에 쓰지 말자.

디자인은 CSS로 하여 디자인과 정보로서의 의미를 분리.

결론: <font size="" color=""> </font> 태그 쓰지 않기.

meta 태그

글의 본문에 필요하진 않지만 웹페이지를 설명하는 부가적인 데이터. 웹피이지의 저자, 검색키워드 등등.

<head>
  <meta charset="utf-8"> //웹페이지 인코딩 UTF-8로 되어있다.
  <meta name="description" content=""> //간단한 페이지 설명
  <meta name="keywords" content="html, frontend, 코딩"> //문서를 정의하는 중요 키워드들
  <meta name="author" content="nangkyeonglim"> //저자
  <meta http-equiv="refresh" content="30"> //30초 간격으로 refresh됨.
</head>

의미론적인(semantic) 태그

기능은 없지만 웹 페이지 상에서 의미구조를 갖는 태그. 논리적으로 긴밀하게 관련된 집합체로 나누기.

<header> </header>: 헤더 섹션

<main> </main>:핵심 부분, 하나의 html문서 내에 단 한개의 main만 사용 가능.

<nav> </nav>: 네비게이션 메뉴 섹션

<section> </section>: article태그들을 같은 section태그로 묶을 수 있다.

<article> </article>: 본문

<aside> </aside>: 광고같은 본문과는 관계가 적은 내용들

<footer> </footer>: 웹 사이트 하단에 부가적인 정보를 갖는 부분, 각주.

  • Sectioning elements(nav, section, article, aside)내에 반드시 heading태그 작성(명시)

검색엔진최적화(SEO: Search Engine Optimization)

  • 명확하고 독창적인 타이틀 사용: <head>태그 내에 <title>태그를 이용해서 페이지 제목 나타내기

  • <meta description=""> 태그 활용하여 페이지 내용을 정확하게 요약하기

  • 페이지의 URL 구조를 개선하여 URL만 봐도 어떤 정보를 담고있는지 알 수 있게 작성.

  • 같은 컨텐츠는 여러개의 URL을 갖지 않게 한 가지의 URL 제공: 리다이렉션 혹은 <head>태그 내에 <link rel="canonical href="오리지널 주소">"를 사용.

  • 크롤링 할 때 페이지의 데이터가 링크로 조직적으로 잘 연결되어야 할 때 편하므로 홈페이지 기반으로 사이트 내 이동 쉽게 만들기

  • 사용자가 URL의 일부를 제거하는 경우 발생할 상황을 고려한다.

  • Hypertext로 사이트 이동 하도록 한다.

  • 앵커 텍스트를 의미있는 내용으로 작성한다.

  • 이미지 사용시 alt속성을 이용하여 관련 정보를 제공한다.

  • images라는 이미지를 위한 특정 디렉토리 설정을 권장.

  • 이미지의 이름을 의미있게 나타낸다.

  • 제목 태그 <h1> ~ <h6> 잘 활용한다.

  • robots.txt 효과적으로 활용하여 검색에 노출이 필요하지 않은 부분을 제어한다.

  • 실제 사용자와 검색엔진을 위한 두 종류의 사이트맵(sitemap) 준비하기

  • 페이지랭크가 높으면 상단에 노출된다. 링크가 여러 사이트에 걸려있을수록 랭크가 높아지고 잘 노출된다.

카테고리:

업데이트:

댓글남기기

참고