자바스크립트를 사용하여 페이지의 메타 태그를 변경할 수 있습니까?
만약 내가 머리에 div를 넣고 none을 표시한다면, 자바스크립트를 사용하여 표시하는 것보다, 이것이 작동할까요?
편집:
나는 AJAX에 짐을 싣고 있습니다.그리고 제 AJAX가 사이트의 "메인" 부분을 변경할 때 메타 태그도 변경하고 싶습니다.
네.
예: 메타 설명을 설정합니다.
document.querySelector('meta[name="description"]').setAttribute("content", _desc);
네, 그렇게 하시면 됩니다.
몇 가지 흥미로운 사용 사례가 있습니다.일부 브라우저 및 플러그인은 메타 요소를 구문 분석하고 다른 값에 대한 동작을 변경합니다.
예
Skype: 전화 번호 구문 분석기 끄기
<meta name="SKYPE_TOOLBAR" content="SKYPE_TOOLBAR_PARSER_COMPATIBLE">
iPhone: 전화 번호 구문 분석기 끄기
<meta name="format-detection" content="telephone=no">
Google Chrome 프레임
<meta http-equiv="X-UA-Compatible" content="chrome=1">
모바일 장치의 뷰포트 정의
<meta name="viewport" content="width=device-width, initial-scale=1.0">
이것은 자바스크립트로 변경할 수 있습니다.참고: iPhone 뷰포트 크기 버그 수정
메타 설명
일부 사용자 에이전트(예: 오페라)는 책갈피에 대한 설명을 사용합니다.여기에 개인화된 콘텐츠를 추가할 수 있습니다.예:
<!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>
그래서, 이것은 단지 검색 엔진에 관한 것이 아닙니다.
(jQuery와 함께) 다음과 같은 것을 사용할 수 있습니다.
$('meta[name=author]').attr('content', 'New Author Name');
그러나 메타 태그는 일반적으로 문서가 로드될 때만 스크랩되기 때문에 자바스크립트를 실행하지 않습니다.
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!!";
구글이 위의 코드에 대해 이러한 클라이언트 측 변경 사항을 색인화하는 것을 확인했습니다.
예를 들어 다음과 같은 jQuery 호출을 사용하여 메타를 변경할 수 있습니다.
$('meta[name=keywords]').attr('content', new_keywords);
$('meta[name=description]').attr('content', new_description);
구글이 아약스 콘텐츠를 색인화할 것이라고 말했기 때문에 현재로서는 문제가 있다고 생각합니다.#!hashes그리고._escaped_fragment_이제 그들은 그것을 확인할 수 있습니다. (헤드리스 브라우저를 사용하는 경우에도 자동으로 위에 언급된 페이지의 'HTML 스냅샷 생성' 링크를 참조하십시오.) 그래서 하드코어 SEO 남자들을 위한 방법이라고 생각합니다.
보다 간단하고 가벼운 솔루션을 사용할 수 있습니다.
document.head.querySelector('meta[name="description"]').content = _desc
메타데이터는 돔의 일부이며 액세스 및 변경이 가능하지만, 검색 브라우저(메타데이터의 주요 소비자)는 자바스크립트가 실행되지 않기 때문에 변경 사항을 보지 못합니다.그래서 브라우저에 의미가 있는 메타 태그(생각나는 대로)를 변경하지 않는 한, 이것은 거의 쓸모가 없을 수도 있습니까?
이렇게 가능해야 합니다(또는 jQuery를 사용합니다).$('meta[name=author]').attr("content");):
<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>
$(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">');
});
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';
}
name 특성을 사용하면 하위 목록을 통해 요소 이름(예: ID)으로 요소를 참조할 수 있으므로 빠른 방법은 다음과 같습니다.
document.head.children.namedItem('description').content = '...'
아니면 그냥:
document.head.children.description.content = '...'
그러나 이러한 메타 태그가 있는지 확실하지 않으면 다음과 같은 검사를 추가하는 것이 좋습니다.
let metaDescription = document.head.children.description
if (metaDescription == null) {
metaDescription = document.createElement('meta')
metaDescription.name = 'description'
document.head.append(metaDescription)
}
metaDescription.content = '...'
og:title 메타 태그(또는 다른 태그)를 변경하려는 사용자.저는 이런 식으로 할 수 있었습니다.
document.querySelector('meta[property="og:title"]').setAttribute("content", "Example with og title meta tag");
'property[property="og:property"]'에는 NAME이 아닌 단어가 포함되어 있습니다.
각 메타 태그에 대한 단순 추가 및 분할 속성 예제
<meta id="mtlink" name="url" content="">
<meta id="mtdesc" name="description" content="" />
<meta id="mtkwrds" name="keywords" content="" />
이제 ex.n 클릭에 대한 일반적인 div 변화처럼.
<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, ");
}
메타 태그가 전혀 없는 경우 다음을 사용할 수 있습니다.
var _desc = 'Out description';
var meta = document.createElement('meta');
meta.setAttribute('name', 'description');
meta.setAttribute('content', _desc);
document.getElementsByTagName('head')[0].appendChild(meta);
아니요, 디브는 머리가 아니라 몸의 요소입니다.
편집: 그러면 SE가 얻을 수 있는 것은 아약스가 수정한 HTML이 아니라 기본 HTML뿐입니다.
네, 자바스크립트로 메타태그 추가가 가능합니다.예를 들어 설명했습니다.
하지만 제거하는 것 외에 다른 방법으로 변경할 수 있는 방법을 모르겠습니다.그나저나, 내 예에서..'추가' 버튼을 클릭하면 태그가 추가되고 뷰포트가 각각 변경되지만 되돌리는 방법을 모르겠습니다(안드로이드에서 제거).안드로이드용 파이어버그가 있었으면 해서 무슨 일이 일어나고 있는지 보았습니다.파이어폭스는 태그를 제거합니다. 만약 이것에 대한 아이디어가 있는 사람이 있다면 제 질문에 그렇게 적어주세요.
var description=document.getElementsByTagName('h4')[0].innerHTML;
var link = document.createElement('meta');
link.setAttribute('name', 'description');
link.content = description;
document.getElementsByTagName('head')[0].appendChild(link);
var htwo=document.getElementsByTagName('h2');
var hthree=document.getElementsByTagName('h3');
var ls=[];
for(var i=0;i<hthree.length;i++){ls.push(htwo[i].innerHTML);}
for(var i=0;i<hthree.length;i++){ls.push(hthree[i].innerHTML);}
var keyword=ls.toString()
;
var keyw = document.createElement('meta');
keyw.setAttribute('name', 'keywords');
keyw.content = keyword;
document.getElementsByTagName('head')[0].appendChild(keyw);
저의 경우, 저는 이 코드를 작성하고 제 모든 메타 태그는 완벽하게 작동하지만 우리는 그것이 어딘가에 숨겨져 있을 실제 메타 태그를 볼 수 없습니다.
이것을 색인에 넣으시오.
<link rel="opengraph" href="{http://yourPage.com/subdomain.php}"/>
agax files og:type "og:type" og:debug" og:description 및 og:image에 있습니다.
그리고 이것 또한 추가합니다.
<link rel="origin" href={http://yourPage.com}/>
그런 다음 ajaxCall 뒤에 j를 추가합니다.
FB.XFBML.parse();
편집: 그런 다음 txt/php 문서에 올바른 제목과 이미지를 Facebook에 표시할 수 있습니다(내 것은 확장자로 .php로 이름 지어졌을 뿐이지만 더 많은 txt 파일임).그런 다음 이 파일에 메타 태그가 있고, 모든 문서의 인덱스에 대한 링크가 다시 있으며, 모든 하위 파일에 대한 인덱스 파일의 메타 링크도 있습니다.
더 나은 방법을 아는 사람이 있다면 추가해 주시면 감사하겠습니다 :)
이것은 거의 변화 없이 모바일과 다른 브라우저에서 실행되어야 하는 약간 경직된 기하학적으로 설정된 앱에 효과가 있는 것으로 보이며, 따라서 모바일/비모바일 브라우저 상태를 찾고 모바일의 경우 뷰포트를 장치 너비로 설정해야 합니다.헤더에서 스크립트를 실행할 수 있기 때문에 아래 jsin 헤더는 페이지가 로드되기 전에 장치 너비에 대한 메타태그를 변경하는 것 같습니다.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">
. . . . . .
다음은 일반 자바스크립트로 실행하는 방법입니다.새로운 Safari 15 베타에서 헤더 색상을 변경하는 데 사용했습니다.
<html><head>
<meta id="themeColor" name="theme-color" content="">
</head><body><script>
var delay = 50;
var increment = 5;
var current = 0 - increment;
function setHeaderColor(){
current += increment;
if (current > 360) current = 0;
var colorStr = 'hsl('+current+',100%,50%)';
themeColor.content = colorStr;
textBlock.style.color = colorStr;
}
setInterval(setHeaderColor, delay);
</script><pre id="textBlock" style="font-size:30px;">
Needs Safari 15
</pre></body></html>
언급URL : https://stackoverflow.com/questions/2568760/is-it-possible-to-use-javascript-to-change-the-meta-tags-of-the-page
'IT' 카테고리의 다른 글
| 쿼리선택기 대 getElementBy이드 (0) | 2023.08.06 |
|---|---|
| 구독에서 관찰 가능한 항목을 반환하는 방법 (0) | 2023.08.06 |
| Controls 컬렉션에서 IEnumberable 메서드를 모두 제공하지 않는 이유는 무엇입니까? (0) | 2023.08.06 |
| 검색 뷰를 사용하여 Recycler 뷰를 필터링하는 방법 (0) | 2023.08.06 |
| 타임리프를 사용하여 템플릿을 부모 레이아웃으로 래핑 (0) | 2023.08.06 |