React 19のドキュメントメタデータとは
React 19ではドキュメントメタデータをサポートしているため、コンポーネント内に <title>, <meta>, <link> などを直接記述できます。
App.tsx
function App() {
return (
<>
<title>React 19のドキュメントメタデータのサンプル</title>
<meta name="robots" content="none" />
<link rel="stylesheet" href="/pink.css" />
<h1>React 19のドキュメントメタデータのサンプル</h1>
</>
)
}
export default AppReact 19より前はuseStateを使って以下のように書かなければならなかったので、だいぶシンプルになりました。
App.tsx
import { useEffect } from 'react'
function App() {
useEffect(() => {
document.title = 'React 19のドキュメントメタデータのサンプル'
}, [])
return (
<>
<h1>React 19のドキュメントメタデータのサンプル</h1>
</>
)
}
export default Appただし、titleは上書きではなく追記となるため、これだけだとデベロッパーツールで確認すると以下のように<title>が2つ表示されます。
HTML
<title>React 19のドキュメントメタデータのサンプル</title>
<title>Vite + React + TS</title>SEO上は問題ないですが、気になる場合はuseEffectを使用してdocument.titleを上書きする旧来の方法を使用する必要があります。
index.htmlの<title>を削除する解決方法はSEO上の問題が発生する可能性があるので、index.htmlの<title>は削除してはいけません。
linkのcssファイルはpublicに入れる
linkのcssファイルは絶対パスでなければ、publicに入れて読み込みます。
srcやassetsディレクトリの中ではないので注意が必要です。
styleは{''}内に入れる
<style>も使用可能ですが、<style>{''}</style>の形式で書く必要があります。
例えば、<style>body { background: lightblue; }</style> だとCSSが適用されません。
App.tsx
function App() {
return (
<>
<style>{'body { background: lightblue; }'}</style>
</>
)
}
export default Appscriptは使用不可
<script>を以下のように追加しても使用できません。(useEffectを使用してください)
App.tsx
// このようなscriptは使用不可
function App() {
return (
<>
<script>console.log('Hello')</script>
</>
)
}
export default Appnoscriptは使用不可
<noscript>を追加しても使用できません。
JavaScriptが無効のときに表示される箇所なので使用不可なのは当たり前ですが。
App.tsx
// noscriptは使用不可
function App() {
return (
<>
<noscript>JavaScriptを有効にしてください。</noscript>
</>
)
}
export default App
