[javascript/jquery]메타(Meta)태그 jquery로 요소 내용 변경하기 [펌]

[javascript/jquery]메타(Meta)태그 jquery로 요소 내용 변경하기 [펌]

 

C.m.A 사이트에서 사용하고 있는 메타태그 예제

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

<meta id="meta_name" name="msapplication-starturl" content="http://chongmoa.com" /> <link id="meta_image_src" rel="image_src" href="http://chongmoa.com/007/90x90.crop.jpg" /> <meta id="meta_twitter_card" name="twitter:card" content="summary" /> <meta id="meta_twitter_url" name="twitter:url" content="http://chongmoa.com/7000" /> <meta id="meta_twitter_title" name="twitter:title" content="C.m.A API 이야기(Mokulsha!) [chongmoa.com]" /> <meta id="meta_twitter_description" name="twitter:description" content="유튜브 태그 생성기 : http://chongmoa.com/youtubetag 여기에서 운영하는 유튜브 태그 생성기 페이지에서 사용하고 있는 있으며 데이타 처리는 Ajax로 처리하고 XE 게시판중 My Music 게시판과 사용자정의(확장변수 및 카테고.." /> <meta id="meta_twitter_image" name="twitter:image" content="http://chongmoa.com/007/90x90.crop.jpg" /> <meta id="meta_og_title"  property="og:title" content="C.m.A API 이야기(Mokulsha!)" /> <meta id="meta_og_type"  property="og:type" content="website" /> <meta id="meta_og_image" property="og:image" content="http://chongmoa.com/007/90x90.crop.jpg" /> <meta id="meta_og_site_name" property="og:site_name" content="C.m.A API 이야기(Mokulsha!) [chongmoa.com]" /> <meta id="meta_og_url" property="og:url" content="http://chongmoa.com/7000" /> <meta id="meta_og_description" property="og:description" content="유튜브 태그 생성기 : http://chongmoa.com/youtubetag 여기에서 운영하는 유튜브 태그 생성기 페이지에서 사용하고 있는 있으며 데이타 처리는 Ajax로 처리하고 XE 게시판중 My Music 게시판과 사용자정의(확장변수 및 카테고.." /> <meta id="meta_nate_title"  name="nate:title" content="C.m.A API 이야기(Mokulsha!)" /> <meta id="meta_nate_description"  name="nate:description" content="유튜브 태그 생성기 : http://chongmoa.com/youtubetag 여기에서 운영하는 유튜브 태그 생성기 페이지에서 사용하고 있는 있으며 데이타 처리는 Ajax로 처리하고 XE 게시판중 My Music 게시판과 사용자정의(확장변수 및 카테고.." /> <meta id="meta_nate_site_name"  name="nate:site_name" content="C.m.A API 이야기(Mokulsha!) [chongmoa.com]" /> <meta id="meta_nate_url" name="nate:url" content="http://chongmoa.com/7000" /> <meta id="meta_nate_image" name="nate:image" content="http://chongmoa.com/007/90x90.crop.jpg" /> <meta id="cma_meta_twitter_image" name="twitter:image" content="http://chongmoa.com/outPage/img/qrcode/chongmoa_sample.png" />

 

C.m.A 사이트에서 사용하고 있는 메타태그를 변경하는 스크립트

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

<script> function cmaMetaTagsChange(url,stitle,scontent,simg){     $("#meta_image_src").attr("href", simg); // 트위터 카드를 사용하는 URL이다.     // 트위터 관련 메타태그     $("#meta_twitter_url").attr("content", url); // 트위터 카드를 사용하는 URL이다.     $("#meta_twitter_title").attr("content", stitle+" [chongmoa.com]"); // 트위터 카드에 나타날 제목     $("#meta_twitter_description").attr("content", scontent); // 트위터 카드에 나타날 요약 설명     $("#meta_twitter_image").attr("content", simg); // 트위터 카드에 보여줄 이미지       // 페이스북 관련 메타태그     $("#meta_og_title").attr("content", stitle); //    제목표시     $("#meta_og_image").attr("content", simg); //    이미지경로 w:90px , h:60px(이미지를 여러 개 지정할 수 있음)     $("#meta_og_site_name").attr("content", stitle+" [chongmoa.com]"); //    사이트 이름     $("#meta_og_url").attr("content", url); //    표시하고싶은URL     $("#meta_og_description").attr("content", scontent); //    본문내용       // 네이트온 관련 메타태그     $("#meta_nate_title").attr("content", stitle); //    제목표시     $("#meta_nate_description").attr("content", scontent); //    본문내용     $("#meta_nate_site_name").attr("content", stitle+" [chongmoa.com]"); //    사이트 이름     $("#meta_nate_url").attr("content",url); //    표시하고싶은URL     $("#meta_nate_image").attr("content", simg); //    이미지경로 } </script>

 

스크립트를 실행하면 아래의 내용대로 메타태그를 변경시켜줍니다.

1 2 3 4 5 6 7 8

<script> var url = "http://chongmoa.com/unixtime"; var stitle = "C.m.A 유닉스타임변환"; var scontent = "유닉스타임변환 유닉스타임변환(Unix Timestamp Converter)유닉스타임을 날짜로 변환(Unix timestamp to DateTime)POSIX time으로 부르기도 하는 Unix time 은 컴퓨터시스템에서 시간을 표현하기 위"; var simg = "http://chongmoa.com/img/chongmoa_sample.png"; </script>   <input type="button" value="메타 태그 변경하기" onclcik="cmaMetaTagsChange(url,stitle,scontent,simg);" />

 

출처 : http://chongmoa.com/jquery/19849