Bir web sayfasının başlığını dinamik olarak nasıl değiştirebilirim?

Her biri farklı içerik gösteren bir dizi sekme uygulayan bir web sayfam var. Sekme tıklamaları sayfayı yenilemez, ancak istemci tarafında içeriği gizler / gösterir.

Artık sayfa başlığını sayfada seçilen sekmeye göre değiştirmek gerekir (SEO nedenleriyle). Mümkün mü? Birisi sayfayı yeniden yüklemeden javascript aracılığıyla sayfa başlığını dinamik olarak değiştirmek için bir çözüm önerebilir mi?

Güncelleme : SearchEngineLand'deki yorumlara ve referanslara göre çoğu web tarayıcısı güncellenmiş başlığı dizine ekleyecektir. Aşağıdaki cevap eski, ancak kod hala geçerlidir.

Sadece böyle bir şey yapabilirsiniz document.title = "This is the new page title.";, ancak bu tamamen SEO'nun amacını bozar. Çoğu tarayıcı ilk etapta javascript'i desteklemeyecektir, bu nedenle sayfa başlığı olarak öğede ne varsa alacaktır.

Bunun önemli tarayıcıların çoğuyla uyumlu olmasını istiyorsanız, sayfanın yeniden yüklenmesini (PHP veya benzeri) içeren başlık etiketinin kendisini değiştirmeniz gerekir. Sayfa başlığını bir tarayıcının görebileceği şekilde değiştirmek isterseniz, bunun üstesinden gelemezsiniz.

Gelecekten merhaba demek istiyorum :) Son zamanlarda olan şeyler:

1. Google şimdi web sitenizde javascript çalışır ¹
2. Kullanıcılar artık sayfada karmaşık javascript görevleri çalıştırmak için React.js, Ember ve Angular gibi şeyler kullanıyor ve hala Google tarafından dizine ekleniyor ¹
3. açmak istediğiniz her sekme için ayrı URL'lere sahip olmanızı sağlayan html5 geçmiş api (pushState, tepki yönlendirici, kor, açısal) kullanabilirsiniz ve Google bunu endeksleyecektir ¹

Sorunuzu cevaplamak için başlığı ve diğer meta etiketleri javascript'ten güvenle değiştirebilirsiniz ( Google dışı arama motorlarını desteklemek istiyorsanız https://prerender.io gibi bir şey de ekleyebilirsiniz ), bunları ayrı URL'ler olarak erişilebilir hale getirin ( aksi halde Google, bunların arama sonuçlarında gösterilecek farklı sayfalar olduğunu nasıl bilebilir?). SEO ile ilgili etiketleri değiştirmek (kullanıcı bir şeye tıklayarak sayfayı değiştirdikten sonra) basittir:

if (document.title != newTitle) {
    document.title = newTitle;
}
$('meta[name="description"]').attr("content", newDescription);

Sadece robots.txt dosyasında css ve javascript'in engellenmediğinden emin olun, Google Web Yöneticisi Araçları'nda Google hizmeti olarak getir özelliğini kullanabilirsiniz .

1: http://searchengineland.com/tested-googlebot-crawls-javascript-heres-learned-220157

Javascript ile sayfa başlığını değiştirmenin SEO'ya nasıl yardımcı olacağını göremiyorum. Arama botlarının çoğu (veya tümü) Javascript çalıştırmaz ve yalnızca başlangıçta işaretlenen başlığı okur.

SEO'ya yardım etmek istiyorsanız, arka uçtaki sayfa başlığını değiştirmeniz ve sayfanın farklı sürümlerini sunmanız gerekir.

Kullanın document.title.

İlk öğretici için de bu sayfaya bakın .

Kod
document.title = 'test'

Başlığı değiştirmenin birçok yolu vardır, ana ikisi, şöyledir:

Şüpheli Yöntem

HTML'ye bir başlık etiketi (örn. <title>Hello</title>), Ardından javascript yazın:

let title_el = document.querySelector("title");

if(title_el)
    title_el.innerHTML = "World";

Açıkça Doğru Yöntem

Hepsinden basit olanı aslında Belge Nesne Modeli (DOM) tarafından sağlanan yöntemi kullanmaktır.

document.title = "Hello World";

Önceki yöntem genellikle belgenin gövdesinde bulunan etiketleri değiştirmek için yaptığınız yöntemdir . Başta bulunanlar gibi meta-veri etiketlerini değiştirmek için bu yöntemi kullanmak titleen iyi şekilde sorgulanabilir, deyimsel değildir, başlamak için çok iyi bir stil değildir ve hatta taşınabilir olmayabilir. Emin olabileceğiniz bir şey, korudukları title.innerHTML = ...kodda görürlerse diğer geliştiricileri rahatsız edecektir .

Ne istediğiniz ile gitmek ikincisi yöntemdir. Bu özellik, DOM Belirtimi'nde , adından da anlaşılacağı gibi, başlığı değiştirmek amacıyla sağlanır.

Ayrıca, XUL ile çalışıyorsanız, başlığı ayarlamaya veya almaya çalışmadan önce belgenin yüklü olup olmadığını kontrol etmek isteyebileceğinizi unutmayın; aksi takdirde undefined behavior, kendi başına korkutucu bir kavram olan davet ediyoruz (burada ejderhalar). DOM'daki dokümanların JavaScript ile ilgili olması gerekmediğinden, bu JavaScript aracılığıyla olabilir veya olmayabilir. Ama XUL bir bütün 'canavardır, bu yüzden araştırıyorum.

Bahsederken .innerHTML

Akılda tutulması gereken bazı iyi tavsiyeler, .innerHTMLkullanımın genellikle özensiz olmasıdır. appendChildBunun yerine kullanın .

Hala .innerHTMLyararlı bulduğum iki durum küçük bir öğeye düz metin eklemeyi içeriyor olsa da ...

label.innerHTML = "Hello World";
// as opposed to... 
label.appendChild(document.createTextNode("Hello World"));
// example:
el.appendChild(function(){
    let el = document.createElement("span");
    el.className = "label";
    el.innerHTML = label_text;
    return el;
}());

... ve bir konteyneri temizlemek ...

container.innerHTML = "";
// as opposed to... umm... okay, I guess I'm rolling my own
[...container.childNodes].forEach(function(child){
    container.removeChild(child);
});

Document.title komutunu JavaScript'te nasıl başaracağınızdır, ancak SEO'ya nasıl yardımcı olması gerekir? Botlar genellikle sayfalarda dolaştıklarından javascript kodu çalıştırmazlar.

Modern tarayıcılar , DOM'da dinamik olarak oluşturulan içeriği ayrıştırabilir , bu nedenle document.title = ...kullanımı mükemmeldir.

Herhangi bir tarayıcının değişikliği fark edebilmesi için sayfayı yeni bir başlıkla yeniden sunmanız gerekir. Javascript ile yapmak sadece bir insan okuyucuya fayda sağlayacaktır, tarayıcılar bu kodu yürütmeyecektir.

npm sürümünü arayanlar için bunun için bir kütüphane var:

npm install --save react-document-meta

import React from 'react';
import DocumentMeta from 'react-document-meta';

class Example extends React.Component {
  render() {
    const meta = {
      title: 'Some Meta Title',
      description: 'I am a description, and I can create multiple tags',
      canonical: 'http://example.com/path/to/page',
      meta: {
        charset: 'utf-8',
        name: {
          keywords: 'react,meta,document,html,tags'
        }
      }
    };

    return (
      <div>
        <DocumentMeta {...meta} />
        <h1>Hello World!</h1>
      </div>
    );
  }
}

React.render(<Example />, document.getElementById('root'));

Belki başlığınıza bir sekmedeki tüm sekme başlıklarını yükleyebilir ve ardından sekmelerden birini yükledikten sonra başlığı javascript ile değiştirebilirsiniz.

örnek: önce başlığınızı

my app | description | contact | about us | 

sekmelerden birini yükledikten sonra çalıştırın:

document.title = "my app | tab title";

SEO ile yardımcı olabilecek ve hala sekme sayfalarınız olduğu gibi akla gelen bir yol, her sekmeye karşılık gelen adlandırılmış çapaları kullanmak olacaktır:

http://www.example.com/mypage#tab1, http://www.example.com/mypage#tab2, etc.

URL'yi ayrıştırmak ve tarayıcı sayfayı oluştururken ilk sayfa başlığını ayarlamak için sunucu tarafı işlemeye sahip olmanız gerekir. Ayrıca devam edip o sekmeyi "etkin" sekme haline getiririm. Sayfa yüklendikten ve gerçek bir kullanıcı sekmeleri değiştirdiğinde document.title, diğer kullanıcıların belirttiği gibi değiştirmek için javascript kullanırsınız .

Kullanın document.title. Çoğu şey için yararlı olacak, ancak web sitenizde SEO yok edecek.

Misal:

document.write("title - " + document.title + "<br>");
document.title = "New title here!";
// Notice: this will defeat purpose of SEO. Not useful for SEO-friendly sites.
document.write("title - " + document.title + "<br>");

body {
  font-family: Consolas, 'Courier New', monospace;
}

<!DOCTYPE html>
<html>
  <head><title>Old title</title></head>
  <body><p>
    Lorem ipsum dolor sit amet, at movet detraxit mediocritatem eam, nam iusto abhorreant ne. Ei pro          debet adolescens voluptaria, eu minim scaevola conceptam vel. Vim ea torquatos constituto                complectitur, usu eu civibus insolens eleifend. Ex ubique quaerendum his.

  </p></body>
</html>

JavaScript kullanabilirsiniz. Google dahil olmak üzere bazı botlar, SEO'nun yararına JavaScript'i çalıştırır (SERP'de doğru başlığı gösterir).

document.title = "Google will run this JS and show the title in the search results!";

Ancak, sayfayı yenilemeden veya URL'yi değiştirmeden sekmeleri gösterdiğiniz ve gizlediğiniz için bu daha karmaşıktır. Belki bir çapa eklemek başkaları tarafından belirtildiği gibi yardımcı olacaktır. Cevabımı geri çekmem gerekebilir.

Olumlu sonuçlar gösteren makaleler: http://www.aukseo.co.uk/use-javascript-to-generate-seo-friendly-title-tags-1275/ http://www.ifinity.com.au/2012/10 / 04 / Changing_a_Page_Title_with_Javascript_to_update_a_Google_SERP_Entry

Her zaman bir botun JavaScript yürütmeyeceğini varsaymayın. http://searchengineland.com/tested-googlebot-crawls-javascript-heres-learned-220157 Google ve diğer arama motorları, dizine eklenecek en iyi sonuçların, gerçek son kullanıcının JavaScript dahil tarayıcılarında göreceği sonuçlar olduğunu bilir.

Arama motorları çoğu javascript'i görmezden geldiğinden, arama motorlarının Ajax kullanmadan sekmeleri kullanarak tarama yapabilmesi için bunu yapmanız gerekir. Her sekmeyi, o sekme seçili olarak sayfanın tamamını yükleyen bir href içeren bir bağlantı yapın. Ardından sayfanın etikette bu başlığı olabilir.

Onclick olay işleyicisi yine de insan görüntüleyenler için sayfaları ajax aracılığıyla yükleyebilir.

Çoğu arama motorunun gördüğü sayfaları görmek için, tarayıcınızda Javascript'i kapatın ve sekmeleri tıkladığınızda sayfayı o sekme seçili ve doğru başlık yükleyecek şekilde yapmaya çalışın.

Ajax ile yüklüyorsanız ve sayfa başlığını sadece Javascript ile dinamik olarak değiştirmek istiyorsanız, şunları yapın:

document.title = 'Put the new title here';

Ancak, arama motorları javascript'te yapılan bu değişikliği görmeyecektir.

Ama SEO kıyafetlerini almak için

Sayfa değiştiğinde, arama motorunun farklı başlıkları vb. Görebilmesi için bir sayfayı yeniden yüklemeniz gerekir.

Bu yüzden önce sayfanın yeniden yüklenmesinin çalıştığından emin olun, ardından document.title değişiklikleri ekleyin

Sadece buraya bir şey eklemek istiyorum: AJAX aracılığıyla bir veritabanını güncelliyorsanız başlığı JavaScript ile değiştirmek gerçekten yararlıdır, bu nedenle başlığı sayfayı yenilemek zorunda kalmadan değişir. Başlık aslında sunucu tarafı kodlama diliniz aracılığıyla değişir, ancak JavaScript aracılığıyla değişime sahip olması, kullanıcı deneyimini daha keyifli ve akıcı hale getiren sadece kullanılabilirlik ve kullanıcı arayüzüdür.

Şimdi, başlığı sadece cehennem için JavaScript aracılığıyla değiştiriyorsanız, bunu yapmamalısınız.

Google, tüm js dosyalarının işlendiğini, ancak gerçekte, bu web sitesinde Reactjs tarafından sağlanan başlığımı ve başka bir meta etiketimi kaybettiğimi ve aslında Google'daki konumumu kaybettiğimi belirtti! Çok araştırdım ama tüm sayfaların SEO dostu protokolleri için önceden işlenmiş veya SSR (Sunucu Tarafı Oluşturma) kullanması gerekiyor gibi görünüyor!
Reactjs, Angularjs, vb. Şeklinde genişler. Kısacası, Tarayıcıda sayfa kaynağını görüntüleyen
her sayfa, muhtemelen Google'ın dizine ekleyemeyeceği ancak diğerlerinin dizine atlayabileceği durumlarda tüm robotlar tarafından dizine eklenir!

En basit yol <title>etiketi index.html'den silmektir ve

<head>
<title> Website - The page </title></head>

web'deki her sayfada. Örümcekler bunu bulacak ve arama sonuçlarında gösterilecek :)