본문 바로가기

JavaScript

meta

5초후 자동이동합니다 이런거할때도 쓰고
구글링같이 검색시 meta정보로 검색한다는데.... 추후 정리할것

# 정의
<meta>태그는 사용자의 일반적인 화면에는 보이지않지만
해당 페이지의 내용을 담고있음

# 형식
<meta 속성="속성값">

#  charset
    -    인코딩 타입지정 
<meta charset="UTF-8">




# name, content  
    -     메타태그의 일반적으로 사용되는속성
    <meta name="keywords" content="현대, 현대자동차, 모닝, 티코" >
    <meta name="author" content="현대자동차" >
    <meta name="description" content="해당사이트를 설명한다." >

<META name="Subject" content="홈페이지주제 입력">
<META name="Title" content="홈페이지이름 입력">
<META name="Descript-xion" content="설명문 입력">
<META name="Keywords" content="키워드 입력">
<META name="Author" content="만든사람 이름">
<META name="Publisher" content="만든단체나회사 이름">
<META name="Other Agent" content="웹책임자 이름">
<META name="Classification" content="카테고리위치(분류)">
<META name="Generator" content="생성프로그램(에디터)">
<META name="Reply-To(Email)" content="메일주소 입력">
<META name="Filename" content="파일이름 입력">
<META name="Author-Date(Date)" content="제작일">
<META name="Location" content="위치">
<META name="Distribution" content="배포자">
<META name="Copyright" content="저작권">
<META name="Robots" content="ALL">

뷰포트메타정보
    -    모바일환경을위해 생긴메타정보
<meta name="viewport" content="width=xx">

이건머지?  임의의메타정보인가??
<meta name="naver-site-verification" content="a29e3f2f54f0e20779cf0c70cd209f960cf31ba9">

# http-equiv
    -    전처리구문지시자로 웹브라우저에게 정보를 전달하기위해 사용
           content속성 필수
    

2초뒤에 해당 url로 이동
    <!--<meta http-equiv="refresh" content="2; url=https://www.naver.com"> -->

다음은 랜더링모드를 적용하는법이다.
 <meta http-equiv="X-UA-Compatible" content="IE=edge">


<meta http-equiv="refresh" content="1">
    :1초마다 리플래쉬

<META HTTP-EQUIV="Refresh" content="15;URL=https://www.naver.com">
   :페이지이동

<META HTTP-EQUIV="Imagetoolbar" content="no">
   :그림위에 마우스 오버시 이미지 관련 툴바가 생기지 않음.

<META HTTP-EQUIV='Cache-Control' Content='no-cache'>
<META HTTP-EQUIV='Pragma' Content='no-cache'>
   :캐쉬가 되지 않게 하는 태그

<META HTTP-EQUIV="Expire" Content="-1">
   :캐쉬 완료(파기)시간 정의.






# property


    -     og( open graph protocol )
<meta property="og:title" content="가리사니"/>
<meta property="og:url" content="https://gs.saro.me/"/>
<meta property="og:image" content="http://gs.saro.me/gs/og-image.png"/>
<meta property="og:description" content="가리사니 개발자공간"/>
페북이나 카카오톡같이 일부서비스에서 내 사이트를 링크할경우
내사이트가 다음과같이 꾸며져나옴

여기에 위와같이 og태그가 적용되어있는 사이트주소를 넣으면 어떤식으로 표시되는지 확인가능
( 여긴 페북에서 어떻게 보일지 확인가능 )



근데 트위터는 property og를 사용안하고 
name속성에서 바로 사용하네
<meta name="twitter:card" content="summary" />  
        트위터 카드 summary는 웹페이지에 대한 요약정보를 보여주는 카드로 우측에 
        썸네일을 보여주고 그 옆에 페이지의 제목과 요약 내용을 보여준다.
<meta name="twitter:url" content="http://chongmoa.com" />  
        트위터 카드를 사용하는 표시하고싶은URL
<meta name="twitter:title" content="C.m.A API 이야기 [chongmoa.com]" />  
        트위터 카드에 나타날 웹 사이트의 제목
<meta name="twitter:description" content="C.m.A API 이야기,API,OPEN API,XML,PHP,MYSQL,Jvascript,Html,chongmoa.com,홈페이지,cms,쇼핑몰,큐알코드생성,QR Code Generator,IP Address Lookup,유닉스타임변환,Unix Timestamp Converter,유닉스타임을 날짜로 변환,Unix timestamp to DateTime" />  
        트위터 카드에 나타날 요약 설명
<meta name="twitter:image" content="http://chongmoa.com/대표이미지.png" /> 
         트위터 카드에 보여줄 대표 이미지 URL
<meta name="twitter:site" content="@트위터아이디" />  
        트위터 카드에 사이트 배포자 트위터아이디
<meta name="twitter:creator" content="@트위터아이디" />  
        트위터 카드에 배포자 트위터아이디