क्या पेज के मेटा-टैग को बदलने के लिए जावास्क्रिप्ट का उपयोग करना संभव है?

114

यदि मैं सिर में एक डिव लगाता हूं और प्रदर्शित करता हूं: कोई नहीं, तो इसे प्रदर्शित करने के लिए जावास्क्रिप्ट का उपयोग करें, क्या यह काम करेगा?

संपादित करें:

मेरे पास AJAX में भरा हुआ सामान है। और जैसे ही मेरा AJAX साइट के "मुख्य" भाग को बदलता है, मैं मेटा-टैग भी बदलना चाहता हूँ।

javascript  jquery  meta-tags 
— TIMEX
स्रोत
47
यह एक टोपी के रूप में एक जूता पहनने की तरह है
— बेन
8
या एक विचारधारा के रूप में एक पाठ संपादक का उपयोग कर। कोई प्रतीक्षा नहीं, वह शांत मानी जाती है।
— दान रोसेनस्टार्क
23
आप सही कह रहे हैं मैं बेवकूफ हूँ
— TIMEX
2
हाय TIMEX, शायद स्वीकृत उत्तर का एक परिवर्तन अपनी जगह पर है? यदि कोई अन्य कारण नहीं है, लेकिन बायरन को अपने पुराने उत्तर के लिए चढ़ाव पर ब्रेक देना है।
— एलेक्स
1
मैं ऐसा करना चाहता हूं, इसलिए मैं अपने जावास्क्रिप्ट फ्रेमवर्क के साथ मेटा टैग (विशेष रूप से ओग) का प्रबंधन कर सकता हूं, फिर क्रॉलर के लिए मेरे प्रियरेंडर इंजन को लिखें / कैश करें। अन्यथा मुझे अपने एसपीए के सूचकांक को प्रस्तुत करने से पहले अपने एपीआई से टैग निर्धारित करने के लिए अतिरिक्त मिडलवेयर की आवश्यकता होगी, जो लोडिंग को धीमा कर देगा, एक चीज़ के लिए ...
— सॉफ्ट बुलेट

जवाबों:

161

हां, आप यह कर सकते हैं।

कुछ दिलचस्प उपयोग के मामले हैं: कुछ ब्राउज़र और प्लगइन्स मेटा तत्वों को पार्स करते हैं और विभिन्न मूल्यों के लिए उनके व्यवहार को बदलते हैं।

उदाहरण

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>

तो, यह केवल खोज इंजन के बारे में नहीं है।

— FUXIA
स्रोत
9
मुझे सबसे अधिक संदेह है कि इस तरह के प्रभाव पृष्ठ के लोड होने के बाद परिवर्तनशील नहीं होते हैं। लेकिन हाँ, मेटा बस keywordsऔर से कहीं अधिक है description।
— बोबिन्स
2
@bobince: वास्तव में, SKYPE_TOOLBAR एक अभी भी प्रभावी होता है यदि आप इसे js के साथ सम्मिलित करते हैं (जो कि html5 सत्यापनकर्ता के रूप में उपयोगी है, वह मेटा टैग पसंद नहीं करता है)।
— DaedalusFall
1
@DaedalusFall: हाँ, मुझे लगता है कि आप केवल document.writeहेडर के साथ ऐसा कर सकते हैं , हालांकि पेज लोड होने के बाद इसे बदलने में बहुत देर हो चुकी है क्योंकि Skype पहले से ही DOM, भयानक चीज़ मंगवा चुका होगा!
— बॉब
1
यह फेसबुक जैसी सेवाओं के लिए सामाजिक साझाकरण के साथ बहुत उपयोगी है। उदाहरण के लिए, og को बदलने के लिए: शीर्षक तत्व: $('meta[property="og:title"]').replaceWith('<meta property="og:title" content="New Title">');
— bdanin
2
आप इसके साथ कुछ अच्छा सामान कर सकते हैं। जब हेडर में स्लाइड बदलती है तो मैं क्रोम एड्रेस बार का रंग बदलता हूं। const meta = document.querySelector('meta[name=theme-color]'); meta.setAttribute("content", colors[slideIndex]);Android पर Chrome अपडेट का पता लगाता है और रंग बदलता है
— डोमिनिक बार्टल
149

हाँ यही है।

जैसे मेटा-विवरण सेट करने के लिए:

document.querySelector('meta[name="description"]').setAttribute("content", _desc);
— jayms
स्रोत
23
खुशी है कि किसी ने शुद्ध जेएस में जवाब दिया (जैसा कि प्रश्न में अनुरोध किया गया है)!
— सॉफ्ट बुलेट्स
हाय जयम पारितोषिक के लिए धन्यवाद। लेकिन मैंने इस विधि को ओग: टाइटल टैग को बदलने की कोशिश की, लेकिन काम नहीं किया। यहाँ मैंने यह कैसे किया: document.querySelector ('meta [name = "og: title]]]; setAttribute (" सामग्री ", शीर्षक मेटा टैग के साथ उदाहरण"); कोई विचार?
— जॉर्ज मौरिसियो
1
यह आप के लिए क्वेरी करने की आवश्यकता होगी लगता है propertyविशेषता, नहीं nameविशेषता, यानीmeta[property="og:title"]
— jayms
69

आप (jQuery के साथ) कुछ का उपयोग करेंगे:

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

लेकिन यह ज्यादातर व्यर्थ होगा क्योंकि मेटा टैग आमतौर पर केवल तब ही स्क्रैप किया जाता है जब दस्तावेज़ लोड किया जाता है, आमतौर पर किसी भी जावास्क्रिप्ट को निष्पादित किए बिना।

— MiffTheFox
स्रोत
7
यह चयनकर्ताओं के साथ भी काम करता है $('meta[property=og:somestuff]'), जैसे कि मुझे संदेह था कि यह बृहदान्त्र के कारण jQuery के चयन सिंटैक्स के साथ टकराएगा।
— पोऊ। मोरेनो
8
यदि कोई अन्य व्यक्ति इस सटीक समाधान की तलाश में है, तो आपको ओग के आसपास उद्धरण देने की आवश्यकता है: सोमेस्टफ - मुझे छवि टैग की सामग्री की आवश्यकता है, यह मेरा कोड था: var imgurl = $ ("मेटा [संपत्ति = '): छवि '] "।) attr (" सामग्री ");
— डैनियल
2
पुष्टि की गई कि यह मेटा व्यूपोर्ट सेटिंग के लिए काम करता है (इसे jQuery मोबाइल पर कुछ उपपृष्ठों के लिए ज़ूम को सक्षम / अक्षम करने के लिए आवश्यक है)। धन्यवाद!
— एनपीसी
1
@stealthcopter मैं सत्यापित कर सकता हूं कि यह नहीं है :( प्रतीक्षा करें, यह करता है, लेकिन FFox के "दृश्य स्रोत" विंडो में परिवर्तन दिखाई नहीं दे रहे हैं?
— yPhil
1
@yPhil यह जावास्क्रिप्ट (या jQuery) है ताकि आप और DOM में किए गए सभी परिवर्तन ब्राउज़र से सोर्स कोड देखते समय परिलक्षित न हों। जब आप स्रोत को देखने के लिए डेवलपर के टूल का उपयोग करते हैं तो यह प्रतिबिंबित होगा। ब्राउज़र स्रोत केवल एक बार लोड होता है जब पृष्ठ लोड होता है .. ajax अनुरोध अनुरोध पृष्ठ लोड नहीं होते हैं।
— जुबैर 1
34

आप मेटा को बदल सकते हैं, उदाहरण के लिए, jQuery कॉल, जैसे यह:

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

मैं यह लगता है कि करता है अब के लिए बात है, के बाद से गूगल ने कहा है कि वे के माध्यम से सूचकांक ajax सामग्री होगा #!hashesऔर _escaped_fragment_कॉल। और अब वे इसे सत्यापित कर सकते हैं (यहां तक ​​कि स्वचालित रूप से, हेडलेस ब्राउज़र के साथ, ऊपर वर्णित पृष्ठ पर 'बनाना HTML स्नैपशॉट' लिंक देखें), इसलिए मुझे लगता है कि यह कट्टर एसईओ लोगों के लिए रास्ता है।

— eyedmax
स्रोत
3
इसके लिए शुक्रिया। बस मेरी समस्या हल हो गई। जैसे कि फेसबुक का खुला ग्राफ है। मैं जिस साइट को विकसित कर रहा हूं उसमें एक इतिहास jQuery प्लगइन और हैश टैग हैं। तो FB ओपन ग्राफ url और विवरण को बदलने की जरूरत है जब कभी कोई हैश परिवर्तन मौजूद है। एक महान जवाब के लिए +1 और निष्पक्ष प्रश्न के प्रति नकारात्मक नहीं होना।
— डेमियन केटेल
5
दरअसल, अब javascript को google चलाने में सक्षम है, पेज स्नैपशॉट बनाने की कोई आवश्यकता नहीं है, इसलिए अब डायनामिक मेटाटैग बहुत मायने रखता है!
— फ्रांसेस्को अब्रुजेसिज
33

पेज के मेटा टैग को बदलने के लिए जावास्क्रिप्ट का उपयोग करना निश्चित रूप से संभव है। यहाँ एक जावास्क्रिप्ट केवल दृष्टिकोण है:

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

मेटा-टैग डोम का हिस्सा हैं और इन्हें एक्सेस किया जा सकता है और -आई-अनुमान लगाया गया है, लेकिन खोज-इंजन (मेटा-टैग के मुख्य उपभोक्ता) परिवर्तन को नहीं देखेंगे क्योंकि जावास्क्रिप्ट निष्पादित नहीं किया जाएगा। इसलिए जब तक आप मेटा-टैग नहीं बदल रहे हैं (ताज़ा दिमाग में आ जाता है) जिसका ब्राउज़र में निहितार्थ है, यह बहुत कम काम आ सकता है?

— futtta
स्रोत
3
+1 - मैं इस सवाल पर उतरा क्योंकि मैं विशेष रूप से मेटा रिफ्रेश के बारे में सोच रहा था। मैं एक ऐप बना रहा हूं जो स्क्रीन पर डेटा को रिफ्रेश करने के लिए अजाक्स पोलिंग का उपयोग करता है और मैं उन ब्राउज़रों के लिए एक क्रैकबैक प्रदान करना चाहता हूं जिनके पास जावास्क्रिप्ट सक्षम नहीं है। मैं सोच रहा हूं कि मैं डिफ़ॉल्ट रूप से मेटा ताज़ा टैग बनाकर इसे पूरा कर सकता हूं और यदि जावास्क्रिप्ट सक्षम है, तो बस मेटा टैग हटा दें। - अब यह देखने के लिए कि क्या यह वास्तव में काम करता है ...
— jessegavin
@futtta, मेटा विवरण टैग का उपयोग ओपेरा में बुकमार्क विवरणों के लिए किया जाता है, इसलिए उपयोगकर्ता को वास्तव में एक लाभ है कि आपके मेटा विवरण को बदला जा सकता है।
— XP1
11

यह इस तरह संभव होना चाहिए (या 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>
— मिकेल स्वेन्सन
स्रोत
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">');
});
— user3320390
स्रोत
6
मैंने आपके उदाहरण के साथ शुरुआत की, लेकिन महसूस किया कि आपको मेटा-टैग हटाने और पुनः जोड़ने की आवश्यकता नहीं है। आप इस तरह से केवल सामग्री-विशेषता को बदल सकते हैं:jQuery('meta[property="og:title"]').attr('content', "blubb1");
— तोबियों को
आप सही हैं @ user3320390। यह टैग को बदलने से अलग हटा रहा है। एफबी HTML टैग्स के मूल्यों के लिए HTML लिखा और नहीं के लिए कार्य करता है।
— पेड्रो फरेरा
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
स्रोत
2

प्रत्येक मेटा टैग उदाहरण में सरल ऐड और डिवोशन

<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

ओग बदलने की कोशिश कर रहे किसी के लिए: शीर्षक मेटा टैग (या कोई अन्य)। मैं इसे इस तरह से करने में कामयाब रहा:

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

ध्यान दें कि 'मेटा [प्रॉपर्टी = "ओग: टाइटल"] में प्रॉपर्टी शब्द है, न कि NAME।

— जोर्ज मौरिसियो
स्रोत
1

नहीं, एक div एक शरीर तत्व है, एक सिर तत्व नहीं है

संपादित करें: तब केवल एक चीज जो एसई को मिलने वाली है वह है आधार एचटीएमएल, न कि अजाक्स संशोधित।

— बेन
स्रोत
मुझे आशा है कि यह सच नहीं है।
— डेविड स्पेक्टर
1

हां, जावास्क्रिप्ट के साथ मेटाटैग जोड़ना संभव है। मैंने अपने उदाहरण में किया

एंड्रॉयड मेटाटैग हटाने का सम्मान नहीं कर रहा है?

लेकिन, मुझे नहीं पता कि इसे कैसे बदला जाए और फिर इसे हटा दिया जाए। Btw, मेरे उदाहरण में .. जब आप 'ADD' बटन पर क्लिक करते हैं, तो यह टैग और व्यूपोर्ट को क्रमशः जोड़ता है, लेकिन मुझे नहीं पता कि इसे वापस कैसे लौटाया जाए (इसे हटाएं, एंड्रॉइड में) .. काश एंड्रॉइड के लिए फायरबग होता। मैंने देखा कि क्या हो रहा था। फ़ायरफ़ॉक्स टैग को हटा देता है। अगर किसी को इस पर कोई विचार है तो कृपया मेरे प्रश्न में ध्यान दें।

— Chamilyan
स्रोत
0

यह सूचकांक में है

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

इस ajaxfiles ओग में है: "og: टाइटल" og: डिस्क्रिप्शन और ओग: इमेज

और यह भी जोड़ें

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

फिर ajaxCall के बाद js में जोड़ें

FB.XFBML.parse();

संपादित करें: तब आप txt / php douments में मेरा सही शीर्षक और छवि प्रदर्शित कर सकते हैं (मेरा सिर्फ एक्सटेंशन के रूप में .php है, लेकिन अधिक txt फ़ाइलें हैं)। मैं तो इन फ़ाइलों में मेटा टैग है, और हर दस्तावेज़ में अनुक्रमणिका के लिए लिंक, भी हर सबफ़ाइल के लिए सूचकांक फ़ाइल में एक मेटा लिंक ..

अगर किसी को यह करने का एक बेहतर तरीका पता है कि मैं किसी भी अतिरिक्त की सराहना करेंगे :)

— Sunto
स्रोत
यह इस सवाल का जवाब नहीं लगता है कि कैसे मेटा-टैग को गतिशील रूप से जोड़ा जाए?
— एलेक्स
0

ऐसा लगता है कि यह थोड़ा कठोर ज्यामितीय रूप से सेट ऐप के लिए काम कर रहा है, जहाँ इसे मोबाइल और अन्य ब्राउज़रों दोनों पर थोड़े बदलाव के साथ चलाने की आवश्यकता होती है, इसलिए मोबाइल / गैर-मोबाइल ब्राउज़र की स्थिति का पता लगाने के लिए और व्यूपोर्ट को डिवाइस-चौड़ाई पर सेट करने के लिए आवश्यक है। जैसा कि स्क्रिप्ट को हेडर से चलाया जा सकता है, हेडर में नीचे दिए गए जेएस पेज लोड होने से पहले डिवाइस की चौड़ाई के लिए मेटाटैग को बदलते हैं। एक ध्यान दें कि 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
स्रोत
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.