เป็นไปได้ไหมที่จะใช้ JavaScript เพื่อเปลี่ยนเมตาแท็กของเพจ

114

ถ้าฉันใส่ div ไว้ในส่วนหัวและ display: none ใช้ JavaScript เพื่อแสดงมากกว่านี้จะใช้ได้ไหม

แก้ไข:

ฉันมีสิ่งของมากมายใน AJAX และเมื่อ AJAX ของฉันเปลี่ยนส่วน "หลัก" ของไซต์ฉันก็ต้องการเปลี่ยนเมตาแท็กด้วย

javascript jquery meta-tags

— TIMEX
แหล่งที่มา

47

เหมือนกับการสวมรองเท้าเป็นหมวก

— Ben

8

หรือใช้โปรแกรมแก้ไขข้อความเป็นอุดมคติ ไม่ต้องรอถือว่าเจ๋งแล้ว

— Dan Rosenstark

23

คุณพูดถูกฉันโง่

— TIMEX

2

สวัสดี TIMEX อาจจะมีการเปลี่ยนแปลงของคำตอบที่ยอมรับแล้ว? หากไม่มีเหตุผลอื่นนอกจากให้ Byron พักการโหวตสำหรับคำตอบที่ล้าสมัยของเขา

— Alex

1

ฉันต้องการทำสิ่งนี้เพื่อให้ฉันสามารถจัดการเมตาแท็ก (โดยเฉพาะอย่างยิ่ง) ด้วยเฟรมเวิร์กจาวาสคริปต์ของฉันจากนั้นให้เอ็นจินการแสดงผลล่วงหน้าของฉันเขียน / แคชสิ่งนี้สำหรับโปรแกรมรวบรวมข้อมูล มิฉะนั้นฉันต้องการมิดเดิลแวร์เพิ่มเติมเพื่อกำหนดแท็กจาก API ของฉันก่อนที่จะแสดงดัชนี SPA ของฉันซึ่งจะทำให้การโหลดช้าลงสำหรับสิ่งหนึ่ง ...

— Soft Bullets

161

ใช่คุณสามารถทำได้

มีกรณีการใช้งานที่น่าสนใจ: เบราว์เซอร์และปลั๊กอินบางตัวแยกวิเคราะห์องค์ประกอบเมตาและเปลี่ยนพฤติกรรมสำหรับค่าต่างๆ

ตัวอย่าง

Skype: ปิดตัวแยกวิเคราะห์หมายเลขโทรศัพท์

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

iPhone: ปิดตัวแยกวิเคราะห์หมายเลขโทรศัพท์

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

Google Chrome Frame

<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

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]);Chrome บน Android ตรวจพบการอัปเดตและเปลี่ยนสี

— Dominic Bartl

150

ใช่แล้ว.

เช่นการตั้งค่า meta-description:

document.querySelector('meta[name="description"]').setAttribute("content", _desc);

— เจย์
แหล่งที่มา

23

ดีใจที่มีคนให้คำตอบด้วย pure js (ตามที่ขอในคำถาม)!

— Soft Bullets

สวัสดี jayms ขอบคุณสำหรับทิป. แต่ฉันลองใช้วิธีนี้เพื่อพยายามเปลี่ยนแท็ก og: title แต่ไม่ได้ผล นี่คือวิธีที่ฉันทำ: document.querySelector ('meta [name = "og: title"]') setAttribute ("content", "Example with title meta tag"); ความคิดใด ๆ ?

— 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

8

ในกรณีที่คนอื่นกำลังมองหาวิธีแก้ปัญหานี้คุณต้องใส่เครื่องหมายคำพูดรอบ ๆ og: somestuff - ฉันต้องการเนื้อหาของแท็กรูปภาพนี่คือรหัสของฉัน: var imgurl = $ ("meta [property = 'og: image '] "). attr (" เนื้อหา ");

— Daniel

2

ได้รับการยืนยันว่าใช้งานได้กับการตั้งค่าเมตาวิวพอร์ต (จำเป็นต้องใช้สิ่งนี้เพื่อเปิด / ปิดการซูมสำหรับบางหน้าย่อยบน jQuery Mobile) ขอบคุณ!

— NPC

1

@stealthcopter ฉันสามารถตรวจสอบได้ว่าสิ่งนี้ไม่ได้ :( รอได้ แต่การเปลี่ยนแปลงไม่ปรากฏในหน้าต่าง "แหล่งที่มาของมุมมอง" ของ FFox .. ?

— yPhil

1

@yPhil นี่คือ javascript (หรือ jQuery) ดังนั้นการเปลี่ยนแปลงใด ๆ และทั้งหมดที่คุณทำกับ DOM จะไม่ปรากฏเมื่อดูซอร์สโค้ดจากเบราว์เซอร์ จะแสดงเมื่อคุณใช้เครื่องมือของนักพัฒนาเพื่อดูแหล่งที่มา แหล่งที่มาของเบราว์เซอร์จะถูกโหลดเพียงครั้งเดียวเมื่อหน้าโหลด .. คำขอ ajax จะไม่โหลดหน้า

— Zubair1

34

คุณสามารถเปลี่ยนเมตาได้ด้วยตัวอย่างเช่นการโทร jQuery เช่นนี้:

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

ฉันคิดว่ามันไม่ว่าตอนนี้เนื่องจาก Google กล่าวว่าพวกเขาจะเนื้อหาดัชนี Ajax ผ่าน#!hashesและ_escaped_fragment_โทร และตอนนี้พวกเขาสามารถตรวจสอบได้แล้ว (แม้จะใช้เบราว์เซอร์แบบไม่มีหัวโดยอัตโนมัติโปรดดูลิงก์ "การสร้างสแนปชอต HTML" ในหน้าดังกล่าวข้างต้น) ดังนั้นฉันคิดว่ามันเป็นวิธีสำหรับพวก SEO ที่ไม่ยอมใครง่ายๆ

— eyedmax
แหล่งที่มา

3

ขอบคุณสำหรับสิ่งนี้. เพิ่งแก้ปัญหาของฉัน เนื่องจาก facebook เปิดกราฟ ไซต์ที่ฉันกำลังพัฒนามีปลั๊กอิน History jQuery และแฮชแท็ก ดังนั้น URL และคำอธิบายของกราฟที่เปิดของ FB จึงต้องมีการเปลี่ยนแปลงเมื่อมีการเปลี่ยนแปลงแฮช +1 สำหรับคำตอบที่ดีและไม่คิดลบต่อคำถามที่ยุติธรรม

— Damien Keitel

5

ที่จริงแล้วตอนนี้ Google สามารถเรียกใช้ javascript ได้แล้วโดยไม่จำเป็นต้องสร้างภาพรวมของหน้าดังนั้นตอนนี้เมตาแท็กแบบไดนามิกจึงมีความสำคัญมาก!

— Francesco Abbruzzese

33

เป็นไปได้อย่างแน่นอนที่จะใช้ Javascript เพื่อเปลี่ยนเมตาแท็กของเพจ นี่เป็นวิธีการเฉพาะของ 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

เมตาแท็กเป็นส่วนหนึ่งของโดเมนและสามารถเข้าถึงได้และ - ฉันเดา - เปลี่ยนแปลงได้ แต่เครื่องมือค้นหา (ผู้บริโภคหลักของเมตาแท็ก) จะไม่เห็นการเปลี่ยนแปลงเนื่องจากจาวาสคริปต์จะไม่ทำงาน ดังนั้นหากคุณไม่เปลี่ยนเมตาแท็ก (นึกถึงการรีเฟรช) ซึ่งมีผลกระทบในเบราว์เซอร์สิ่งนี้อาจมีประโยชน์น้อย?

— Futtta
แหล่งที่มา

3

+1 - ฉันถามคำถามนี้เพราะฉันสงสัยเป็นพิเศษเกี่ยวกับการรีเฟรชเมตา ฉันกำลังสร้างแอปที่ใช้ ajax polling เพื่อรีเฟรชข้อมูลบนหน้าจอและฉันต้องการให้ข้อมูลสำรองสำหรับเบราว์เซอร์ที่ไม่ได้เปิดใช้งานจาวาสคริปต์ ฉันคิดว่าจะทำได้โดยการสร้างเมตาแท็กรีเฟรชตามค่าเริ่มต้นและหากเปิดใช้งานจาวาสคริปต์ให้ลบเมตาแท็กออก - ตอนนี้เพื่อดูว่ามันใช้งานได้จริง ...

— jessegavin

@futtta แท็กคำอธิบายเมตาใช้สำหรับคำอธิบายบุ๊กมาร์กใน Opera ดังนั้นจึงมีประโยชน์สำหรับผู้ใช้ที่คำอธิบายเมตาของคุณสามารถเปลี่ยนแปลงได้

— 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">');
});

— ผู้ใช้ 3320390
แหล่งที่มา

6

ฉันเริ่มต้นด้วยตัวอย่างของคุณ แต่ตระหนักว่าคุณไม่จำเป็นต้องลบและเพิ่มเมตาแท็กใหม่ คุณสามารถเปลี่ยนแอตทริบิวต์เนื้อหาได้ดังนี้jQuery('meta[property="og:title"]').attr('content', "blubb1");

— Tobias Beuving

คุณถูกต้อง @ user3320390 การลบแท็กต่างจากการเปลี่ยนแท็ก FB ทำหน้าที่เขียน HTML และไม่ใช่สำหรับค่าของแท็ก

— Pedro Ferreira

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

— อาลี Seyfollahi
แหล่งที่มา

2

เพิ่มและ div atribute อย่างง่ายให้กับแต่ละตัวอย่างเมตาแท็ก

<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 "]" มีคำว่า PROPERTY ไม่ใช่ NAME

— Jorge Mauricio
แหล่งที่มา

1

ไม่ div เป็นองค์ประกอบของร่างกายไม่ใช่องค์ประกอบส่วนหัว

แก้ไข: สิ่งเดียวที่ SE จะได้รับคือ HTML พื้นฐานไม่ใช่ ajax ที่แก้ไข

— เบน
แหล่งที่มา

ฉันหวังว่านี่จะไม่เป็นความจริง

— David Spector

1

ได้คุณสามารถเพิ่มเมตาแท็กด้วย Javascript ได้ ฉันทำในตัวอย่างของฉัน

Android ไม่เคารพการลบเมตาแท็ก?

แต่ฉันไม่รู้วิธีเปลี่ยนเป็นอย่างอื่นแล้วลบออก Btw ในตัวอย่างของฉัน .. เมื่อคุณคลิกปุ่ม 'เพิ่ม' มันจะเพิ่มแท็กและวิวพอร์ตจะเปลี่ยนไปตามลำดับ แต่ฉันไม่รู้วิธีเปลี่ยนกลับ (ลบออกใน Android) .. ฉันหวังว่าจะมี firebug สำหรับ Android ดังนั้น ฉันเห็นสิ่งที่เกิดขึ้น Firefox จะลบแท็ก หากใครมีความคิดเห็นเกี่ยวกับเรื่องนี้โปรดทราบในคำถามของฉัน

— Chamilyan
แหล่งที่มา

0

มีสิ่งนี้ในดัชนี

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

มีสิ่งนี้ใน ajaxfiles og: พิมพ์ "og: title" og: description และ og: image

และเพิ่มสิ่งนี้ด้วย

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

จากนั้นเพิ่ม js หลัง ajaxCall

FB.XFBML.parse();

แก้ไข: จากนั้นคุณสามารถแสดงชื่อและรูปภาพที่ถูกต้องไปยัง facebook ใน 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
แหล่งที่มา