常連

検索エンジンのクローラー（Googlebotなど）は、クライアントサイドのみで完結するような実装（状態管理など）も、監視しているのでしょうか？

SEO対策で、サーバーのみの対応で良いのか、クライアントサイドで完結する実装にも対策が必要なのか気になりご質問しました。

AIによると、
> サーバーから返されるHTMLを最優先 でクロール・インデックス化する。
> しかし、JavaScriptの実行もサポートしており、クライアントサイドでの変更も解析する可能性がある。
> そのため、クライアントサイドでのみ完結する実装にも注意が必要。
と言ってました。

クライアントサイドの実装も必要そうですが、明確な理解ができていない状態です。
知見のある方がいらっしゃいましたらご教示いただけますと幸いです。

クライアントサイドで完結する実装を検索エンジンのクローラーは監視しているのか

### 実現したいこと
自身で作成したWebサイトをgoogleで検索すると検索結果にドメイン名ではなくWebサイト名を表示するようにしたいのですが、どこが問題なのかわかりません。
ご教授いただけますと幸いです。

### 発生している問題・分からないこと
Next.jsのlayout.tsxにJsonLdに構造化データを定義してJson.stringifyに引数として渡しているのですが、どこが問題なのでしょうか？




### 該当のソースコード

```typescript
import type { Metadata } from 'next';
import './globals.css';
import Script from 'next/script';
import { ReactNode } from 'react';

const jsonLd = {
  '@context': 'https://schema.org',
  '@type': 'WebSite',
  name: '******',
  alternateName: ['********'],
  url: 'https://*****.com/',
  description:
    '*****',
  author: {
    '@type': 'Person',
    name: '****',
    url: 'https://****.com/',
  },
  datePublished: '****-**-**',
  dateModified: '****-**-**',
};

export const metadata: Metadata = {
  title: '****',
  description:
    '****',
  icons: [
    {
      rel: 'icon',
      type: 'image/png',
      sizes: '32x32',
      url: '/favicon/favicon-32x32.png',
    },
    {
      rel: 'icon',
      type: 'image/png',
      sizes: '16x16',
      url: '/favicon/favicon-16x16.png',
    },
    {
      rel: 'apple-touch-icon',
      sizes: '180x180',
      url: '/favicon/apple-touch-icon.png',
    },
  ],
};

export default function RootLayout({
  children,
}: Readonly<{
  children: ReactNode;
}>) {
  return (
    <html lang="ja">
      <head>
        <meta
          name="google-site-verification"
          content="oVdyw8Qii3w5CxsS2bFxTSy6MuYgrpmssENFHs38yRE"
        />
        <script
          type="application/ld+json"
          dangerouslySetInnerHTML={{
            __html: JSON.stringify(jsonLd)
          }}
        />
      </head>
```

### 試したこと・調べたこと
- [x] teratailやGoogle等で検索した
- [x] ソースコードを自分なりに変更した
- [ ] 知人に聞いた
- [ ] その他

##### 上記の詳細・結果
searchconsole等のツールで確認しましたがエラーは出ていないです。

### 補足
![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2024-12-03/026f65f0-9bc0-4c52-a3a1-fc392ef1139a.png)

Next.jsで作成したWebサイトが検索上ではWebサイト名ではなくドメイン名が表示されてしまう

外注していたコーポレートサイトが上がってきました。

所々でhタグの中にpタグが入っているのですが、これは正常なコーディングなのでしょうか？
正常ではない場合、SEOにも影響がでるのではと心配しています。
具体的には以下のような感じです。

```html
<h2>
 <p>
  キャッチコピー
  <br>
  製品名
 </p>
</h2>
```

お詳しい方いらっしゃいましたアドバイスいただけますと幸いです。

hタグの中にpタグって普通でしょうか？

以前は同一ページ内にid要素は必ず一意でなければいけませんでしたが、最近は複数でも構文エラーに該当しなくなったのでしょうか？

また、seoの観点からも同様に不利にならないでしょうか？

特にワードプレスを使用していると、プラグインで同じidが複数になってしまいます。

id要素が複数でもペナルティはない？

###前提
<i>タグは、[HTML5タグリファレンス](http://www.htmq.com/html5/i.shtml)によると、
> 声や心の中で思ったことなど、他と区別したいテキストを表す

と定義されており、
> 分類学上の名称、専門用語、他言語の慣用句、思考の内容、船の名前
その他一般的に印刷される際にイタリック体となるようなテキスト

に使うと書かれています。

しかし、[Font Awesome](http://fontawesome.io/)を始めとしたアイコンを置くために用いる用法をよく見かけます。
これは、内側には何も文字列を記入せずに図を入れるためだけに<i>タグを用いるものです。

###発生している問題
①これは印刷時にイタリック体となるようなテキストではないが、正しい文法なのか
②この用法で文法的に正しくない場合は、SEOで不利にならないのか

###該当のソースコード
```HTML
<i class="fa fa-hand-peace-o" aria-hidden="true"></i>
```

###意図
何かしらの手段でアイコンを利用したく、
Font Awesomeは便利なので使用したいと考えていますが、
SEOで不利になるようであれば別の手段(<img>など)を使うつもりです。

###補足
もしSEOで不利になるようであれば、
どのような代替案があるのかもご教示くださると幸いです。

<i>タグにアイコンを置くことによるSEO評価

一覧ページを制作する際にJSONを用いて、データの呼び出しを行う予定なのですが
JSONデータを用いて作ったサイトは「ページのソースを表示」した際に
ソース上にデータの内容は表示されません。
※PHPで書き出したものであれば問題なく表示されます。

こちらソース上にデータが表示されない場合、
googleは適切にデータがあることを読んでくれるのでしょうか。

何か別途SEO対応をしないダメなのでしょうか。

例）SBI証券など
https://site0.sbisec.co.jp/marble/fund/powersearch/fundpsearch.do


何卒宜しくお願い致します。


JSON呼び出しを利用する際のSEO対策に関して（ページのソースに表示されない）

### 実現したいこと
設定した構造化データが実際にどのようにブラウザで表示されるか確認したい

**このように実際の画面をプレビューなどで確認したい**
![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2024-10-17/0971ac2a-2681-4c7d-862f-b7d0bd1d549f.png)

### 発生している問題・分からないこと
リッチリザルトが有効になっていることは確認できたが
ブラウザにどのように表示されるかが確認できない

![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2024-10-17/57c67885-0567-4076-88d3-f4e0fb5b60c3.png)



### 該当のソースコード

```headタグに記載されている該当のscript
<script type="application/ld+json">{"@context":"https://schema.org","@type":"Article","datePublished":"2015-02-05T08:00:00+08:00","description":"This is a mighty good description of this article.","mainEntityOfPage":{"@type":"WebPage","@id":"https://example.com/article"},"headline":"Article headline","image":["https://example.com/photos/1x1/photo.jpg","https://example.com/photos/4x3/photo.jpg","https://example.com/photos/16x9/photo.jpg"],"dateModified":"2015-02-05T09:00:00+08:00","author":[{"@type":"Person","name":"Jane Blogs","url":"https://example.com"},{"@type":"Person","name":"Mary Stone","url":"https://example.com"}],"publisher":{"@type":"Organization","name":"Gary Meehan","logo":{"@type":"ImageObject","url":"https://www.example.com/photos/logo.jpg"}},"isAccessibleForFree":true}</script>

<script type="application/ld+json">{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":"https://example.com/books","name":"Books"},{"@type":"ListItem","position":2,"item":"https://example.com/books/authors","name":"Authors"},{"@type":"ListItem","position":3,"item":"https://example.com/books/authors/annleckie","name":"Ann Leckie"},{"@type":"ListItem","position":4,"item":"https://example.com/books/authors/ancillaryjustice","name":"Ancillary Justice"}]}</script>
```

### 試したこと・調べたこと
- [x] teratailやGoogle等で検索した
- [ ] ソースコードを自分なりに変更した
- [ ] 知人に聞いた
- [ ] その他

##### 上記の詳細・結果
下記のサイトでリッチリザルトが確認できるとあったので対象のサイトURLを入力
設定が適切にできていることは確認できた
しかし、プレビューなど実際のブラウザ画面の確認方法がわからない
[リッチリザルト確認サイト](https://search.google.com/test/rich-results?hl=ja)


### 補足
使用フレームワーク：Next.js
デプロイ環境：vercel

リッチリザルトの確認方法がわからない

2日前にGooglePlayでアプリを公開したのですが、検索ででてきません。

アプリのタイトルや説明欄にアプリ名が入っているのですが、アプリ名で検索しても出てこない状況で困っております。

どなたか、情報をお持ちでしたら、何かご教授して頂けましたら幸いです。よろしくお願いいたします。