วิธีการเปลี่ยนชื่อของหน้าเว็บแบบไดนามิก?

ฉันมีหน้าเว็บที่ใช้ชุดแท็บแต่ละแท็บที่แสดงเนื้อหาที่แตกต่างกัน คลิกที่แท็บไม่รีเฟรชหน้า แต่ซ่อน / เลิกซ่อนเนื้อหาที่ด้านลูกค้า

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

อัปเดต : ตามความคิดเห็นและการอ้างอิงในSearchEngineLand โปรแกรมรวบรวมข้อมูลเว็บส่วนใหญ่จะจัดทำดัชนีชื่อเรื่องที่อัปเดต คำตอบด้านล่างล้าสมัย แต่รหัสยังใช้ได้

คุณสามารถทำสิ่งที่ต้องการได้document.title = "This is the new page title.";แต่นั่นอาจทำให้วัตถุประสงค์ของ SEO หมดไป โปรแกรมรวบรวมข้อมูลส่วนใหญ่จะไม่สนับสนุนจาวาสคริปต์ในตอนแรกดังนั้นพวกเขาจะใช้สิ่งที่อยู่ในองค์ประกอบเป็นชื่อหน้า

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

ฉันอยากจะทักทายจากอนาคต :) สิ่งที่เพิ่งเกิดขึ้น:

1. Google เรียกใช้จาวาสคริปต์ที่อยู่บนเว็บไซต์ของคุณ¹
2. ตอนนี้ผู้คนใช้สิ่งต่าง ๆ เช่น React.js, Ember และ Angular เพื่อเรียกใช้งานจาวาสคริปต์ที่ซับซ้อนบนหน้าเว็บและยังคงได้รับการจัดทำดัชนีโดย Google ¹
3. คุณสามารถใช้ html5 history api (pushState, react-router, ember, angular) ที่อนุญาตให้คุณทำสิ่งต่าง ๆ เช่นมี URL แยกสำหรับแต่ละแท็บที่คุณต้องการเปิดและ Google จะจัดทำดัชนีที่¹

ดังนั้นเพื่อตอบคำถามของคุณคุณสามารถเปลี่ยนชื่อและเมตาแท็กอื่น ๆ ได้อย่างปลอดภัยจาก javascript (คุณยังสามารถเพิ่มสิ่งที่ต้องการhttps://prerender.ioหากคุณต้องการสนับสนุนเครื่องมือค้นหาที่ไม่ใช่ของ Google) เพียงแค่ทำให้พวกเขาสามารถเข้าถึงได้เป็น URL แยกต่างหาก มิฉะนั้น Google จะรู้ได้อย่างไรว่าหน้าเหล่านั้นเป็นหน้าเว็บที่แตกต่างกันเพื่อแสดงในผลการค้นหา?) การเปลี่ยนแท็กที่เกี่ยวข้องกับ SEO (หลังจากผู้ใช้เปลี่ยนหน้าโดยการคลิกที่บางสิ่ง) ทำได้ง่าย ๆ :

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

เพียงตรวจสอบให้แน่ใจว่า css และ javascript ไม่ถูกบล็อกใน robots.txt คุณสามารถใช้Fetch เป็นบริการของ Google ใน Google Webmaster Tools

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

ฉันไม่เห็นว่าการเปลี่ยนชื่อหน้าผ่าน Javascript จะช่วย SEO ได้อย่างไร บอทค้นหาส่วนใหญ่ (หรือทั้งหมด) ไม่ได้เรียกใช้ Javascript และจะอ่านเฉพาะชื่อที่โหลดครั้งแรกซึ่งเป็นมาร์กอัป

หากคุณต้องการช่วย SEO คุณจะต้องเปลี่ยนชื่อหน้าในส่วนหลังและให้บริการหน้ารุ่นต่างๆ

document.titleใช้

ดูหน้านี้สำหรับการสอนเบื้องต้นเช่นกัน

รหัสคือ
document.title = 'test'

มีหลายวิธีที่คุณสามารถเปลี่ยนชื่อเรื่องได้สองวิธีหลักเป็นดังนี้:

วิธีการที่น่าสงสัย

ใส่แท็กชื่อใน HTML (เช่น<title>Hello</title>) จากนั้นในจาวาสคริปต์:

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

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

วิธีที่ถูกต้องชัดเจน

สิ่งที่ง่ายที่สุดคือการใช้วิธีการที่จัดทำโดย Document Object Model (DOM)

document.title = "Hello World";

วิธีการเดิมคือสิ่งที่คุณจะทำเพื่อเปลี่ยนแท็กที่พบในเนื้อหาของเอกสาร การใช้วิธีนี้ในการปรับเปลี่ยนเมตาดาต้า - แท็กเหมือนที่พบในหัว (เหมือนtitle) เป็นวิธีปฏิบัติที่น่าสงสัยที่สุดไม่ใช่สำนวนไม่ดีสไตล์เริ่มต้นและอาจไม่สามารถพกพาได้ สิ่งหนึ่งที่คุณมั่นใจได้ก็คือมันจะรบกวนนักพัฒนารายอื่นหากพวกเขาเห็นtitle.innerHTML = ...ในโค้ดที่พวกเขากำลังบำรุงรักษา

สิ่งที่คุณต้องการใช้เป็นวิธีหลัง คุณสมบัตินี้มีให้ใน DOM Specificationโดยเฉพาะเพื่อวัตถุประสงค์ในการเปลี่ยนชื่อ

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

พูดถึง .innerHTML

คำแนะนำที่ดีบางข้อที่ควรคำนึงถึง.innerHTMLคือการใช้โดยทั่วไปมักจะไม่เป็นระเบียบ ใช้appendChildแทน

แม้ว่าสองกรณีที่ฉันยังพบว่า.innerHTMLมีประโยชน์อยู่นั้นรวมถึงการแทรกข้อความธรรมดาลงในองค์ประกอบขนาดเล็ก ...

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;
}());

... และล้างภาชนะ ...

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

การใช้ document.title เป็นวิธีที่คุณจะทำให้สำเร็จใน JavaScript แต่สิ่งนี้จะช่วยได้อย่างไรกับ SEO โดยทั่วไปแล้วบ็อตจะไม่เรียกใช้โค้ดจาวาสคริปต์เมื่อทำการสำรวจผ่านหน้าเว็บต่างๆ

ซอฟต์แวร์รวบรวมข้อมูลสมัยใหม่สามารถแยกวิเคราะห์เนื้อหาที่สร้างขึ้นแบบไดนามิกใน DOM ดังนั้นการใช้งานdocument.title = ...จึงสมบูรณ์แบบ

คุณจะต้องแสดงหน้าใหม่ด้วยชื่อใหม่เพื่อให้โปรแกรมรวบรวมข้อมูลใด ๆ สังเกตเห็นการเปลี่ยนแปลง การทำผ่าน javascript จะเป็นประโยชน์ต่อผู้อ่านของมนุษย์เท่านั้นซอฟต์แวร์รวบรวมข้อมูลจะไม่เรียกใช้งานโค้ดดังกล่าว

สำหรับผู้ที่มองหาเวอร์ชั่น npm ของมันมีทั้งห้องสมุดสำหรับสิ่งนี้:

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

บางทีคุณสามารถโหลดหัวเรื่องของแท็บทั้งหมดในหนึ่งสตริงแล้วเมื่อคุณโหลดแท็บหนึ่งแท็บเปลี่ยนชื่อผ่านทางจาวาสคริปต์

เช่นตอนแรกตั้งชื่อของคุณเป็น

my app | description | contact | about us | 

เมื่อคุณโหลดหนึ่งในแท็บทำงาน:

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

วิธีหนึ่งที่อยู่ในใจที่อาจช่วยให้ SEO และยังมีหน้าแท็บของคุณตามที่พวกเขาจะใช้ชื่อจุดยึดที่สอดคล้องกับแต่ละแท็บดังใน:

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

คุณจะต้องทำการประมวลผลฝั่งเซิร์ฟเวอร์เพื่อวิเคราะห์ URL และตั้งชื่อหน้าเริ่มต้นเมื่อเบราว์เซอร์แสดงผลหน้า ฉันจะทำต่อไปและทำให้แท็บนั้นเป็น "ใช้งานอยู่" เมื่อโหลดหน้าเว็บแล้วและผู้ใช้จริงกำลังเปลี่ยนแท็บคุณจะต้องใช้จาวาสคริปต์เพื่อเปลี่ยนdocument.titleตามที่ผู้ใช้รายอื่นระบุไว้

document.titleใช้ มันจะมีประโยชน์สำหรับทุกสิ่ง แต่จะทำลาย SEO ในเว็บไซต์ของคุณ

ตัวอย่าง:

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 บอทบางตัวรวมถึง Google จะใช้งาน JavaScript เพื่อประโยชน์ของ SEO (แสดงชื่อที่ถูกต้องใน SERP)

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

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

บทความที่แสดงผลลัพธ์ในเชิงบวก: 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

อย่าคิดว่าบ็อตจะไม่เรียกใช้ JavaScript เสมอไป http://searchengineland.com/tested-googlebot-crawls-javascript-heres-learned-220157 Google และเครื่องมือค้นหาอื่น ๆ รู้ว่าผลลัพธ์ที่ดีที่สุดในการจัดทำดัชนีคือผลลัพธ์ที่ผู้ใช้จริงจะเห็นในเบราว์เซอร์รวมถึง JavaScript

เนื่องจากเครื่องมือค้นหาไม่สนใจจาวาสคริปต์ส่วนใหญ่คุณจะต้องทำเพื่อให้เครื่องมือค้นหาสามารถรวบรวมข้อมูลโดยใช้แท็บโดยไม่ต้องใช้ Ajax กำหนดให้ลิงก์แต่ละแท็บมี href ที่โหลดทั้งหน้าด้วยการเลือกแท็บนั้น จากนั้นหน้าสามารถมีชื่อนั้นในแท็ก

ตัวจัดการเหตุการณ์ onclick ยังคงสามารถโหลดหน้าเว็บผ่าน ajax สำหรับผู้ดูที่เป็นมนุษย์

หากต้องการดูหน้าเว็บตามที่เครื่องมือค้นหาส่วนใหญ่เห็นให้ปิด Javascript ในเบราว์เซอร์ของคุณและลองทำเพื่อให้การคลิกแท็บจะโหลดหน้าเว็บโดยเลือกแท็บนั้นและชื่อที่ถูกต้อง

หากคุณกำลังโหลดผ่าน ajax และคุณต้องการเปลี่ยนชื่อหน้าแบบไดนามิกด้วย Javascript ให้ทำดังนี้:

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

อย่างไรก็ตามเครื่องมือค้นหาจะไม่เห็นการเปลี่ยนแปลงที่เกิดขึ้นในจาวาสคริปต์

แต่เพื่อให้ได้ชุด SEO

คุณต้องโหลดหน้าซ้ำเมื่อหน้าเปลี่ยนเพื่อให้เครื่องมือค้นหาเห็นชื่อเรื่องต่าง ๆ เป็นต้น

ดังนั้นตรวจสอบให้แน่ใจว่าการโหลดหน้าใช้งานได้ก่อนจากนั้นจึงเพิ่มการเปลี่ยนแปลง document.title

ฉันต้องการเพิ่มบางสิ่งที่นี่: การเปลี่ยนชื่อเรื่องด้วย JavaScript มีประโยชน์จริง ๆ ถ้าคุณกำลังอัปเดตฐานข้อมูลผ่าน AJAX ดังนั้นชื่อจึงเปลี่ยนไปโดยที่คุณไม่ต้องรีเฟรชหน้าเว็บ ชื่อเรื่องมีการเปลี่ยนแปลงผ่านภาษาสคริปต์ฝั่งเซิร์ฟเวอร์ของคุณ แต่การเปลี่ยนชื่อผ่าน JavaScript เป็นเพียงการใช้งานและสิ่ง UI ที่ทำให้ประสบการณ์ผู้ใช้สนุกสนานและลื่นไหลมากขึ้น

ตอนนี้ถ้าคุณกำลังเปลี่ยนชื่อเรื่องผ่าน JavaScript เพียงเพื่อสิ่งที่ดีที่สุดแล้วคุณไม่ควรทำเช่นนั้น

Google กล่าวว่าไฟล์ js ทั้งหมดที่แสดง แต่ในความเป็นจริงฉันได้สูญเสียชื่อของฉันและเมตาแท็กอื่นที่ Reactjs ให้ไว้ในเว็บไซต์นี้และทำให้ฉันเสียตำแหน่งใน Google จริง ๆ ! ฉันค้นหามาก แต่ดูเหมือนว่าทุกหน้าจะต้องแสดงผลล่วงหน้าหรือใช้ SSR (Server Side Rendering) เพื่อให้มีโปรโตคอลที่เป็นมิตรกับ SEO!
มันขยายไปถึง Reactjs, Angularjs เป็นต้นโดย
ย่อทุกหน้าเว็บที่มีแหล่งที่มาของหน้าดูบนเบราว์เซอร์จะถูกทำดัชนีโดยหุ่นยนต์ทั้งหมดหาก Google ไม่สามารถทำดัชนีได้

วิธีที่ง่ายที่สุดคือการลบ<title>แท็กจาก index.html และรวม

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

ในทุกหน้าในเว็บ Spiders จะค้นหาสิ่งนี้และจะแสดงในผลการค้นหา :)