JavaScript를 사용하여 페이지의 메타 태그를 변경할 수 있습니까?

114

헤드에 div를 넣고 display : none을 표시하면 JavaScript를 사용하여 표시하는 것보다 작동합니까?

편집하다:

AJAX에 물건을로드했습니다. 그리고 내 AJAX가 사이트의 "메인"부분을 변경함에 따라 메타 태그도 변경하고 싶습니다.

javascript  jquery  meta-tags 
— TIMEX
소스
47
그것은 모자로 신발을 신는 것과 같습니다
— Ben
8
또는 텍스트 편집기를 IDE로 사용합니다. 기다릴 필요가 없습니다.
— Dan Rosenstark 2010
23
당신이 맞아요 I "m stupid
— TIMEX
2
안녕하세요 TIMEX, 아마도 받아 들여진 대답의 변경이 그 자리에 있습니까? 다른 이유가 아니라면 Byron에게 그의 오래된 답변에 대한 반대 투표에서 휴식을 취하십시오.
— Alex
1
이 작업을 수행하여 자바 스크립트 프레임 워크로 메타 태그 (특히)를 관리 한 다음 프리 렌더 엔진이 크롤러를 위해이를 작성 / 캐시하도록합니다. 그렇지 않으면 내 SPA의 한 가지, 로딩 속도를 느리게 할 인덱스, ... 렌더링하기 전에 내 API에서 태그를 결정하기 위해 추가 미들웨어가 필요 것
— 소프트 글 머리 기호를

답변:

161

예, 할 수 있습니다.

몇 가지 흥미로운 사용 사례가 있습니다. 일부 브라우저와 플러그인은 메타 요소를 구문 분석하고 다른 값에 대한 동작을 변경합니다.

예

Skype : 전화 번호 파서 끄기

<meta name="SKYPE_TOOLBAR" content="SKYPE_TOOLBAR_PARSER_COMPATIBLE">

iPhone : 전화 번호 파서 끄기

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

Google 크롬 프레임

<meta http-equiv="X-UA-Compatible" content="chrome=1">

모바일 장치 용 뷰포트 정의

<meta name="viewport" content="width=device-width, initial-scale=1.0">

이것은 JavaScript로 변경할 수 있습니다. 참조 : iPhone 뷰포트 배율 버그 수정

메타 설명

일부 사용자 에이전트 (예 : Opera)는 책갈피에 대한 설명을 사용합니다. 여기에서 개인화 된 콘텐츠를 추가 할 수 있습니다. 예:

<!DOCTYPE html>
<title>Test</title>
<meta name="description" content="this is old">
<script type='text/javascript' src='http://code.jquery.com/jquery-1.8.2.js'></script>

<button>Change description</button>

<script type='text/javascript'>
$('button').on('click', function() {
    // Just replacing the value of the 'content' attribute will not work.
    $('meta[name=description]').remove();
    $('head').append( '<meta name="description" content="this is new">' );
});
</script>

그래서 그것은 단지 검색 엔진에 관한 것이 아닙니다.

— Fuxia
소스
9
이와 같은 대부분의 메타에는 페이지가로드 된 후에 변경할 수없는 효과가 있다고 생각합니다. 그러나 예, 메타는 단순한 keywords및 description.
— bobince
2
@bobince : 실제로 SKYPE_TOOLBAR는 js로 삽입하면 여전히 적용됩니다 (html5 유효성 검사기가 해당 메타 태그를 좋아하지 않기 때문에 유용합니다).
— DaedalusFall
1
@DaedalusFall : 예, document.write헤더 에서만 그렇게 할 수 있다고 생각합니다. Skype가 이미 DOM을 망칠 것이기 때문에 페이지가로드되면 변경하기에는 너무 늦었습니다. 끔찍한 일입니다!
— bobince 2011
1
이것은 Facebook과 같은 서비스에 대한 소셜 공유에 매우 유용합니다. 예를 들어, og : title 요소를 변경하려면 : $('meta[property="og:title"]').replaceWith('<meta property="og:title" content="New Title">');
— bdanin
2
이것으로 멋진 일을 할 수 있습니다. 헤더의 슬라이드가 변경되면 Chrome 주소 표시 줄 색상을 변경합니다. const meta = document.querySelector('meta[name=theme-color]'); meta.setAttribute("content", colors[slideIndex]);Android의 Chrome이 업데이트를 감지하고 색상을 변경합니다
— Dominic Bartl
149

네, 그렇습니다.

예 : 메타 설명을 설정하려면 :

document.querySelector('meta[name="description"]').setAttribute("content", _desc);
— Jayms
소스
23
누군가가 (질문에서 요청 한대로) 순수한 js로 답변을 주어서 기쁩니다!
— Soft Bullets
안녕 jayms. 팁 고마워. 하지만 og : title 태그를 변경하기 위해이 방법을 시도했지만 작동하지 않았습니다. 내가 한 방법은 다음과 같습니다. document.querySelector ( 'meta [name = "og : title"]'). setAttribute ( "content", "제목 메타 태그가있는 예"); 어떤 아이디어?
— Jorge Mauricio
1
property속성이 아닌 속성 을 쿼리해야하는 것 같습니다 name. 즉meta[property="og:title"]
— jayms
69

다음과 같은 것을 사용합니다 (jQuery 사용).

$('meta[name=author]').attr('content', 'New Author Name');

그러나 메타 태그는 일반적으로 JavaScript를 실행하지 않고 문서가로드 될 때만 스크랩되기 때문에 대부분 의미가 없습니다.

— MiffTheFox
소스
7
$('meta[property=og:somestuff]')콜론으로 인해 jQuery 선택 구문과 충돌 할 것으로 의심되는, 같은 선택자에서도 작동합니다 .
— pau.moreno dec
8
다른 사람이이 정확한 솔루션을 찾고 있다면 og : somestuff를 따옴표로 묶어야합니다. 이미지 태그의 내용이 필요했습니다. 이것은 내 코드였습니다. var imgurl = $ ( "meta [property = 'og : image '] "). attr ("content ");
— Daniel
2
메타 뷰포트 설정에서 작동하는지 확인했습니다 (jQuery Mobile의 특정 하위 페이지에 대해 확대 / 축소를 활성화 / 비활성화하는 데 필요함). 감사!
— NPC
1
@stealthcopter 나는 이것이 아니라는 것을 확인할 수 있습니다 :( 잠깐, 그렇습니다, 그러나 변경 사항은 FFox의 "소스보기"창에 표시되지 않습니다 ..?
— yPhil
1
@yPhil 이것은 자바 스크립트 (또는 jQuery)이므로 DOM에 대한 모든 변경 사항은 브라우저에서 소스 코드를 볼 때 반영되지 않습니다. 개발자 도구를 사용하여 소스를 볼 때 반영됩니다. 브라우저 소스는 페이지가로드 될 때 한 번만로드됩니다. ajax 요청 요청은 페이지로드가 아닙니다.
— Zubair1 2017 년
34

예를 들어 다음과 같이 jQuery 호출을 사용하여 메타를 변경할 수 있습니다.

$('meta[name=keywords]').attr('content', new_keywords);
$('meta[name=description]').attr('content', new_description);

Google이 및 호출을 통해 ajax 콘텐츠를 인덱싱 할 것이라고 말했기 때문에 지금 은 중요 하다고 생각 합니다. 그리고 지금은 수 (참조, 헤드리스 브라우저, 심지어 자동으로 페이지가 위에서 언급 한에 링크 'HTML 스냅 샷 생성'을)를 확인 나는 그것이 하드 코어 SEO들에 대한 방법이라고 생각 때문에.#!hashes_escaped_fragment_

— Eyedmax
소스
3
감사합니다. 내 문제를 해결했습니다. 페이스 북에는 열린 그래프가 있습니다. 내가 개발중인 사이트에는 History jQuery 플러그인과 해시 태그가 있습니다. 따라서 해시 변경이있을 때마다 FB 오픈 그래프 URL 및 설명을 변경해야합니다. +1은 훌륭한 답변이며 공정한 질문에 대해 부정적이지 않습니다.
— Damien Keitel
5
실제로 이제 Google은 페이지 스냅 샷을 만들 필요없이 자바 스크립트를 실행할 수 있으므로 이제 동적 메타 태그가 매우 중요합니다!
— Francesco Abbruzzese 2014-06-24
33

자바 스크립트를 사용하여 페이지의 메타 태그를 변경할 수 있습니다. 다음은 Javascript 전용 접근 방식입니다.

document.getElementsByTagName('meta')["keywords"].content = "My new page keywords!!";
document.getElementsByTagName('meta')["description"].content = "My new page description!!";
document.title = "My new Document Title!!";

Google이 위의 코드에 대해 이러한 클라이언트 측 변경 사항에 대해 색인을 생성 함을 확인했습니다.

— 팀 모세
소스
3
흥미 롭군요! element = collection[name]구문 을 알려 주셔서 감사 합니다.
— jayms
11

메타 태그는 dom의 일부이며 액세스 할 수 있으며 변경 될 수 있습니다.하지만 검색 엔진 (메타 태그의 주요 소비자)은 자바 스크립트가 실행되지 않으므로 변경 사항을 보지 못합니다. 그래서 브라우저에 영향을 미치는 메타 태그 (새로 고침이 떠오른다)를 변경하지 않는 한, 이것은 거의 쓸모가 없을 수 있습니까?

— 풋타
소스
3
+1-메타 새로 고침에 대해 구체적으로 궁금해했기 때문에이 질문에 착수했습니다. 화면의 데이터를 새로 고치기 위해 ajax 폴링을 사용하는 앱을 만들고 있으며 자바 스크립트가 활성화되지 않은 브라우저에 대한 원유 대체를 제공하고 싶습니다. 기본적으로 메타 새로 고침 태그를 생성하여이 작업을 수행 할 수 있으며 자바 스크립트가 활성화 된 경우 메타 태그를 제거하면됩니다. -이제 실제로 작동하는지 알아보기 위해 ...
— jessegavin
@futtta, 메타 설명 태그는 Opera에서 북마크 설명에 사용되므로 실제로 사용자에게 메타 설명을 변경할 수 있다는 이점이 있습니다.
— XP1 2011 년
11

다음과 같이 가능해야합니다 (또는 $('meta[name=author]').attr("content");다음 과 같은 jQuery 사용 ).

<html>
<head>
<title>Meta Data</title>
<meta name="Author" content="Martin Webb">
<meta name="Author" content="A.N. Other">
<meta name="Description" content="A sample html file for extracting meta data">
<meta name="Keywords" content="JavaScript, DOM, W3C">

</head>

<body>
<script language="JavaScript"><!--
if (document.getElementsByName) {
  var metaArray = document.getElementsByName('Author');
  for (var i=0; i<metaArray.length; i++) {
    document.write(metaArray[i].content + '<br>');
  }

  var metaArray = document.getElementsByName('Description');
  for (var i=0; i<metaArray.length; i++) {
    document.write(metaArray[i].content + '<br>');
  }

  var metaArray = document.getElementsByName('Keywords');
  for (var i=0; i<metaArray.length; i++) {
    document.write(metaArray[i].content + '<br>');
  }
}
//--></script>
</body>

</html>
— 미카엘 스벤슨
소스
10 
$(document).ready(function() {
  $('meta[property="og:title"]').remove();
  $('meta[property="og:description"]').remove();
  $('meta[property="og:url"]').remove();
  $("head").append('<meta property="og:title" content="blubb1">');
  $("head").append('<meta property="og:description" content="blubb2">');
  $("head").append('<meta property="og:url" content="blubb3">');
});
— 사용자 3320390
소스
6
귀하의 예제로 시작했지만 메타 태그를 제거하고 다시 추가 할 필요가 없다는 것을 깨달았습니다. : 당신은이 같은 내용 속성을 변경할 수 있습니다jQuery('meta[property="og:title"]').attr('content', "blubb1");
— 토비아스 Beuving
@ user3320390이 맞습니다. 태그를 제거하는 것과 변경하는 것은 다릅니다. FB는 태그의 값이 아니라 HTML이 작성된 것에 대해 작동합니다.
— Pedro Ferreira 2016 년
5 
var metaTag = document.getElementsByTagName('meta');
for (var i=0; i < metaTag.length; i++) {
    if (metaTag[i].getAttribute("http-equiv")=='refresh')
        metaTag[i].content = '666';
    if (metaTag[i].getAttribute("name")=='Keywords')
        metaTag[i].content = 'js, solver';
}
— LanPartacz
소스
5

더 간단하고 가벼운 솔루션을 사용할 수 있습니다.

document.head.querySelector('meta[name="description"]').content = _desc
— 알리 세이 폴라 히
소스
2

각 메타 태그 예제에 대한 간단한 추가 및 div 속성

<meta id="mtlink" name="url" content="">
<meta id="mtdesc" name="description" content="" />
<meta id="mtkwrds" name="keywords" content="" />

이제 예를 들어 일반 div 변경과 같습니다. n 클릭

<a href="#" onClick="changeTags(); return false;">Change Meta Tags</a>

jQuery를 사용한 함수 변경 태그

function changeTags(){
   $("#mtlink").attr("content","http://albup.com");
   $("#mtdesc").attr("content","music all the time");
   $("#mtkwrds").attr("content","mp3, download music, ");

}
— 부르 한이 브라히미
소스
2

메타 태그가 전혀 없으면 다음을 사용할 수 있습니다.

var _desc = 'Out description';
var meta = document.createElement('meta');
meta.setAttribute('name', 'description');
meta.setAttribute('content', _desc);
document.getElementsByTagName('head')[0].appendChild(meta);
— 로마 인
소스
2

og : title 메타 태그 (또는 기타)를 변경하려는 사람을 위해. 나는 이렇게 할 수 있었다.

document.querySelector('meta[property="og:title"]').setAttribute("content", "Example with og title meta tag");

'meta [property = "og : title"]'에는 NAME이 아닌 PROPERTY라는 단어가 포함되어 있습니다.

— 호르헤 마우리시오
소스
1

아니요, div는 헤드 요소가 아니라 본문 요소입니다.

편집 : 그렇다면 SE가 얻을 수있는 유일한 것은 ajax 수정 된 것이 아닌 기본 HTML입니다.

— 벤
소스
이것이 사실이 아니기를 바랍니다.
— David Spector
1

예, 자바 스크립트로 메타 태그를 추가 할 수 있습니다. 나는 내 예에서했다

Android가 메타 태그 제거를 존중하지 않습니까?

그러나 나는 그것을 제거하고 그것을 변경하는 방법을 모른다. Btw, 내 예에서 .. '추가'버튼을 클릭하면 태그가 추가되고 뷰포트가 각각 변경되지만 되 돌리는 방법을 모르겠습니다 (Android에서 제거) .. Android 용 방화 버그가 있었으면 좋겠습니다. 나는 무슨 일이 일어나고 있는지 보았다. Firefox는 태그를 제거합니다. 누구든지 이것에 대한 아이디어가 있다면 내 질문에 적어주세요.

— Chamilyan
소스
0

색인에 포함

<link rel="opengraph" href="{http://yourPage.com/subdomain.php}"/>

ajaxfiles og : type "og : title"og : description 및 og : image에 있습니다.

그리고 이것도 추가하십시오

<link rel="origin" href={http://yourPage.com}/>

그런 다음 ajaxCall 뒤에 js를 추가하십시오.

FB.XFBML.parse();

편집 : 그런 다음 txt / php douments에서 올바른 제목과 이미지를 페이스 북에 표시 할 수 있습니다 (내 이름은 확장자로 .php이지만 더 많은 txt 파일 임). 그런 다음 이러한 파일에 메타 태그가 있고 모든 문서의 색인에 대한 링크가 있으며 모든 하위 파일에 대한 색인 파일의 메타 링크도 있습니다.

누구든지 이것을하는 더 나은 방법을 알고 있다면 어떤 추가 사항을 고맙게 생각합니다. :)

— Sunto
소스
이것은 메타 태그를 동적으로 추가하는 방법에 대한 질문에 대한 대답이 아닌 것 같습니다.
— Alex
0

이것은 약간의 변화없이 모바일과 다른 브라우저 모두에서 실행되어야하는 약간 엄격하게 기하학적으로 설정된 앱에서 작동하는 것처럼 보이므로 모바일 / 비 모바일 브라우저 상태를 찾고 모바일의 경우 뷰포트를 장치 너비로 설정해야합니다. 헤더에서 스크립트를 실행할 수 있으므로 헤더의 아래 js는 페이지가로드되기 전에 장치 너비에 대한 메타 태그를 변경하는 것 같습니다. navigator.userAgent의 사용은 실험적인 것으로 규정되어 있습니다. 스크립트는 변경하려면 메타 태그 항목을 따라야하므로 일부 초기 콘텐츠를 선택한 다음 조건에 따라 변경해야합니다. 

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script>  
  var userAgentHeader = navigator.userAgent ; 
  var browserIsMobileOrNot = "mobileNOT" ; 
  if( userAgentHeader.includes( "Mobi" ) ) { 
    browserIsMobileOrNot = "mobileYES" ; 
    //document.querySelector('meta[name="viewport"]').setAttribute( "content", "width=device-width, initial-scale=1.0" );
  } else { 
    browserIsMobileOrNot = "mobileNOT" ;  
    document.querySelector('meta[name="viewport"]').setAttribute( "content", "");
  }
</script>

<link rel="stylesheet" href="css/index.css">

. . . . . .

— jcj52436999
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.