Có thể sử dụng JavaScript để thay đổi các thẻ meta của trang không?

112

Nếu tôi đặt một div vào đầu và hiển thị: none, ngoài việc sử dụng JavaScript để hiển thị nó, thì điều này có hoạt động không?

Biên tập:

Tôi có nội dung được tải trong AJAX. Và khi AJAX của tôi thay đổi phần "chính" của trang web, tôi cũng muốn thay đổi các thẻ meta.

javascript jquery meta-tags

— TIMEX
nguồn

47

Điều đó giống như đội một chiếc giày làm mũ

— Ben

8

hoặc sử dụng một trình soạn thảo văn bản như một lý tưởng. Không chờ đợi, điều đó được coi là tuyệt vời.

— Dan Rosenstark

23

Bạn nói đúng, tôi thật ngu ngốc

— TIMEX

2

Xin chào TIMEX, có thể một sự thay đổi của câu trả lời được chấp nhận đang ở vị trí của nó? Nếu không có lý do nào khác ngoài việc cho Byron một điểm từ chối cho câu trả lời lỗi thời của anh ta.

— Alex

1

Tôi muốn làm điều này để tôi có thể quản lý các thẻ meta (cụ thể là) bằng khung javascript của mình, sau đó yêu cầu công cụ tiên quyết của tôi ghi / lưu vào bộ nhớ cache điều này cho trình thu thập thông tin. Nếu không tôi sẽ cần thêm middleware để xác định các thẻ từ API của tôi trước khi render index SPA tôi, điều này sẽ làm chậm tải, cho một điều ...

— Bullets mềm

160

Đúng, bạn có thể làm điều đó.

Có một số trường hợp sử dụng thú vị: Một số trình duyệt và plugin phân tích cú pháp các phần tử meta và thay đổi hành vi của chúng cho các giá trị khác nhau.

Ví dụ

Skype: Tắt trình phân tích cú pháp số điện thoại

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

iPhone: Tắt trình phân tích cú pháp số điện thoại

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

Google Chrome Frame

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

Định nghĩa khung nhìn cho thiết bị di động

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

Cái này có thể được thay đổi bằng JavaScript. Xem: Bản sửa lỗi tỷ lệ khung nhìn iPhone

Mô tả meta

Một số tác nhân người dùng (ví dụ như Opera) sử dụng mô tả cho dấu trang. Bạn có thể thêm nội dung được cá nhân hóa ở đây. Thí dụ:

<!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>

Vì vậy, nó không chỉ là về công cụ tìm kiếm.

— fuxia
nguồn

9

Tôi nghi ngờ hầu hết các metas như thế này có các hiệu ứng không thể thay đổi sau khi trang được tải. Nhưng đúng vậy, meta không chỉ là keywordsvà description.

— bobince

2

@bobince: Trên thực tế, SKYPE_TOOLBAR vẫn có hiệu lực nếu bạn chèn nó với js (điều này rất hữu ích vì trình xác thực html5 không thích thẻ meta đó).

— DaedalusFall

1

@DaedalusFall: vâng, tôi nghĩ bạn chỉ có thể làm điều đó với document.writephần tiêu đề, đã quá muộn để thay đổi nó khi trang được tải vì Skype sẽ làm hỏng DOM rồi, điều kinh khủng!

— bobince

1

Điều này rất hữu ích với việc chia sẻ xã hội đến các dịch vụ như Facebook. Ví dụ: để thay đổi phần tử og: title: $('meta[property="og:title"]').replaceWith('<meta property="og:title" content="New Title">');

— bdanin

2

Bạn có thể làm một số điều thú vị với cái này. Tôi thay đổi màu thanh địa chỉ Chrome khi trang trình bày trong tiêu đề thay đổi. const meta = document.querySelector('meta[name=theme-color]'); meta.setAttribute("content", colors[slideIndex]);Chrome trên Android phát hiện bản cập nhật và thay đổi màu

— Dominic Bartl

148

Vâng, đúng vậy.

Ví dụ: đặt meta-description:

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

— jayms
nguồn

23

Rất vui khi ai đó đã đưa ra câu trả lời bằng js thuần túy (như yêu cầu trong câu hỏi)

— Soft Bullets,

Chào jayms. Cảm ơn vì tiền hỗ trợ. Nhưng tôi đã thử phương pháp này để cố gắng thay đổi thẻ og: title, nhưng không hoạt động. Đây là cách tôi đã thực hiện: document.querySelector ('meta [name = "og: title"]'). SetAttribute ("content", "Ví dụ với thẻ meta tiêu đề"); Bất kỳ ý tưởng?

— Jorge Mauricio

1

Có vẻ như bạn sẽ cần truy vấn propertythuộc tính, không phải namethuộc tính, tức làmeta[property="og:title"]

— jayms

69

Bạn sẽ sử dụng một cái gì đó như (với jQuery):

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

Nhưng điều đó hầu như vô nghĩa vì thẻ meta thường chỉ được loại bỏ khi tài liệu được tải, thường là không thực thi bất kỳ JavaScript nào.

— MiffTheFox
nguồn

7

Nó thậm chí còn hoạt động với các bộ chọn chẳng hạn $('meta[property=og:somestuff]'), mà tôi nghi ngờ nó sẽ xung đột với cú pháp lựa chọn jQuery vì dấu hai chấm.

— pau.moreno

8

Trong trường hợp có ai khác đang tìm kiếm giải pháp chính xác này, bạn cần đặt dấu ngoặc kép xung quanh og: somestuff - Tôi cần nội dung của thẻ hình ảnh, đây là mã của tôi: var imgurl = $ ("meta [property = 'og: image '] "). attr (" nội dung ");

— Daniel

2

Đã xác nhận rằng nó hoạt động cho cài đặt meta viewport (cần điều này để bật / tắt thu phóng cho các trang con nhất định trên jQuery Mobile). Cảm ơn!

— NPC

1

@stealthcopter Tôi có thể xác minh rằng điều này không :( đợi đã, nó có, nhưng các thay đổi không hiển thị trong cửa sổ "xem nguồn" của

— FFox

1

@yPhil Đây là javascript (hoặc jQuery) nên bất kỳ và tất cả các thay đổi mà bạn thực hiện đối với DOM sẽ không được phản ánh khi xem mã nguồn từ trình duyệt. Nó sẽ phản ánh khi bạn sử dụng Công cụ của nhà phát triển để xem nguồn. Nguồn trình duyệt chỉ được tải một lần khi trang tải .. yêu cầu ajax request không tải trang.

— Zubair1

34

Bạn có thể thay đổi meta bằng các lệnh gọi jQuery, chẳng hạn như các lệnh sau:

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

Tôi nghĩ rằng nó không quan trọng bây giờ, vì google nói rằng họ sẽ lập chỉ mục nội dung ajax thông qua #!hashesvà _escaped_fragment_cuộc gọi. Và bây giờ họ có thể xác minh nó (thậm chí tự động, với các trình duyệt không có đầu, hãy xem liên kết 'Tạo ảnh chụp nhanh HTML' trên trang được đề cập ở trên), vì vậy tôi nghĩ đó là cách cho những người làm SEO chuyên nghiệp.

— tối đa
nguồn

3

Cảm ơn vì điều này. Chỉ cần giải quyết vấn đề của tôi. Như facebook có đồ thị mở. Trang web tôi đang phát triển có plugin Lịch sử jQuery và các thẻ băm. Vì vậy, url và mô tả đồ thị mở FB cần phải được thay đổi khi có sự thay đổi về hàm băm. +1 cho một câu trả lời tuyệt vời và không tiêu cực đối với một câu hỏi công bằng.

— Damien Keitel

5

Trên thực tế, bây giờ google cũng có thể chạy javascript mà không cần tạo ảnh chụp nhanh trang, vì vậy bây giờ thẻ meta động có ý nghĩa rất nhiều!

— Francesco Abbruzzese

33

Chắc chắn có thể sử dụng Javascript để thay đổi các thẻ meta của trang. Đây là cách tiếp cận chỉ dành cho 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!!";

Tôi đã xác minh rằng Google lập chỉ mục những thay đổi phía máy khách cho đoạn mã trên.

— Tim Moses
nguồn

3

Hấp dẫn! Cảm ơn vì đã cho tôi biết element = collection[name]cú pháp.

— jayms

11

thẻ meta là một phần của dom và có thể được truy cập và -i đoán- thay đổi, nhưng các công cụ tìm kiếm (người tiêu dùng chính của thẻ meta) sẽ không thấy thay đổi vì javascript sẽ không được thực thi. vì vậy trừ khi bạn đang thay đổi một thẻ meta (làm mới trong tâm trí) có ý nghĩa trong trình duyệt, điều này có thể không được sử dụng?

— futtta
nguồn

3

+1 - Tôi trả lời câu hỏi này vì tôi đang thắc mắc cụ thể về việc làm mới meta. Tôi đang tạo một ứng dụng sử dụng tính năng thăm dò ajax để làm mới dữ liệu trên màn hình và tôi muốn cung cấp dự phòng thô cho các trình duyệt không bật javascript. Tôi đang nghĩ rằng tôi có thể thực hiện điều này bằng cách tạo thẻ làm mới meta theo mặc định và nếu javascript được bật, chỉ cần xóa thẻ meta. - Bây giờ để xem liệu nó có thực sự hoạt động hay không ...

— jessegavin

@futtta, thẻ mô tả meta được sử dụng cho mô tả dấu trang trong Opera, vì vậy thực sự có lợi cho người dùng là mô tả meta của bạn có thể được thay đổi.

— XP1

11

Nó sẽ có thể như thế này (hoặc sử dụng jQuery như $('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>

— Mikael Svenson
nguồn

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

— người dùng3320390
nguồn

6

Tôi bắt đầu với ví dụ của bạn nhưng nhận ra rằng bạn không cần phải xóa và thêm lại các thẻ meta. Bạn chỉ có thể thay đổi thuộc tính nội dung như sau:jQuery('meta[property="og:title"]').attr('content', "blubb1");

— Tobias Beuving

Bạn đúng @ user3320390. Xóa thẻ khác với thay đổi thẻ. FB hoạt động đối với những gì HTML được viết và KHÔNG đối với các giá trị của thẻ.

— 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
nguồn

5

Bạn có thể sử dụng giải pháp đơn giản hơn và nhẹ nhàng hơn:

document.head.querySelector('meta[name="description"]').content = _desc

— Ali Seyfollahi
nguồn

2

đơn giản thêm và thuộc tính div cho mỗi ví dụ về thẻ meta

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

bây giờ như thay đổi div bình thường cho ex. n nhấp chuột

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

chức năng thay đổi thẻ với jQuery

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

}

— Burhan Ibrahimi
nguồn

2

Nếu chúng ta hoàn toàn không có thẻ meta, thì chúng ta có thể sử dụng như sau:

var _desc = 'Out description';
var meta = document.createElement('meta');
meta.setAttribute('name', 'description');
meta.setAttribute('content', _desc);
document.getElementsByTagName('head')[0].appendChild(meta);

— Roman
nguồn

2

Đối với bất kỳ ai đang cố gắng thay đổi thẻ meta og: title (hoặc bất kỳ thẻ nào khác). Tôi đã quản lý để làm điều đó theo cách này:

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

Lưu ý rằng 'meta [property = "og: title"]' chứa từ THUỘC TÍNH chứ không phải TÊN.

— Jorge Mauricio
nguồn

1

Không, div là một phần tử body, không phải phần tử head

CHỈNH SỬA: Sau đó, thứ duy nhất mà SE sẽ nhận được là HTML cơ sở, không phải là ajax đã sửa đổi.

— Ben
nguồn

Tôi hy vọng điều này không đúng.

— David Spector

1

Có, có thể thêm thẻ meta bằng Javascript. Tôi đã làm trong ví dụ của tôi

Android không tôn trọng việc xóa thẻ meta?

Nhưng, tôi không biết làm thế nào để thay đổi nó khác sau đó loại bỏ nó. Btw, trong ví dụ của tôi .. khi bạn nhấp vào nút 'THÊM', nó sẽ thêm thẻ và chế độ xem thay đổi tương ứng nhưng tôi không biết cách hoàn nguyên nó trở lại (xóa nó, trong Android) .. Tôi ước có firebug cho Android vì vậy Tôi đã thấy những gì đang xảy ra. Firefox không xóa thẻ. nếu ai đó có bất kỳ ý tưởng về điều này xin vui lòng lưu ý như vậy trong câu hỏi của tôi.

— Chamilyan
nguồn

0

có cái này trong chỉ mục

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

có cái này trong ajaxfiles og: gõ "og: title" og: description và og: image

và thêm cái này nữa

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

sau đó thêm js vào sau ajaxCall

FB.XFBML.parse();

Chỉnh sửa: Sau đó, bạn có thể hiển thị tiêu đề và hình ảnh chính xác cho facebook trong douments txt / php (của tôi chỉ đặt tên .php là phần mở rộng, nhưng là nhiều tệp txt hơn). Sau đó, tôi có các thẻ meta trong các tệp này và liên kết quay lại để lập chỉ mục trong mọi tài liệu, cũng là liên kết meta trong tệp chỉ mục cho mọi tệp con ..

nếu ai đó biết cách tốt hơn để làm điều này, tôi sẽ đánh giá cao bất kỳ bổ sung nào :)

— sunto
nguồn

Đây dường như không phải là câu trả lời cho câu hỏi về cách thêm động thẻ meta?

— Alex

0

Điều này dường như đang hoạt động đối với một ứng dụng được thiết lập hình học hơi cứng nhắc nơi ứng dụng cần chạy trên cả thiết bị di động và các trình duyệt khác với ít thay đổi, vì vậy cần tìm trạng thái trình duyệt dành cho thiết bị di động / không dành cho thiết bị di động và thiết lập chế độ xem thành chiều rộng thiết bị. Vì các tập lệnh có thể được chạy từ tiêu đề, js trong tiêu đề dưới đây dường như thay đổi thẻ meta cho chiều rộng thiết bị Trước khi tải trang. Người ta có thể lưu ý rằng việc sử dụng Navigator.userAgent được quy định là thử nghiệm. Tập lệnh phải tuân theo mục nhập thẻ meta để được thay đổi, vì vậy người ta phải chọn một số nội dung ban đầu, và sau đó thay đổi với một số điều kiện.

<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
nguồn