웹 페이지 제목을 동적으로 변경하는 방법

웹 페이지 제목을 동적으로 변경하는 방법

각각 다른 내용을 보여주는 탭 세트를 구현하는 웹 페이지가 있습니다.탭을 클릭해도 페이지가 새로 고쳐지지 않고 클라이언트 측에서 내용을 숨기거나 숨기지 않습니다.

이 시점에서 (SEO의 이유로) 페이지에서 선택한 탭에 따라 페이지 제목을 변경해야 합니다.이게 가능합니까?페이지를 새로고침하지 않고 Javascript를 통해 페이지 제목을 동적으로 변경할 수 있는 솔루션을 제안할 수 있습니까?

업데이트: Search Engine Land의 코멘트 및 참조에 따라 대부분의 웹 크롤러는 업데이트된 제목을 인덱싱합니다.아래 답변은 사용되지 않지만 코드는 여전히 적용됩니다.

document.title = "This is the new page title.";하지만 그렇게 되면 SEO의 목적은 완전히 무너질 것이다.대부분의 크롤러는 애초에 Javascript를 지원하지 않기 때문에 엘리먼트에 있는 모든 것을 페이지 제목으로 사용합니다.

대부분의 중요한 크롤러와 호환되도록 하려면 제목 태그 자체를 변경해야 합니다. 이 경우 페이지(PHP 등)를 새로고침해야 합니다.크롤러가 볼 수 있도록 페이지 제목을 변경하려면 이 문제를 피할 수 없습니다.

미래에서 인사를 드리고 싶습니다:) 최근 일어난 일:

1. 구글은 이제 당신의 웹사이트에¹ 있는 javascript를 실행합니다.
2. 현재 사람들은 React.js, Ember, Angular와 같은 복잡한 javascript 태스크를 페이지에서 실행하기 위해 사용하고 있으며 구글은 여전히¹ 인덱스를 작성하고 있다.
3. html5 history api(pushState, react-router, ember, angular)를 사용하면 열고 싶은 각 탭에 대해 별도의 URL이 있고 구글이 이를 색인화할¹ 수 있습니다.

그래서 당신의 질문에 답하기 위해 제목과 기타 메타 태그를 javascript에서 안전하게 변경할 수 있습니다(구글 이외의 검색 엔진을 지원하고 싶다면 https://prerender.io과 같은 것을 추가할 수도 있습니다). 다른 URL로 액세스 할 수 있습니다(구글이 검색 결과에 표시되는 페이지가 다르다는 것을 어떻게 알 수 있습니까?).SEO 관련 태그 변경(사용자가 무언가를 클릭하여 페이지를 변경한 후)은 간단합니다.

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

로봇에서 css와 javascript가 차단되지 않았는지 확인하세요.txt, Google Webmaster Tools에서 Fetch as Google 서비스를 사용할 수 있습니다.

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

document.title.

기본적인 튜토리얼도 이 페이지를 참조하십시오.

는 ★★★★★★★★★★★★★★★★.
document.title = 'test'

Javascript에서 페이지 제목을 변경하는 것이 SEO에 어떤 도움이 될지 모르겠습니다.대부분의 (또는 모든) 검색 봇은 Javascript를 실행하지 않고 처음에 로드된 마크업 제목만 읽습니다.

SEO를 지원하려면 백엔드에서 페이지 제목을 변경하여 다른 버전의 페이지를 제공해야 합니다.

제목을 변경할 수 있는 방법은 여러 가지가 있습니다.주요 두 가지는 다음과 같습니다.

문제성 방법

HTML 에 타이틀 태그를 붙입니다(예:<title>Hello</title>javascript에서 다음을 수행합니다.

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

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

분명히 올바른 방법

가장 간단한 방법은 문서 객체 모델(DOM)에서 제공하는 방법을 실제로 사용하는 것입니다.

document.title = "Hello World";

---

이전 방법은 일반적으로 문서 본문에 있는 태그를 변경하는 방법입니다.이 방법을 사용하여 헤드에 있는 것과 같은 메타 데이터 태그를 수정합니다(예:title부터 그다지 이 없을 수도 .)은 기껏해야 의심스러운 관행이며, 관용적이지 않으며, 시작부터 그다지 좋은 스타일이 아니며, 심지어 휴대성이 없을 수도 있습니다.하지만 한 가지 확실한 것은 다른 개발자들이 그것을 알게 되면 성가시게 된다는 것입니다.title.innerHTML = ...호로되되 되되있있

당신이 원하는 것은 후자의 방법입니다.이 속성은 이름에서 알 수 있듯이 특히 제목을 변경하기 위해 DOM 사양에 제공됩니다.

, XUL 로 「XUL」의 설정 하기 전에, 것을 그는, 「XUL」의 「」, 「XUL」을 호출하고 있습니다.undefined behavior이데올로기보다자바스크립트DOM 자바스크립트하지만 XUL은 완전히 '야수'이기 때문에 나는 딴 데로 돌린다.

이 말인데.innerHTML

해야 할 , '어울리다'를 입니다..innerHTML대체로 엉성합니다.대신 사용하세요.

만,.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에서 어떻게 도움이 될까요?일반적으로 봇은 페이지를 이동할 때 javascript 코드를 실행하지 않습니다.

최신 크롤러는 DOM에서 동적으로 생성된 콘텐츠를 해석할 수 있으므로document.title = ...아무 문제 없어요

크롤러가 변경 내용을 알아차리려면 페이지를 새 제목으로 다시 제공해야 합니다.javascript를 통해 실행하는 것은 인간 리더에게만 도움이 되며, 크롤러는 이 코드를 실행하지 않습니다.

제목에 모든 탭 제목을 한 문자열로 로드하고 탭 중 하나를 로드하면 javascript를 통해 제목을 변경할 수 있습니다.

ex: 처음에 당신의 타이틀을

my app | description | contact | about us | 

실행 중인 탭 중 하나를 로드하면:

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

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

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>

SEO에 도움이 되지만 탭 페이지가 그대로 남아 있는 경우 다음과 같이 각 탭에 대응하는 이름 있는 앵커를 사용하는 방법이 있습니다.

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

브라우저가 페이지를 렌더링할 때 URL을 해석하고 초기 페이지 제목을 설정하려면 서버 측 처리가 필요합니다., 그 .하여 javascript를 합니다.document.title하다

JavaScript를 사용할 수 있습니다.Google을 비롯한 일부 봇은 SEO(SERP에 올바른 제목 표시)를 위해 JavaScript를 실행합니다.

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 포함)라는 것을 알고 있습니다.

검색 엔진은 대부분의 Javascript를 무시하기 때문에 검색 엔진이 Ajax를 사용하지 않고 탭을 사용하여 크롤링할 수 있도록 해야 합니다.각 탭을 선택한 상태에서 페이지 전체를 로드하는 href를 가진 링크로 만듭니다.그러면 페이지의 태그에 해당 제목을 포함할 수 있습니다.

온클릭 이벤트 핸들러는 여전히 인간 뷰어를 위해 Ajax를 통해 페이지를 로드할 수 있습니다.

대부분의 검색 엔진에서 페이지를 보려면 브라우저에서 Javascript를 해제하고 탭을 클릭하면 해당 탭이 선택된 페이지와 올바른 제목이 로딩되도록 하십시오.

Ajax를 통해 로드하고 Javascript만으로 페이지 제목을 동적으로 변경하려면 다음을 수행합니다.

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

그러나 검색 엔진은 Javascript에서 변경된 내용을 볼 수 없습니다.

하지만 SEO 비트를 얻기 위해서는

페이지가 변경될 때 페이지를 다시 로드해야 검색 엔진이 다른 제목 등을 볼 수 있습니다.

따라서 먼저 페이지 새로고침이 작동하는지 확인한 후 document.title 변경 사항을 추가하십시오.

여기에 덧붙이고 싶은 것이 있습니다.JavaScript를 통한 제목 변경은 AJAX를 통한 데이터베이스 업데이트 시 도움이 됩니다.따라서 페이지를 새로 고칠 필요 없이 제목이 변경됩니다.제목은 서버 측 스크립트 언어를 통해 변경되지만 JavaScript를 통해 변경되는 것은 사용자 경험을 보다 즐겁고 유연하게 하기 위한 조작성과 UI에 불과합니다.

자, 단순히 재미삼아 JavaScript를 통해 제목을 변경하는 경우에는 변경하지 마십시오.

구글은 모든 js파일이 렌더링되었다고 언급했지만, 실제로는 이 웹사이트에서 Reactjs가 제공한 타이틀과 다른 메타태그를 잃어버렸고 구글에서 실제로 위치를 잃었습니다!많이 검색했지만 모든 페이지가 사전 렌더링되었거나 SSR(Server Side Rendering)을 사용해야 SEO 친화적인 프로토콜을 가질 수 있습니다!
Reactjs, Angularjs.
즉, 브라우저에 뷰 페이지 소스가 있는 모든 페이지는 모든 로봇에 의해 인덱싱됩니다. Google이 인덱싱하지 않으면 다른 페이지는 인덱싱을 건너뜁니다.

입니다.<title>classes를 합니다.

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

모든 페이지에 표시됩니다.스파이더에 의해 이 정보가 검색되어 검색 결과에 표시됩니다.

별도의 헤더를 사용하여 php를 사용하여 다음 헤더를 사용합니다.

<?php
if (!isset($title)){
    $title = "Your Title";
  }
  else {
    $title = $title;
  }
 ?>
<head>
<title><?php echo $title; ?></title>

다음으로 사용하는 각 페이지에서 다음을 수행합니다.

<?php
  $title = "Your Title - Page";
  include( "./header.php" );
?>

언급URL : https://stackoverflow.com/questions/413439/how-to-dynamically-change-a-web-pages-title