Sayfanın meta etiketlerini değiştirmek için JavaScript kullanmak mümkün mü?

114

Başa bir div koyarsam ve display: none, onu görüntülemek için JavaScript kullanmaktan daha iyidir, bu çalışır mı?

Düzenle:

AJAX'a yüklediğim şeyler var. AJAX'ım sitenin "ana" bölümünü değiştirirken, meta etiketleri de değiştirmek istiyorum.

javascript  jquery  meta-tags 
— TIMEX
kaynak
47
şapka olarak ayakkabı giymek gibi
— Ben
8
veya ide olarak bir metin editörü kullanmak. Hayır bekle, bu havalı sayılır.
— Dan Rosenstark
23
Haklısın ben aptalım
— TIMEX
2
Merhaba TIMEX, belki de kabul edilen cevabın yerinde bir değişiklik olabilir mi? Byron'ın eski cevabı için olumsuz oylara ara vermekten başka bir nedeni yoksa.
— Alex
1
Bunu yapmak istiyorum, böylece meta etiketleri (özellikle og) javascript çerçevemle yönetebiliyorum, ardından ön oluşturma motorumun bunu tarayıcılar için yazmasını / önbelleğe almasını istiyorum. Aksi takdirde, SPA'nın dizinini oluşturmadan önce API'mden gelen etiketleri belirlemek için ek ara yazılımlara ihtiyacım olacaktı, bu da yüklemeyi yavaşlatacaktı ...
— Soft Bullets

Yanıtlar:

161

Evet, bunu yapabilirsiniz.

Bazı ilginç kullanım durumları var: Bazı tarayıcılar ve eklentiler meta öğeleri ayrıştırır ve farklı değerler için davranışlarını değiştirir.

Örnekler

Skype: Telefon numarası ayrıştırıcısını kapatın

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

iPhone: Telefon numarası ayrıştırıcısını kapatın

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

Google Chrome Frame

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

Mobil cihazlar için görüntü alanı tanımı

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

Bu, JavaScript ile değiştirilebilir. Bkz: iPhone görüntü alanı ölçek hatası için bir düzeltme

Meta Açıklaması

Bazı kullanıcı aracıları (örneğin Opera) yer imleri için açıklamayı kullanır. Buraya kişiselleştirilmiş içerik ekleyebilirsiniz. Misal:

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

Yani bu sadece arama motorları ile ilgili değil.

— Fuxia
kaynak
9
Bunun gibi çoğu metaın, sayfa yüklendikten sonra değiştirilemeyen etkileri olduğundan şüpheleniyorum. Ama evet, meta çok daha adil daha keywordsve description.
— bobince
2
@bobince: Aslında, SKYPE_TOOLBAR bir js ile eklerseniz etkili olmaya devam eder (html5 doğrulayıcısı bu meta etiketi sevmediği için yararlıdır).
— DaedalusFall
1
@DaedalusFall: evet, bence bunu sadece document.writebaşlıkta yapabilirsiniz, ancak sayfa yüklendikten sonra değiştirmek için çok geç, çünkü Skype DOM'u zaten bozmuş olacak, korkunç bir şey!
— bobince
1
Bu, Facebook gibi hizmetlerle sosyal paylaşımda çok kullanışlıdır. Örneğin, og: title öğesini değiştirmek için: $('meta[property="og:title"]').replaceWith('<meta property="og:title" content="New Title">');
— bdanin
2
Bununla bazı harika şeyler yapabilirsiniz. Başlıktaki bir slayt değiştiğinde Chrome adres çubuğunun rengini değiştiriyorum. const meta = document.querySelector('meta[name=theme-color]'); meta.setAttribute("content", colors[slideIndex]);Android'de Chrome güncellemeyi algılar ve rengini değiştirir
— Dominic Bartl
150

Evet öyle.

Örneğin meta açıklamayı ayarlamak için:

document.querySelector('meta[name="description"]').setAttribute("content", _desc);
— Jayms
kaynak
23
Birinin saf js ile cevap vermesine sevindim (soruda talep edildiği gibi)!
— Soft Bullets
Selam jayms. Bahşiş için teşekkürler. Ama og: title etiketini değiştirmek için bu yöntemi denedim ama işe yaramadı. Bunu nasıl yaptım: document.querySelector ('meta [name = "og: title"]'). SetAttribute ("content", "Başlık meta etiketli örnek"); Herhangi bir fikir?
— Jorge Mauricio
1
Görünüşe göre propertyözniteliği değil, nameözniteliği sorgulamanız gerekecek , yanimeta[property="og:title"]
— jayms
69

(JQuery ile) gibi bir şey kullanırsınız:

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

Ancak, meta etiketler genellikle yalnızca belge yüklendiğinde, genellikle JavaScript çalıştırılmadan kazındığından, bu çoğunlukla anlamsız olacaktır.

— MiffTheFox
kaynak
7
İki $('meta[property=og:somestuff]')nokta üst üste nedeniyle jQuery seçim sözdizimi ile çakışacağından şüphelendiğim gibi seçicilerle bile çalışıyor .
— pau.moreno
8
Başka birinin bu kesin çözümü araması durumunda, og: somestuff'ın etrafına tırnak işareti koymanız gerekir - resim etiketinin içeriğine ihtiyacım vardı, bu benim kodumdu: var imgurl = $ ("meta [property = 'og: image '] "). attr (" içerik ");
— Daniel
2
Meta görüntü alanı ayarı için çalıştığını doğruladı (jQuery Mobile'daki belirli alt sayfalarda yakınlaştırmayı etkinleştirmek / devre dışı bırakmak için buna ihtiyaç vardı). Teşekkürler!
— NPC
1
@stealthcopter Bunun olmadığını doğrulayabilirim :( bekleyin, öyle, ancak değişiklikler FFox'un "kaynağı görüntüle" penceresinde
— görünmüyor
1
@yPhil Bu javascript (veya jQuery) olduğundan, DOM'da yaptığınız hiçbir değişiklik, tarayıcıdan kaynak kodunu görüntülerken yansıtılmaz. Kaynağı görüntülemek için Geliştirici Aracını ne zaman kullandığınızı yansıtır. Tarayıcı kaynağı, sayfa yüklendiğinde yalnızca bir kez yüklenir .. ajax istek istekleri, sayfa yüklenmez.
— Zubair 1
34

Metayı, örneğin jQuery çağrılarıyla değiştirebilirsiniz, örneğin şunlar:

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

Ben düşünüyorum yapar google beri, şimdilik olsun dedi onlar endeks ajax üzerinden içerik olacak o #!hashesve _escaped_fragment_aramaları. Ve şimdi bunu doğrulayabilirler (başsız tarayıcılarda otomatik olarak bile, yukarıda bahsedilen sayfadaki 'HTML Anlık Görüntüleri Oluşturma' bağlantısına bakın), bu yüzden sert SEO uzmanları için bir yol olduğunu düşünüyorum.

— eyedmax
kaynak
3
Bunun için teşekkür ederim. Sadece sorunumu çözdüm. Facebook'un açık grafiği olduğu gibi. Geliştirdiğim site bir History jQuery eklentisine ve karma etiketlere sahip. Bu nedenle, bir hash değişikliği mevcut olduğunda FB açık grafik url'si ve açıklamasının değiştirilmesi gerekir. Harika bir cevap için +1 ve adil bir soru karşısında olumsuz olmamak.
— Damien Keitel
5
Aslında artık google, sayfa anlık görüntüleri oluşturmaya gerek kalmadan javascript'i de çalıştırabiliyor, bu nedenle dinamik meta etiketler artık çok önemli!
— Francesco Abbruzzese
33

Sayfanın meta etiketlerini değiştirmek için kesinlikle Javascript kullanmak mümkündür. İşte yalnızca Javascript yaklaşımı:

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'ın yukarıdaki kod için bu istemci tarafı değişikliklerini dizine eklediğini doğruladım.

— Tim Moses
kaynak
3
İlginç! element = collection[name]Sözdizimi konusunda beni bilgilendirdiğiniz için teşekkürler .
— jayms
11

meta etiketler, alanın bir parçasıdır ve erişilebilir ve tahminen değiştirilebilir, ancak arama motorları (meta etiketlerin ana tüketicileri), javascript çalıştırılmayacağı için değişikliği görmez. Bu yüzden, tarayıcıda etkileri olan bir meta etiketi (yenileme akla geliyor) değiştirmedikçe, bunun pek bir faydası olmayabilir.

— Futtta
kaynak
3
+1 - Bu soruya geldim çünkü özellikle meta yenilemeyi merak ediyordum. Ekrandaki verileri yenilemek için ajax sorgulamasını kullanan bir uygulama oluşturuyorum ve javascript'in etkin olmadığı tarayıcılar için kaba bir geri dönüş sağlamak istiyorum. Bunu varsayılan olarak bir meta yenileme etiketi oluşturarak başarabileceğimi düşünüyorum ve eğer javascript etkinse meta etiketi kaldırmanız yeterli. - Şimdi gerçekten işe yarayıp yaramadığını görmek için ...
— yarayıp yaramadığını jessegavin
@futtta, meta açıklama etiketi Opera'da yer imi açıklamaları için kullanılır, bu nedenle kullanıcı için meta açıklamanızın değiştirilebilmesinin aslında bir faydası vardır.
— XP1
11

Bunun gibi mümkün olmalıdır (veya jQuery gibi kullanın $('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
kaynak
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">');
});
— kullanıcı3320390
kaynak
6
Örneğinizle başladım, ancak meta etiketleri kaldırıp yeniden eklemeniz gerekmediğini fark ettim. İçerik özelliğini şu şekilde değiştirebilirsiniz:jQuery('meta[property="og:title"]').attr('content', "blubb1");
— Tobias Beuving
Doğrusunuz @ user3320390. Bir etiketi kaldırmak onu değiştirmekten farklıdır. FB, etiketlerin değerleri için DEĞİL, yazılan HTML'ye göre hareket eder.
— 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
kaynak
5

Daha basit ve daha hafif bir çözüm kullanabilirsiniz:

document.head.querySelector('meta[name="description"]').content = _desc
— Ali Seyfollahi
kaynak
2

her meta etiket örneğine basit ekle ve böl

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

şimdi ex için normal div değişikliği gibi. n tıklayın

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

jQuery ile işlev değişikliği etiketleri

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

}
— Burhan İbrahimi
kaynak
2

Meta etikete sahip değilsek, aşağıdakileri kullanabiliriz:

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

Og: title meta etiketlerini (veya başka herhangi birini) değiştirmeye çalışan herkes için. Bunu şu şekilde yapmayı başardım:

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

'Meta [property = "og: title"]', NAME kelimesini değil PROPERTY kelimesini içerdiğine dikkat edin.

— Jorge Mauricio
kaynak
1

Hayır, div bir gövde öğesidir, başlık öğesi değildir

DÜZENLEME: O zaman SE'lerin alacağı tek şey, ajax'ın değiştirdiği değil, temel HTML olacaktır.

— Ben
kaynak
Umarım bu doğru değildir.
— David Spector
1

Evet, Javascript ile meta etiketler eklemek mümkündür. Örneğimde yaptım

Android, meta etiket kaldırmaya saygı göstermiyor mu?

Ancak, kaldırdıktan sonra nasıl değiştireceğimi bilmiyorum. Btw, benim örneğimde .. 'EKLE' butonuna tıkladığınızda sırasıyla etiket ve görüntü alanı değişiyor ancak onu nasıl geri alacağımı bilmiyorum (Android'de kaldırın) .. Keşke Android için firebug olsaydı Neler olduğunu gördüm. Firefox etiketi kaldırır. Bu konuda herhangi bir fikri olan varsa, lütfen soruma dikkat edin.

— Chamilyan
kaynak
0

bunu dizinde bulundur

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

bunu ajaxfiles içinde bulundurun og: type "og: title" og: description ve og: image

ve bunu da ekle

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

ardından ajaxCall'dan sonra js ekleyin

FB.XFBML.parse();

Düzenleme: Daha sonra txt / php douments içinde facebook'a doğru başlığı ve resmi görüntüleyebilirsiniz (benimki .php uzantı olarak adlandırılır, ancak daha fazla txt dosyasıdır). Daha sonra bu dosyalarda meta etiketlere ve her belgedeki dizine geri bağlantı, ayrıca her alt dosya için dizin dosyasında bir meta bağlantıya sahibim ..

Bunu yapmanın daha iyi bir yolunu bilen varsa, herhangi bir eklemeyi takdir ederim :)

— Sunto
kaynak
Bu, meta etiketlerin dinamik olarak nasıl ekleneceği sorusuna bir cevap gibi görünmüyor?
— Alex
0

Bu, hem mobil hem de diğer tarayıcılarda çok az değişiklikle çalışması gereken katı geometrik olarak ayarlanmış bir uygulama için çalışıyor gibi görünüyor, bu nedenle mobil / mobil olmayan tarayıcı durumunu bulmak ve mobil cihazlar için görüntü alanını cihaz genişliğine ayarlamak gerekiyor. Komut dosyaları başlıktan çalıştırılabildiğinden, başlıktaki aşağıdaki js, sayfa yüklenmeden önce aygıt genişliği için meta etiketi değiştiriyor gibi görünüyor. Navigator.userAgent kullanımının deneysel olarak öngörüldüğü not edilebilir. Komut dosyası, değiştirilecek meta etiket girişini takip etmelidir, bu nedenle bir miktar başlangıç ​​içeriği seçmeli ve ardından bazı koşullarda değiştirilmelidir. 

<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
kaynak
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.