web-dev-qa-db-ja.com

Google構造化データツールがmy Reactサイトのコンテンツを読み取らない

このツールを使用して構造化データをテストします： https://search.google.com/structured-data/testing-tool

これは私のページです： https://www.offersprive.eu/it/prod/Black%20Latte/56

確認してみると、 レスポンスが空

...しかし、htmlコンテンツをコピーして貼り付けると、 ツールがそれを正しく読み取る

リンクの内容を読むにはどうすればよいですか？ Reactコンテンツの読み込みに問題がありますか？

ありがとう。

reactjsstructured-data
6
tatov45758

私はこれと同じ問題を抱えています。

基本的に、私はReact=で構築された静的なWebサイト（ジョブボード）を持っており、Google Job Networkにジョブを表示したいと考えています。

これを行うには、Googleがクロールするための構造化データがWebページに含まれている必要があります。

データをヘッダーに表示するreact-structured-dataのようないくつかのnpmパッケージを試しましたが、Googleがスキャンを実行した後にデータが挿入されるため、Googleのデータはまだ存在せず、結果は返されません。

反応ヘルメットを使用しようとすると、同じ問題があります。

ComponentDidMountまたはComponentWillMountのヘッダーまたは本文にデータを含むスクリプトを追加しようとすると、同じ問題が発生します。

要素を検査するとヘッダーに表示されますが、ページソースを表示するとヘッダーに表示されないのは奇妙です。

たぶん、1つの解決策はサーバー側レンダリングですが、別の方法が必要です。

可能な答え

この回答によると、Googleは実際にデータを表示する可能性がありますが、そのテストツールはデータを表示しません。これは、お尻。

https://webmasters.stackexchange.com/questions/91064/structured-data-tool-doesnt-see-javascript-rendered-content

また、このページ：

https://developers.google.com/search/docs/guides/intro-structured-data#structured-data-format

言う：Google can read JSON-LD data when it is dynamically injected into the page's contents, such as by JavaScript code or embedded widgets in your content management system.

別の可能性のある解決策ですが、事後にロードされるため、もっともらしさはありません

JSON-LDを使用する代わりに、次のように、要素に添付されたmicrodataを使用します。

https://schema.org/JobPosting

例4の[microdata]タブをクリックします

そうすれば、スキャンする前に要素が読み込まれるのを待つことがわかるでしょう。

これらのソリューションをテストしています。近いうちにログオフするので、たぶん明日更新します。

更新：答えを見つけました

私は上記を試してみましたが、データは有効であり、Googleはそれを実行しますそれはGoogleの構造化データツールです（そしていくつかの構造化データも=） chrome extensions）データが表示されません。これは、このようなツールがデータを読み込む前にページをスキャンするためです。他のツールは、データが読み込まれるまで待ってからスキャンします。 、 できます。

例：Webページを検査してHTML要素をクリックし、[htmlとして編集]をクリックしてページのhtml全体をコピーし、そのHTMLをコードとしてGoogle構造化データツールに貼り付けると、今すぐ表示されるはずですあなたのデータを見つけます。うまくいけば、彼らは将来的にそれを修正しますが、今のところ、少なくともそれを試してデータが有効であることを確認することができます。

もう1つは、Google Search Consoleにアクセスして、問題のURLがGoogleによってインデックスに登録されるようにリクエストした場合、処理が完了するまで1日ほど待ってから、再度チェックインすることです。 Google Search Consoleが表示されますDIDデータが見つかります。GoogleIS Search Consoleなどのデータが表示されます。これは、壊れた構造化データツールです。データが表示されていないGoogleです。うまくいけば、すぐに修正されます。

記録のために、これを私のReactアプリで機能させる方法は、コンポーネントのDid Mount内にデータを配置することです。

`componentDidMount（）{

const googleJobNetworkScript = document.createElement("script");
googleJobNetworkScript.type = "application/ld+json";
googleJobNetworkScript.innerHTML = JSON.stringify({
  "@context": "http://schema.org",
  "@type": "JobPosting",
  "baseSalary": "100000",
  "jobBenefits": "Medical, Life, Dental",
  "datePosted": "2011-10-31",
  "description": "Description: ABC Company Inc. seeks a full-time mid-level software engineer to develop in-house tools.",
  "educationRequirements": "Bachelor's Degree in Computer Science, Information Systems or related fields of study.",
  "employmentType": "Full-time",
  "experienceRequirements": "Minumum 3 years experience as a software engineer",
  "incentiveCompensation": "Performance-based annual bonus plan, project-completion bonuses",
  "industry": "Computer Software",
  "jobLocation": {
    "@type": "Place",
    "address": {
      "@type": "PostalAddress",
      "addressLocality": "Kirkland",
      "addressRegion": "WA"
    }
  },
  "occupationalCategory": "15-1132.00 Software Developers, Application",
  "qualifications": "Ability to work in a team environment with members of varying skill levels. Highly motivated. Learns quickly.",
  "responsibilities": "Design and write specifications for tools for in-house customers Build tools according to specifications",
  "salaryCurrency": "USD",
  "skills": "Web application development using Java/J2EE Web application development using Python or familiarity with dynamic programming languages",
  "specialCommitments": "VeteranCommit",
  "title": "Software Engineer",
  "workHours": "40 hours per week"
});

document.head.appendChild(googleJobNetworkScript);

} `

Document.headの代わりにdocument.bodyに子を追加することもできます。どちらでもうまくいくはずです。あなたの選択。

他の人が行うNPMのreact-helmetやreact-structured-dataを使用することもできますが、上記はうまく機能しているように見えるので、必要性はわかりませんでした。

他の構造化データタイプはschema.orgで見つけることができます。

新しいWebページまたはGoogleにスキャンさせたいコンテンツが更新されたWebページがあるたびに、新しいサイトマップをGoogleに送信するか、Google Indexing APIにサイトを送信することを忘れないでください。

この投稿は長いですが、すべてのベースをカバーし、それが役に立てば幸いです。

2
J. Doe

<head>と構造化データの管理に役立つ React Helmet パッケージを確認することをお勧めします。

0
neiya

Google構造化データツールがmy React Site contentを読み取らない

私はそれを正しく読んでいると思いますが、jsを実行しませんページのソースでは、Googleツールがこのソースで機能しており、反応によって生成されたものではないことがわかります。

React content loading？の問題ですか？

これは、ページのロード後に反応コンポーネントがレンダリングされ、ウェブクローラーがJavaScriptを実行しないため、コンテンツがクローラーに表示されないためです。

これであなたの疑問が解消されることを願っています。

0
Jatin Parmar

あなたのウェブサイトがどのようにロードされるかを簡単に見てきた; Reactヘルメットを使用していると思います。このツールに問題があります（そして一般的には、Vanilla React）は、ページをロードし、JavaScriptを実行する必要があることです。ヘッダーを設定してコンテンツをロードするように注文します。

ウェブページをクロールするほとんどのツールはJavaScriptを実行しません。Googleはメインクローラーで実行するようになりましたが、さまざまなツールをすべて更新しているようには見えません。 Facebook、Twitter、Bingなど、せいぜいパッチだと思います。

答えはおそらく Gatsby または Next.js のいずれかです。両方とも、サーバー上またはビルド中にReactコードをレンダリングする方法を提供するため、ページが最初に呼び出されたときにすべてのヘッダーとコンテンツが送信されます。独自のサーバー側レンダリングメソッドを作成できますが、これらのソリューションは、そのすべての作業を提供します。

これにより、クローラーでJavaScriptを実行する必要がなくなります。あなたは適切にインデックスを取得します！興味深いことに、この問題に出くわしたとき、私はギャツビーに行きました。

簡単な回避策は、他のリンク/メタタグを使用することです。それらをベースのindex.htmlファイルに書き込みます。しかし、これは明らかにページごとに更新することはできません...

それにいくつかの光を当てることを願っています:)

0
Jamie Robinson