프로그램 개발서

메타 태그 본문

Web

메타 태그

rairen 2020. 6. 8. 12:21

안녕하세요?

 

실 사용하는 코드에 대한 정보를 공유겸 저장겸 기록겸 작성는 오늘의 내용은 메타태그입니다.

 

<head></head> 안에 넣어서 사용하는 태그로서 홈페이지에 대한 정보를 작성하는 태그라고 보시면 간단하지 않을까 싶습니다.

 

우선 아래의 코드를 봅시다.

 

	<meta name="author" content="라이렌">
	<meta name="description" content="Work Management System">
	<meta name="keywords" content=" Work Management System">
	<meta name="subject" content="Work Management System">
	<meta name="title" content="Work Management System">
	
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta name="robots" content="noindex, nofollow"/>
	<meta http-equiv="Content-Type" content="text/html">
	<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
	
	<meta property="og:title" content="Work Management System"/>
	<meta property="og:type" content="website"/>
	<meta property="og:url" content="http://myhomepage.com"/>
	
	<meta property="og:image" content="http://example.com/ogp.jpg"/>
	<meta property="og:image:secure_url" content="https://secure.example.com/ogp.jpg"/>
	<meta property="og:image:type" content="image/jpeg"/>
	<meta property="og:image:width" content="400"/>
	<meta property="og:image:height" content="300"/>
	<meta property="og:image:alt" content="A shiny red apple with a bite taken out"/>
	
	<meta property="og:audio" content="http://example.com/sound.mp3"/>
	<meta property="og:audio:secure_url" content="https://secure.example.com/sound.mp3"/>
	<meta property="og:audio:type" content="audio/mpeg"/>
	
	<meta property="og:description" content="Work Management System"/>
	<meta property="og:determiner" content="the"/>
	<meta property="og:locale" content="ko_KR"/>
	<meta property="og:locale:alternate" content="en_US"/>
	<meta property="og:site_name" content="Work Management System"/>
	
	<meta property="og:video" content="http://example.com/movie.swf"/>
	<meta property="og:video:secure_url" content="https://secure.example.com/movie.swf"/>
	<meta property="og:video:type" content="application/x-shockwave-flash"/>
	<meta property="og:video:width" content="400"/>
	<meta property="og:video:height" content="300"/>
	<meta name="twitter:card" content="summary"/>
	<meta name="twitter:site" content="@nytimesbits"/>
	<meta name="twitter:creator" content="@nickbilton"/>

 

위 코드는 사용할 만한 메타 태그들을 다 작성한 것입니다.

다만 기본적으로는 아래의 정도만 넣어도 충분하죠.

	<meta name="author" content="라이렌">
	<meta name="description" content="Work Management System">
	<meta name="keywords" content=" Work Management System">
	<meta name="subject" content="Work Management System">
	<meta name="title" content="Work Management System">
	
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta name="robots" content="noindex, nofollow"/>
	<meta http-equiv="Content-Type" content="text/html">
	<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
	
	<meta property="og:title" content="Work Management System"/>
	<meta property="og:type" content="website"/>
	<meta property="og:url" content="<?= site_url(); ?>"/>
	
	<meta property="og:description" content="Work Management System"/>
	<meta property="og:determiner" content="the"/>
	<meta property="og:locale" content="ko_KR"/>
	<meta property="og:locale:alternate" content="en_US"/>
	<meta property="og:site_name" content="Work Management System"/>

 

홈페이지의 이미지나, 음악, 영상 등을 보함하고 싶을 때는 각각 추가해주면됩니다.

 

* 이미지

	<meta property="og:image" content="http://example.com/ogp.jpg"/>
	<meta property="og:image:secure_url" content="https://secure.example.com/ogp.jpg"/>
	<meta property="og:image:type" content="image/jpeg"/>
	<meta property="og:image:width" content="400"/>
	<meta property="og:image:height" content="300"/>
	<meta property="og:image:alt" content="A shiny red apple with a bite taken out"/>

* 음악

	<meta property="og:audio" content="http://example.com/sound.mp3"/>
	<meta property="og:audio:secure_url" content="https://secure.example.com/sound.mp3"/>
	<meta property="og:audio:type" content="audio/mpeg"/>

* 영상

	<meta property="og:video" content="http://example.com/movie.swf"/>
	<meta property="og:video:secure_url" content="https://secure.example.com/movie.swf"/>
	<meta property="og:video:type" content="application/x-shockwave-flash"/>
	<meta property="og:video:width" content="400"/>
	<meta property="og:video:height" content="300"/>

 

 

그리고 마지막으로는 SNS 에서 읽어들일 경우 사용하는 메타태그도 있습니다.

	<meta property="og:title" content="Work Management System"/>
	<meta property="og:type" content="website"/>
	<meta property="og:url" content="http://myhomepage.com"/>
	<meta property="og:description" content="Work Management System"/>
	<meta property="og:determiner" content="the"/>
	<meta property="og:locale" content="ko_KR"/>
	<meta property="og:locale:alternate" content="en_US"/>
	<meta property="og:site_name" content="Work Management System"/>
    
	<meta name="twitter:card" content="summary"/>
	<meta name="twitter:site" content="@nytimesbits"/>
	<meta name="twitter:creator" content="@nickbilton"/>

위 내용이 SNS용이라고 보시면 될 것 같네요.

 

참고용이므로 참고하시어 작성하시면 됩니다.

반응형
저작자표시 비영리 변경금지

'Web' 카테고리의 다른 글

[DB][MySQL] 시/도, 시/군/구, 읍/면/동 .sql  (0) 2021.07.05
Favicon HTML link Tag  (0) 2020.06.08
[코드이그나이터] Custom Helper Function 모음 - Default  (0) 2020.05.29
[코드이그나이터] Custom Helper 모음 v0.1  (0) 2020.05.20
[Jquery][CodeIgniter] 회원가입 관련 코드 모음.  (0) 2020.05.20
'Web' Related Articles more