디딤돌/jungle

18.09.05 (수)

mirror18 2018. 10. 29. 14:31

input text radio checkbox

select

textarea

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div class="form_list parts">
    <div class="form_area w20rem">
        <label for="동" class="blind">동</label>
        <div class="combobox">
            <select id="동">
                <option value="">동</option>
            </select>
        </div>
    </div>
    <div class="form_area">
        <label for="호" class="blind">호</label>
        <input type="text" id="호" class="front_input">
    </div>
    <span class="input_txt back">호</span>
</div>
cs

button input 엔터를 쳤을 때 반응


* 각 회사마다 이를 이용하기 위해 meta tag를 정의했다.

* open graph는 카카오톡, 페이스북 등이 이를 사용한다.

<meta property="og:title" content="test"/>

<meta property="og:type" content="article"/>

<meta property="og:url" content="https://hanjungv.github.io/"/>

<meta property="og:description" content="설명을 적어보자!"/>

<meta property="og:image" content="/post_img/201702/16/1.png"/>

<meta property="og:image:width" content="1200" />

<meta property="og:image:height" content="627" />


* 그럼 트위터는 어떻게 할까? 링크

<meta name="twitter:card" content="summary">

<meta name="twitter:url" content="https://hanjungv.github.io/">

<meta name="twitter:title" content="test">

<meta name="twitter:description" content="설명을 적어보자!">

<meta name="twitter:image" content="/post_img/201702/16/1.png">


<meta http-equiv="Content-Type" content="text/html; charset=UTF-8”> html4.01입력방법


maximum-scale=1.0 / user-scalable=no 확대방지 쓰지말아야함 (웹접근성을 위해)


<meta name="format-detection" content="telephone=no">

아이폰이나 아이패드나 혹은 블랙베리라거나 자동적으로 전화번호나 이메일 주소를 감지하고 링크가 되어버리는 경우가 있는데,이럴 경우 설정한 스타일이 먹지 않는다. 


<meta itemprop=

schema.org를 운영하는 이니셔티브의 이름이면서 동시에 구조화된 데이터의 vocabulary다. 를 써먹어보려고


<link rel=“canonical” 표준사이트 지정 검색최적화


<meta name="robots" content="index,follow" /> 

: 이 문서도 긁어가고 링크된 문서도 긁어감.


<meta name="robots" content="noindex,follow" /> 

: 이 문서는 긁어가지 말고 링크된 문서만 긁어감.


<meta name="robots" content="index,nofollow" /> 

: 이 문서는 긁어가되, 링크는 무시함.


<meta name="robots" content="noindex,nofollow" /> 

: 이 문서도 긁지 않고, 링크도 무시함.

여러 개의 URL로 액세스할 수 있는 하나의 페이지가 있거나 콘텐츠가 유사한 서로 다른 페이지(예: 모바일 버전 및 데스크톱 버전이 있는 페이지)가 있는 경우, Google은 이러한 페이지를 같은 페이지의 중복 버전으로 간주합니다. Google은 URL 중 하나를 표준 버전으로 선택하여 크롤링하고, 나머지 모든 URL은 중복 URL로 간주하고 빈도를 줄여 크롤링합니다. 

검색엔진 회사가 사용하는 웹 크롤러(Web crawler)는 웹 상의 여러 문서들을 긁어서 문서를 적당한 형태로 저장합니다. 이 때 keywords와 description 등이나 문서 길이, url, 제목 등의 메타 정보를 따로 관리하며 저장하지만 (x)html 문서 자체도 모두 긁어서 저장합니다.

일반적인 램보다 속도가 훨씬 빠른 캐쉬 메모리(cache memory)가 자주 하는 작업을 저장하고 있다가 cpu에서 요청이 오면 즉각 보내서 컴퓨터 작업 속도를 늘려주는 것처럼, 웹 크롤러가 긁어 온 웹 페이지 내용 역시 검색엔진의 모처에 캐쉬 형태로 저장해서 매 검색 시마다 웹 전체를 뒤지지 않고 저장된 캐쉬를 검색해서 빠른 속도로 검색 결과를 보여줍니다.(구글의 '캐쉬'가 그것입니다.) 검색엔진 회사는 이렇게 웹 페이지를 긁어 오는 작업을 정기적으로 하고 있으며 크롤링을 자주 하는 곳일수록 캐쉬 내에 최근 내용이 저장되어 있으므로 보다 최신의 검색결과를 보여줍니다.

문제는 웹에 이런 웹 크롤러(web crawler)들이 아주 많이 떠돌아 다니고 있어서 외부에 노출하고 싶지 않은 문서까지 공개되고 심지어 저장될 수 있다는 사실입니다. 그것을 해결하는 것이 robots라는 메타 태그입니다.


<meta name="robots" content="noindex, nofollow" />

name= 자리에 robots가 들어가 있고 content에는 noindex, nofollow라고 되어 있습니다. 이것에 대해 자세하게 알아 보기 전에 웹 크롤러가 어떻게 동작하는지 간단하게 알아 봅시다. 웹 크롤러가 최초 웹 서버에 도착하면 그 웹 서버 문서 디렉토리의 최상위(/)에 "robots.txt" 라는 문서가 있는지 점검 합니다.