পৃষ্ঠার মেটা-ট্যাগগুলি পরিবর্তন করতে জাভাস্ক্রিপ্ট ব্যবহার করা সম্ভব?


112

যদি আমি মাথায় একটি ডিভি রাখি এবং প্রদর্শন করি: এটি প্রদর্শনের জন্য জাভাস্ক্রিপ্ট ব্যবহার করা ছাড়া আর কোনওটি কাজ করবে না?

সম্পাদনা:

আমি এজেএক্সে স্টাড লোড করেছি। এবং আমার এজেএক্স সাইটের "প্রধান" অংশটি পরিবর্তন করার সাথে সাথে আমি মেটা-ট্যাগগুলিও পরিবর্তন করতে চাই।


47
এটি টুপি হিসাবে জুতো পরার মতো
বেন

8
বা কোনও পাঠ্য সম্পাদককে আদর্শ হিসাবে ব্যবহার করা। অপেক্ষা করবেন না, এটি দুর্দান্ত বলে বিবেচিত।
ড্যান রোজনস্টার্ক

23
আপনি ঠিক বলেছেন আমি বোকা
টিমেক্স

2
হাই টিআইএমএক্স, সম্ভবত স্বীকৃত উত্তরের পরিবর্তনটি তার জায়গায় রয়েছে? অন্য কোনও কারণ না থাকলে বায়রনকে তার পুরানো উত্তরের জন্য ডাউনভোটগুলিতে বিরতি দেওয়া।
অ্যালেক্স

1
আমি এটি করতে চাই তাই আমি আমার জাভাস্ক্রিপ্ট ফ্রেমওয়ার্কের সাথে মেটা ট্যাগগুলি (বিশেষত ওগ) পরিচালনা করতে পারি, তারপরে আমার পূর্বনির্ধারিত ইঞ্জিনটি ক্রলারগুলির জন্য এটি লিখতে / ক্যাশে রাখতে পারে। অন্যথায় আমার এসপিএর সূচকটি রেন্ডার করার আগে আমার API থেকে ট্যাগগুলি নির্ধারণ করতে অতিরিক্ত মিডলওয়্যারের দরকার ছিল, যা লোডিংকে কমিয়ে দেবে, একটি জিনিসের জন্য ...
সফ্ট বুলেটস

উত্তর:


160

হ্যাঁ, আপনি এটি করতে পারেন।

কিছু আকর্ষণীয় ব্যবহারের কেস রয়েছে: কিছু ব্রাউজার এবং প্লাগইনগুলি মেটা উপাদানগুলিকে পার্স করে এবং বিভিন্ন মানের জন্য তাদের আচরণ পরিবর্তন করে।

উদাহরণ

স্কাইপ: ফোন নম্বর পার্সার বন্ধ করুন

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

আইফোন: ফোন নম্বর পার্সার বন্ধ করুন

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

গুগল ক্রোম ফ্রেম

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

মোবাইল ডিভাইসের জন্য ভিউপোর্ট সংজ্ঞা

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

এটি জাভাস্ক্রিপ্ট দ্বারা পরিবর্তন করা যেতে পারে। দেখুন: আইফোন ভিউপোর্ট স্কেল বাগের জন্য একটি স্থির

মেটা বর্ণনা

কিছু ব্যবহারকারী এজেন্ট (উদাহরণস্বরূপ অপেরা) বুকমার্কগুলির জন্য বিবরণটি ব্যবহার করে। আপনি এখানে ব্যক্তিগতকৃত সামগ্রী যুক্ত করতে পারেন। উদাহরণ:

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

সুতরাং, এটি কেবল অনুসন্ধান ইঞ্জিনগুলি সম্পর্কে নয়।


9
আমি সন্দেহ করি এর মতো বেশিরভাগ মেটাতে এমন প্রভাব রয়েছে যা পৃষ্ঠা লোড হওয়ার পরে পরিবর্তনযোগ্য নয়। তবে হ্যাঁ, মেটা কেবল keywordsএবং এর চেয়ে অনেক বেশি description
22

2
@ ববিন্স: প্রকৃতপক্ষে, এসকেওয়াইপলিটলবার এখনও কার্যকর হয় যদি আপনি এটি জেএস সহ সন্নিবেশ করান (যা এইচটিএমএল 5 ভ্যালিডেটর হিসাবে মেটা ট্যাগ পছন্দ করে না) is
দাইদালাসফাল

1
@ ডেডালাসফাল: হ্যাঁ, আমি মনে করি আপনি কেবল document.writeশিরোনামের সাহায্যে এটি করতে পারবেন তবে পৃষ্ঠাটি লোড হয়ে গেলে এটি স্কাইপ হিসাবে লোড হয়ে গেলে এটি ইতিমধ্যে খুব দেরী হয়ে গেছে, ভয়াবহ বিষয়!
বোবিনস

1
এটি ফেসবুকের মতো পরিষেবাদিতে সামাজিক ভাগ করে নেওয়ার ক্ষেত্রে খুব দরকারী। উদাহরণস্বরূপ, ওগ পরিবর্তন করতে: শিরোনাম উপাদান: $('meta[property="og:title"]').replaceWith('<meta property="og:title" content="New Title">');
বদনিন

2
আপনি এটি দিয়ে কিছু দুর্দান্ত জিনিস করতে পারেন। আমি শিরোনামের স্লাইডটি পরিবর্তিত হলে আমি Chrome ঠিকানা বারের রঙ পরিবর্তন করি। const meta = document.querySelector('meta[name=theme-color]'); meta.setAttribute("content", colors[slideIndex]);অ্যান্ড্রয়েডের ক্রোম আপডেটটি সনাক্ত করে এবং রঙ পরিবর্তন করে
ডমিনিক বার্টল

148

হ্যাঁ, তাই

যেমন মেটা-বিবরণ সেট করতে:

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

23
খুশি কেউ শুদ্ধ জেএসে (উত্তর হিসাবে অনুরোধ হিসাবে) একটি উত্তর দিয়েছেন!
সফট বুলেট 13

হাই জায়েমস বখশিশের জন্য ধন্যবাদ. তবে আমি এই পদ্ধতিটি ওগ: শিরোনাম ট্যাগ পরিবর্তন করার চেষ্টা করেছি, তবে কাজ হয়নি। এখানে আমি কীভাবে এটি করেছি: ডকুমেন্ট.কোয়ারিসিলিটর ('মেটা [নাম = "ওগ: শিরোনাম"]') set সেট অ্যাট্রিবিউট ("সামগ্রী", "শিরোনাম মেটা ট্যাগ সহ"); কোন ধারনা?
জোর্হে মরিসিও

1
দেখে মনে হচ্ছে আপনাকে propertyগুণাবলীর জন্য অনুসন্ধান করতে হবে, গুণাবলীর জন্য নয় name, যেমনmeta[property="og:title"]
জয়স

69

আপনি (jQuery সহ) এর মতো কিছু ব্যবহার করবেন:

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

তবে এটি বেশিরভাগ অর্থহীন হবে কারণ সাধারণত কোনও জাভাস্ক্রিপ্ট কার্যকর না করেই ডকুমেন্টটি লোড করা হলে মেটা ট্যাগগুলি সাধারণত স্ক্র্যাপ হয়।


7
এটি এমনকি নির্বাচকদের সাথেও কাজ করে $('meta[property=og:somestuff]'), যা আমার সন্দেহ হয়েছিল যে এটি কোলনের কারণে jQuery নির্বাচন সিনট্যাক্সের সাথে সংঘর্ষ করবে।
pau.moreno

8
অন্য কেউ যদি এই সঠিক সমাধানটি সন্ধান করতে চান তবে আপনার ওগের চারপাশে উদ্ধৃতি স্থাপন করা দরকার: সামস্টফ - আমাকে ছবি ট্যাগের বিষয়বস্তুর প্রয়োজন ছিল, এটি আমার কোড: var imgurl = $ ("মেটা [সম্পত্তি = 'ওগ: চিত্র) '] "।) ATTR (" বিষয়বস্তু ");
ড্যানিয়েল

2
নিশ্চিত করা হয়েছে যে এটি মেটা ভিউপোর্ট সেটিংয়ের জন্য কাজ করে (jQuery মোবাইলে নির্দিষ্ট সাবপেজের জন্য জুম সক্ষম / অক্ষম করার জন্য এটির প্রয়োজন ছিল)। ধন্যবাদ!
এনপিসি

1
@ স্টেথকপ্টার আমি যাচাই করতে পারি যে এটি এটি করে না :( অপেক্ষা করুন, এটি করে, তবে এফএফক্সের "ভিউ সোর্স" উইন্ডোতে পরিবর্তনগুলি দৃশ্যমান নয় ..?
yPhil

1
@YPhil এটি জাভাস্ক্রিপ্ট (বা jQuery) তাই ব্রাউজার থেকে উত্স কোড দেখার সময় আপনি যে কোনও এবং সমস্ত পরিবর্তন প্রতিবিম্বিত হন না। আপনি উত্স দেখার জন্য বিকাশকারীর সরঞ্জামটি ব্যবহার করলে এটি প্রতিফলিত হবে। ব্রাউজার উত্সটি কেবল একবার লোড করা হয় যখন পৃষ্ঠাটি লোড হয় .. এজ্যাক্স অনুরোধের অনুরোধগুলি পৃষ্ঠা লোড নয়।
জুবায়ের 1

34

আপনি এইগুলির মতো, jQuery কলগুলি সহ উদাহরণস্বরূপ মেটা পরিবর্তন করতে পারেন:

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

আমি এটা মনে করি না এখন জন্য ব্যাপার, যেহেতু গুগল বলেন যে, তারা এর মাধ্যমে সূচক Ajax বিষয়বস্তু হবে #!hashesএবং _escaped_fragment_কল। এবং এখন তারা এটি যাচাই করতে পারে (এমনকি স্বয়ংক্রিয়ভাবে হেডলেস ব্রাউজারগুলির সাথে, উপরে উল্লিখিত পৃষ্ঠায় 'এইচটিএমএল স্ন্যাপশট তৈরি করা লিঙ্কটি দেখুন), তাই আমি মনে করি এটি কঠোর এসইও ছেলেদের পক্ষে উপায়।


3
এই জন্য আপনাকে ধন্যবাদ. সবেমাত্র আমার সমস্যা সমাধান করেছেন। যেমন ফেসবুকের ওপেন গ্রাফ রয়েছে। আমি যে সাইটটি বিকাশ করছি সেটিতে একটি হিস্ট্রি jQuery প্লাগইন এবং হ্যাশ ট্যাগ রয়েছে। সুতরাং যখন কোনও হ্যাশ পরিবর্তন উপস্থিত হয় তখন এফবি ওপেন গ্রাফ ইউআরএল এবং বিবরণ পরিবর্তন করা দরকার। একটি দুর্দান্ত উত্তরের জন্য +1 এবং ন্যায্য প্রশ্নের প্রতি নেতিবাচক না হয়ে।
ড্যামিয়েন কেইটেল

5
প্রকৃতপক্ষে, এখন গুগল জাভাস্ক্রিপ্ট চালাতে সক্ষম হয়েছে, পৃষ্ঠাগুলি স্ন্যাপশট তৈরি করার প্রয়োজন নেই, তাই এখন গতিশীল মেটাট্যাগগুলি খুব বেশি গুরুত্বপূর্ণ!
ফ্রান্সেস্কো অ্যাব্রুজেজ

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

আমি যাচাই করেছি যে উপরের কোডের জন্য গুগল এই ক্লায়েন্টের পার্শ্ব পরিবর্তনগুলি সূচীকরণ করে।


3
মজাদার! আমাকে element = collection[name]সিনট্যাক্স সম্পর্কে সচেতন করার জন্য ধন্যবাদ ।
জায়েম

11

মেটা ট্যাগগুলি ডোমের অংশ এবং এটি অ্যাক্সেস করা যায় এবং অনুমান-পরিবর্তন করা যায়, তবে জাভাস্ক্রিপ্ট কার্যকর হবে না বলে অনুসন্ধান ইঞ্জিনগুলি (মেটা ট্যাগগুলির মূল গ্রাহক) পরিবর্তনটি দেখতে পাবে না। সুতরাং আপনি যদি কোনও মেটা-ট্যাগ পরিবর্তন না করেন (ব্র্যান্ডে রিফ্রেশ মনে হয়) যার অন্তর্ভুক্তি রয়েছে তবে এটি কি খুব কম ব্যবহার হতে পারে?


3
+1 - আমি এই প্রশ্নটিতে অবতরণ করেছি কারণ আমি বিশেষ করে মেটা রিফ্রেশ সম্পর্কে ভাবছিলাম। আমি একটি অ্যাপ্লিকেশন তৈরি করছি যা স্ক্রিনের ডেটা রিফ্রেশ করার জন্য এজাক্স পলিং ব্যবহার করে এবং জাভাস্ক্রিপ্ট সক্ষম না করা ব্রাউজারগুলির জন্য আমি একটি ক্রুড ফ্যালব্যাক সরবরাহ করতে চাই। আমি ভাবছি যে আমি ডিফল্টরূপে একটি মেটা রিফ্রেশ ট্যাগ তৈরি করে এটি সম্পাদন করতে পারি এবং জাভাস্ক্রিপ্ট সক্ষম থাকলে কেবল মেটা ট্যাগটি সরিয়ে ফেলুন। - এখন দেখার জন্য এটি আসলে কাজ করে কিনা ...
জেসেগাভিন

@ ফট্ট্তা, মেটা বিবরণ ট্যাগ অপেরাতে বুকমার্ক বর্ণনার জন্য ব্যবহৃত হয়, তাই ব্যবহারকারীর পক্ষে আসলে একটি সুবিধা রয়েছে যে আপনার মেটা বিবরণটি পরিবর্তন করা যেতে পারে।
এক্সপি 1

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

6
আমি আপনার উদাহরণ দিয়ে শুরু করেছিলাম কিন্তু বুঝতে পেরেছিলাম যে আপনাকে মেটা ট্যাগগুলি সরাতে এবং পুনরায় যুক্ত করতে হবে না। আপনি কেবল এ জাতীয় বিষয়বস্তু-গুণাবলী পরিবর্তন করতে পারেন:jQuery('meta[property="og:title"]').attr('content', "blubb1");
টোবিয়াস বিউভিং

আপনি সঠিক @ ব্যবহারকারী 3320390 কোনও ট্যাগ পরিবর্তন করার চেয়ে এটি মুছে ফেলা আলাদা। এইচটিএমএল লেখা আছে এবং ট্যাগগুলির মানগুলির জন্য নয় এটি এফবি কাজ করে।
পেড্রো

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


2

প্রতিটি মেটা ট্যাগ উদাহরণে সরল অ্যাড এবং ডিভ অ্যাট্রিবিউট

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

প্রাক্তন হিসাবে এখন স্বাভাবিক ডিভ পরিবর্তন হিসাবে। এন ক্লিক করুন

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

মনোযোগ দিন যে 'মেটা [সম্পত্তি = "ওগ: শিরোনাম"]' এ PROPERTY শব্দটি রয়েছে, NAME নয়।


1

না, একটি ডিভ একটি শরীরের উপাদান, মাথা উপাদান নয়

সম্পাদনা: তারপরে এসইএসগুলি কেবলমাত্র বেজ এইচটিএমএল পাচ্ছে, এজ্যাক্সটি কোনও পরিবর্তিত নয়।


আমি আশা করি এটি সত্য নয়।
ডেভিড স্পেক্টর

1

হ্যাঁ, জাভাস্ক্রিপ্টের সাথে मेटाটাগ যুক্ত করা সম্ভব। আমি আমার উদাহরণে করেছি

অ্যান্ড্রয়েড মেটাট্যাগ অপসারণকে সম্মান করছে না?

তবে, কীভাবে এটি অন্য পরিবর্তন করতে হয় তারপরে এটি মুছে ফেলতে আমি জানি না। বিটিডব্লু, আমার উদাহরণে .. আপনি যখন 'এডিডি' বোতামটি ক্লিক করেন এটি যথাক্রমে ট্যাগ এবং ভিউপোর্ট পরিবর্তন করে তবে আমি কীভাবে এটি পুনরায় ফিরিয়ে আনতে জানি না (এটি মুছে ফেলুন, অ্যান্ড্রয়েডে) .. আমি চাই যে অ্যান্ড্রয়েডের জন্য ফায়ারব্যাগটি তাই ছিল আমি কি ঘটছে তা দেখেছি। ফায়ারফক্স ট্যাগ সরিয়ে দেয়। কারও যদি এই সম্পর্কে কোনও ধারণা থাকে তবে দয়া করে আমার প্রশ্নে এটি নোট করুন।


0

সূচক এ আছে

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

এটি অজ্যাক্সফাইলে ওগ: টাইপ করুন "ওগ: শিরোনাম" ওগ: বিবরণ এবং ওগ: চিত্র

এবং এটি যোগ করুন

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

তারপরে এজাকেল এর পরে জেএস যুক্ত করুন

FB.XFBML.parse();

সম্পাদনা করুন: তারপরে আপনি ফেসবুকে টিএসটিএস / পিএইচপি ডুমেন্টসে সঠিক শিরোনাম এবং চিত্রটি প্রদর্শন করতে পারেন (আমার নামটি কেবল এক্সটেনশন হিসাবে .php নাম দেওয়া হয়েছে, তবে আরও txt ফাইল রয়েছে)। আমার তখন এই ফাইলগুলিতে মেটা ট্যাগ এবং প্রতিটি নথিতে সূচীতে ফিরে লিঙ্ক, প্রতিটি সাবফিলের জন্য সূচী ফাইলে একটি মেটা লিঙ্কও রয়েছে ..

যদি কেউ এটি করার আরও ভাল উপায় জানে তবে আমি যে কোনও সংযোজনকে প্রশংসা করব :)


এটি কীভাবে গতিশীলভাবে মেটা-ট্যাগ যুক্ত করবেন এমন প্রশ্নের উত্তর বলে মনে হচ্ছে না?
অ্যালেক্স

0

এটি কিছুটা কঠোরভাবে জ্যামিতিকভাবে সেট করা অ্যাপ্লিকেশনের জন্য কাজ করছে বলে মনে হচ্ছে যেখানে এটি খুব সামান্য পরিবর্তনের সাথে মোবাইল এবং অন্যান্য ব্রাউজার উভয়দিকেই চালানো দরকার, সুতরাং মোবাইল / অ-মোবাইল ব্রাউজারের স্থিতি এবং মোবাইলগুলির জন্য ডিভাইসের প্রস্থে ভিউপোর্টটি সেট করা প্রয়োজন। স্ক্রিপ্টগুলি শিরোলেখ থেকে চালানো যেতে পারে, পৃষ্ঠা শিরোনামের আগে শিরোনামের নীচের জেএসগুলি ডিভাইস-প্রস্থের জন্য মেটাট্যাগ পরিবর্তন করে বলে মনে হচ্ছে। কেউ লক্ষ্য করতে পারেন যে নেভিগেটর.ইউসার এজেন্টের ব্যবহার পরীক্ষামূলক হিসাবে নির্ধারিত। পরিবর্তিত হতে স্ক্রিপ্টটিতে মেটাট্যাগ এন্ট্রিটি অনুসরণ করতে হবে, সুতরাং অবশ্যই কিছু প্রাথমিক সামগ্রী বেছে নিতে হবে এবং তারপরে কিছু শর্তে পরিবর্তন আনতে হবে।

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

। । । । । ।

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.