여러모로 생고생이다. 하지만 한가지 배운 점이 있다. 구글은 컨텐츠를 좋아한다. 컨텐츠는 글이고 문장이다. 사람들이 많이 찾는 글과 많은 도움을 줄 수 있는 글이 있으면 유리하다. 웹사이트를 직접 꾸며보니 알겠다. 컨텐츠의 개념이 글과 문장이라 생각을 하면 이해가 된다.
블로그 포스팅이 힌트
검색유입을 뜻하는 오가닉의 수치가 높으면 그만큼 사람들이 많이 찾는 것을 의미한다.
검색유입을 많이 높이려면 많이 찾는 내용을 포스팅하면 된다.
하지만, 웹사이트를 직접 꾸리면 여기에서 문제가 하나 생긴다.
블로그는 포스팅을 많이 하면 그 중 사람들이 많이 찾는 글을 찾을 수 있지만
손수 만든 동작형 프로그램 같은 경우는 그렇지 않다.
하지만, 검색유입이 되도록 꾸밀 수는 있다.
원페이지같은 메뉴구조
포스팅은 글이다.
검색엔진은 글이 얼마나 충실하게 작성되고 사람들이 많이 찾는 키워드가 있는지 키워드의 내용이 충실하고 풍부한지 파악한다.
동작형 웹사이트의 경우 이런 내용들을 하나의 페이지에 담기에 공간은 부족하다.
하나의 방법은 있다.
하나의 페이지를 만들고 메뉴로 이동시키면 된다.
URL 이동이 아닌 화면의 구성 메뉴를 이용해 화면을 이동시키면 된다.
문서구조 만들기
전체적인 코드부터 살펴보자.
구글 SEO 뿐만 아니라 네이버 빙 등과 같은 검색엔진에서도 읽어갈 수 있도록 스키마를 만든 것이다.
meta 태그
메타태그의 내용은 검색로봇이 읽어간다.
웹사이트의 경우 이 부분은 중요하게 다뤄지고 있다.
블로그만 가지고 얘기할 때는 구글에 노출시키기 위해 양질의 글을 작성하라고 한다.
블로그에서는 이 meta 태그를 건들 수 없기 때문에 본문에서 다양한 문장을 작성하여 검색비중을 높이는 것이다.
메뉴고정 position: fixed
css 에서 position 값을 주면 그 부분은 그 자리에 고정이 된다.
메뉴를 항상 화면 상단에 보여주고 화면의 부분만 이동하게 하기 위한 목적이다.
페이지가 많으면 관리가 어렵기 때문에 가급적 원페이지로 여러가지 내용을 넣고자 할 때 용이하다.
당연히 구글이나 네이버 등의 검색로복이 내용을 읽어갈 수 있도록 하기 위해 풍부한 내용을 입력할 필요가 있는 부분이기도 하다.
a 태그 원페이지형태 화면이동
상단에 위치한 메뉴는 화면이 스크롤 되지만 항상 보이게 된다.
화면의 부분을 이동시키기 위해 페이지 이동이 아닌 html 요소의 id값으로 이동하도록 하였다.
이렇게 하면 a 태그는 id가 위치한 부분으로 화면을 이동하게 된다.
<!-- html5 기본템플릿 -->
<!DOCTYPE html>
<!-- head -->
<head>
<!-- meta SEO 컨텐츠 -->
<meta name="title" content="제목">
<meta name="description" content="내용">
<meta name="keywords" content="키워드">
<meta name="author" content="작성자">
<meta name="copyright" content="저작권">
<!-- // -->
<!-- meta 반응형 웹표준 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- // -->
<!-- 스타일 -->
<style>
* {
margin: 0; padding: 0;
}
#menu {
position:fixed;
background-color: white;
height: 100px; width: 100%;
}
#desc { padding-top:100px; }
#webapppgm { padding-top:10px; }
</style>
<!-- // -->
</head>
<!-- // -->
<!-- body -->
<body>
<div id="menu">
<h1>자작툴</h1>
<p>
<span><a href="#desc">개요</a></span>
<span><a href="#webapppgm">설명</a></span>
</p>
</div>
<div id="desc">
<h1>컨텐츠 프로그램 설명</h1>
<p>이것은 개요입니다.</p><p>이것은 개요입니다.</p><p>이것은 개요입니다.</p>
<p>이것은 개요입니다.</p><p>이것은 개요입니다.</p><p>이것은 개요입니다.</p>
<p>이것은 개요입니다.</p><p>이것은 개요입니다.</p><p>이것은 개요입니다.</p>
</div>
<div id="webapppgm">
<h1>컨텐츠 프로그램</h1>
<p>이것은 컨텐츠프로그램입니다.</p><p>이것은 컨텐츠프로그램입니다.</p>
<p>이것은 컨텐츠프로그램입니다.</p><p>이것은 컨텐츠프로그램입니다.</p>
<p>이것은 컨텐츠프로그램입니다.</p><p>이것은 컨텐츠프로그램입니다.</p>
<p>이것은 컨텐츠프로그램입니다.</p><p>이것은 컨텐츠프로그램입니다.</p>
<p>이것은 컨텐츠프로그램입니다.</p><p>이것은 컨텐츠프로그램입니다.</p>
<p>이것은 컨텐츠프로그램입니다.</p><p>이것은 컨텐츠프로그램입니다.</p>
</div>
</body>
<!-- // -->
<!-- 자바스크립트 -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<!-- // -->
</html>실행결과는 아래와 같다.
웹사이트는 원페이지 형태이지만 메뉴는 화면 상단에 항상 보여지게 된다.
메뉴를 클릭하면 화면의 부분만 이동하기 때문에 큰 문제는 없을 것이다.
개요부분에는 프로그램의 자세하고 풍부한 내용을 기록하여 meta에 없는 내용에서 검색이 되도록 할 수 있다.
설명부분에는 실제적으로 사용자가 참여가능한 프로그램 등을 넣고 동작시킬 수 있다.
'programming > web' 카테고리의 다른 글
| html 자동 목차 만들기 jquery 플러그인 toc.js 사용 (0) | 2021.12.11 |
|---|---|
| 검색 효율을 높이는 메타 태그 종류 meta tag (0) | 2021.07.09 |
| CSS html 모든 태그 여백 제거 및 초기화 (0) | 2021.06.17 |
| html 태그 여백을 두자 margin padding 차이 (0) | 2021.06.15 |
| html5 기본 템플릿 만들기 template (0) | 2021.04.16 |
댓글