meta
- 어떤 정보에 대한 설명을 담은 정보를 meta data라고 한다.
- 웹페이지의 제목, 저자, 어떤 내용을 담는지, 검색 키워드 등의 정보를 예시로 들 수 있다.
- 웹 페이지에 표현되지는 않지만 웹 페이지를 설명하기 위한 부가정보를 의미함
- <head> ... </head> 안에 <meta ... > 로 지정한다.
- meta는 페이지의 설명을 담기도하지만, 검색 엔진 등에서도 사용될 수 있다.
<html>
<head>
<meta charset = "utf-8"> <!-- 인코딩 방식 지정 -->
<meta name = "descrpition" content="예제"> <!--문서 요약-->
<meta name = "keywords"
content = "코딩,html,예제,css,js"> // <!-- 키워드 -->
<meta name="author" content = "jaemin"> // <!-- 저자 표시 -->
<meta http-eqiv="refresh" content = "30">
</head>
<body>
메타 예제
</body>
</html>
Semantic tag [ 의미론적 태그 ]
- html5에서 특별한 기능은 없지만, 문서의 정보를 보다 잘 표현하기 위해서 사용하는 의미론적 태그이다.
- 이를 이용해서 정보에서의 가치를 높일 수 있다.
- 정보를 잘 표현하기 위해 의미에 맞는 태그를 잘 할용하는 것이 중요한데 Html5의 정의는 아래와 같다.
- 웹 문서를 읽거나 쓸때 다음을 활용해서 쉽게 문서의 내용을 판단할 수 있다.
- 다시 말하지만 기능은 없다.
| article | 본문 |
| aside | 광고와 같이 페이지의 내용과는 관계가 적은 내용들 |
| details | 기본적으로 표시되지 화면에 표시되지 않는 정보들을 정의 |
| figure | 삽화나 다이어그램과 같은 부가적인 요소를 정의 |
| footer | 화면의 하단에 위치하는 사이트나 문서의 전체적인 정보를 정의 |
| header | 화면의 상단에 위치하는 사이트나 문서의 전체적인 정보를 정의 |
| main | 문서에서 가장 중심이 되는 컨텐츠를 정의 |
| mark | 참조나 하이라이트 표시를 필요로 하는 문자를 정의 |
| nav | 문서의 네비게이션 항목을 정의 |
| section | 문서의 구획들을 정의 |
| time | 시간을 정의 |
검색 엔진 최적화
- 내 웹 사이트는 어떻게 검색되서 접속하게 될까
검섹엔진 최적화[SEO]란 검섹엔진이 컨텐츠를 잘 해석하고, 사용자들의 노출빈도가 늘어날 수 있도록 설게히는 것을 말한다.
html 코드를 의미론적으로 잘 쓰는것이 검섹엔진 최적화라고 할 수 있다.
아래의 내용은 구글 검색 엔진 최적화 가이드에 대한 내용들을 잠깐 다룬다.
[1] Title 태그를 이용해서 페이지의 제목을 나타낸다.
- Title 태그는 검색어의 제목에 강조되어 표시되면서 검색되므로 검색 엔진에 유리하기 위해서는 좋은 title 태그를 작성하는 것이 좋다.
[2] description 메타 태그 이용하기
- meta 태그에 포함된 내용은 검색 시 파싱이 될 수 있기 때문에 1-2개의 문장 or 짧은 단락을 사용하면 좋다.
[3] URL 구조를 단순화하기
- Url 구조를 단순화 하면 검색 엔진이 문서를 크롤링하기도 쉽고 사용자가 페이지가 무엇을 담고있는지 예측하기도 좋아진다.
- 특정 문서에 도달하기 위한 한 가지 형태의 URL를 제공하는 것이 좋다
- 301 리디렉션 설정 : 방향을 바꿔서 목적지를 돌려버림
- 리디렉션이 사용할 수 없다면 " rel = "canonical" " 링크 속성을 이용한다.
--> " link rel="canonical" href = "original.html" // 이 웹페이지는 original과 같구나 이걸 보여줘야지 !
[4] 사이트 내 이동이 쉽게 만든다.
- 하이퍼텍스트(링크)를 통해서 사이트 내의 파일 이동이 조직화 되어있어야 쉽게 크롤링이 가능하다.
- 홈 페이지를 기반으로 한 경로 계획하고 이를 시각화해서 방문자에게 편리한 정보를 제공한다.
- URL 일부를 제거하는 경우 발생할 상황을 고려해야 한다. ( 동선 제공 등 )
- 자연스러운 게층 구조, 이동 경로를 위해 텍스트 링크, 하이퍼텍스트 사용하기
[5] 우수한 품질의 컨텐츠와 서비스를 제공하라 (사용자 기반)
[6] 앵커 텍스트를 효율적으로 작성하기
- 내용을 함축하고 간결한 텍스트를 선택 ( URL을 적지말고 정보를 적기 )
- 링크를 눈에 띄기 쉽게 표현하기
[7] 이미지가 불러오지 못할 때를 대비해서 alt를 응용한다.
- 스크린 리더가 어떤 정보인지 대략적으로 사용자에게 알려줄 수 있음.
- 검색 엔진이 검색할 때 alt를 기반으로 검색 결과를 보여줄 수 있다.
- 이미지 파일의 이름도 최대한 의미있는 이름.png를 사용한다.
- 이미지 파일에 <a href = url >을 사용하면 이미지 파일에 링크를 걸 수 있다.
[8] 제목 태그를 활용하여 중요한 부분을 강조한다.
- 제목 태그로 검색 엔진이 추천글을 판별 할 수 있으므로 제목 태그를 잘 사용하는 것도 중요함
[9] robots.txt를 효과적으로 활용하기 + 명시적인 site map 활용하기
- robot은 네트워크를 통해 웹 사이트를 접근하려는 software들을 일컫는다.
- 나의 웹사이트를 크롤링하기 위한 robot들의 접속을 허용하지 않으려면 아래와 같이 설정한다.
- User-agent: * => 적용 유저
Disallow : / => 어디를 허용할 것인지
Sitemap : https://abc => 사이트 맵
- 즉 네트워크를 탐험하는 로봇들의 접근의 권한을 설정하는 것이다.
- 아래의 링크를 통해서 구글에서 제공하는 robot의 접속 허용 현황을 살펴보자
https://www.google.com/robots.txt
[10] 페이지 랭크
- 하이퍼 텍스트의 중요성을 보여주는 사레이다.
- 구글의 성장 원동력이 된 것도 검색 엔진의 개발 능력이라고 할 수 있다.
- 즉 소스코드만 이쁘고 간결한 것이 아닌 위에서 살펴본 검색 엔진 최적화도 Html이 정보로서 가치를 가지는데 정말 중요한 요소로 작용함.
개발자 도구
[1] "마우스 우클릭 > 검사"
- html 코드는 물론이고 각 요소의 css 정보도 확인 가능
[2] 페이지 상 여백 "마우스 우클릭 > 페이지소스보기"
- 현재 웹페이지의 모든 html 코드 확인 가능
[3] 개발자도구 메뉴중 "Toggle device toolbar" 선택
- 현재 화면이 다양한 디바이스에서 웹페이지가 구현되는 모습을 확인 가능
[4] 개발자도구 메뉴중 "Network" 선택
- 브라우저-서버 사이 주고 받는 데이터들을 체크 가능
자세한 내용은 아래 링크에서 참조하여서 사용하자 !
https://opentutorials.org/module/306/2865
둘러보기 - 크롬 개발자 도구
둘러보기 2012-09-27 23:16:03
opentutorials.org
모바일 지원
외부문서 삽입 [iFrame]
'Tech Stack > HTML&CSS' 카테고리의 다른 글
| 박스 모델과 요소의 위치와 정렬 (0) | 2023.05.12 |
|---|---|
| CSS : Selector , Style (0) | 2023.05.12 |
| 브라우저: 문서, 이벤트, 인터페이스 (0) | 2023.05.05 |
| HTML (0) | 2022.01.17 |
