> ## Documentation Index
> Fetch the complete documentation index at: https://inertiajs-vi.tuantq.online/llms.txt
> Use this file to discover all available pages before exploring further.
# Tiêu đề & Meta
Đây là tài liệu Inertia.js v1, phiên bản không còn được duy trì tích cực. Vui lòng tham khảo [tài liệu v3](/v3/getting-started/index).
Vì ứng dụng JavaScript sử dụng Inertia được render bên trong `` của tài liệu nên chúng không thể render markup vào `` của tài liệu, do phần này nằm ngoài phạm vi của ứng dụng. Để hỗ trợ việc này, Inertia cung cấp component `` dùng để thiết lập ``, các thẻ `<meta>` và những phần tử `<head>` khác của trang.
Component `<Head>` chỉ thay thế các phần tử `<head>` không có trong root template phía máy chủ.
Component `<Head>` không có trong adapter Svelte vì Svelte đã cung cấp component `<svelte:head>` riêng.
## Component Head
Để thêm các phần tử `<head>` vào trang, hãy dùng component `<Head>`. Bên trong component này, bạn có thể đặt các phần tử muốn thêm vào `<head>` của tài liệu.
<CodeGroup>
```vue Vue 2 icon="vuejs" theme={null}
import { Head } from '@inertiajs/vue2'
<Head>
<title>Your page title
```
```vue Vue 3 icon="vuejs" theme={null}
import { Head } from '@inertiajs/vue3'
Your page title
```
```jsx React icon="react" theme={null}
import { Head } from '@inertiajs/react'
Your page title
```
```html Svelte icon="s" theme={null}
Your page title
```
## Cú pháp rút gọn cho tiêu đề
Nếu chỉ cần thêm `` vào `<head>` của tài liệu, bạn có thể truyền trực tiếp tiêu đề dưới dạng prop cho component `<Head>`.
<CodeGroup>
```vue Vue 2 icon="vuejs" theme={null}
import { Head } from '@inertiajs/vue2'
<Head title="Your page title" />
```
```vue Vue 3 icon="vuejs" theme={null}
import { Head } from '@inertiajs/vue3'
<Head title="Your page title" />
```
```jsx React icon="react" theme={null}
import { Head } from '@inertiajs/react'
<Head title="Your page title" />
```
```js Svelte icon="s" theme={null}
// Not supported
```
</CodeGroup>
## Callback tiêu đề
Bạn có thể thay đổi `<title>` của trang trên toàn ứng dụng bằng callback `title` trong phương thức thiết lập `createInertiaApp`. Thông thường phương thức này được gọi trong file JavaScript chính của ứng dụng. Một trường hợp sử dụng phổ biến của callback tiêu đề là tự động thêm tên ứng dụng trước hoặc sau tiêu đề của từng trang.
```js theme={null}
createInertiaApp({
title: title => \
```
Sau khi định nghĩa callback `title`, callback sẽ tự động được gọi mỗi khi bạn thiết lập tiêu đề bằng component `<Head>`.
<CodeGroup>
```vue Vue 2 icon="vuejs" theme={null}
import { Head } from '@inertiajs/vue2'
<Head title="Home">
```
```vue Vue 3 icon="vuejs" theme={null}
import { Head } from '@inertiajs/vue3'
<Head title="Home">
```
```jsx React icon="react" theme={null}
import { Head } from '@inertiajs/react'
<Head title="Home">
```
```js Svelte icon="s" theme={null}
// Not supported
```
</CodeGroup>
Trong ví dụ này, kết quả sẽ tạo ra thẻ `<title>` sau.
```html theme={null}
<title>Home - My App
```
Callback `title` cũng sẽ được gọi khi bạn thiết lập tiêu đề bằng thẻ `` bên trong component `<Head>`.
<CodeGroup>
```vue Vue 2 icon="vuejs" theme={null}
import { Head } from '@inertiajs/vue2'
<Head>
<title>Home
```
```vue Vue 3 icon="vuejs" theme={null}
import { Head } from '@inertiajs/vue3'
Home
```
```jsx React icon="react" theme={null}
import { Head } from '@inertiajs/react'
Home
```
```js Svelte icon="s" theme={null}
// Not supported
```
## Nhiều instance Head
Bạn có thể có nhiều instance của component `` trong ứng dụng. Ví dụ, layout có thể thiết lập một số phần tử `` mặc định, sau đó từng trang riêng lẻ có thể ghi đè các giá trị mặc định đó.
```vue Vue 2 icon="vuejs" theme={null}
// Layout.vue
import { Head } from '@inertiajs/vue2'
My app
// About.vue
import { Head } from '@inertiajs/vue2'
About - My app
```
```vue Vue 3 icon="vuejs" theme={null}
// Layout.vue
import { Head } from '@inertiajs/vue3'
My app
// About.vue
import { Head } from '@inertiajs/vue3'
About - My app
```
```jsx React icon="react" theme={null}
// Layout.js
import { Head } from '@inertiajs/react'
My app
// About.js
import { Head } from '@inertiajs/react'
About - My app
```
```js Svelte icon="s" theme={null}
// Not supported
```
Inertia chỉ render duy nhất một thẻ ``; tuy nhiên, tất cả các thẻ khác sẽ được xếp chồng vì việc có nhiều instance của chúng là hợp lệ. Để tránh các thẻ trùng lặp trong `<head>`, bạn có thể dùng thuộc tính `head-key`, giúp đảm bảo mỗi thẻ chỉ được render một lần. Điều này được minh họa trong ví dụ trên với thẻ `<meta name="description">`.
Ví dụ code ở trên sẽ render HTML sau.
```html theme={null}
<head>
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<title>About - My app
```
## Mở rộng Head
Khi xây dựng ứng dụng thực tế, đôi khi việc tạo một head component tùy chỉnh mở rộng component `` của Inertia sẽ hữu ích. Đây là nơi bạn có thể thiết lập các giá trị mặc định dùng toàn ứng dụng, chẳng hạn tự động nối tên ứng dụng vào tiêu đề trang.
```vue Vue 2 icon="vuejs" theme={null}
```
```vue Vue 3 icon="vuejs" theme={null}
```
```jsx React icon="react" theme={null}
// AppHead.js
import { Head } from '@inertiajs/react'
const Site = ({ title, children }) => {
return (
{title ? `${title} - My App` : 'My App'}
{children}
)
}
export default Site
```
```js Svelte icon="s" theme={null}
// Not supported
```
Sau khi tạo component tùy chỉnh, bạn chỉ cần bắt đầu sử dụng component đó trong các trang của mình.
```vue Vue 2 icon="vuejs" theme={null}
import AppHead from './AppHead'
```
```vue Vue 3 icon="vuejs" theme={null}
import AppHead from './AppHead'
```
```jsx React icon="react" theme={null}
import AppHead from './AppHead'
```
```js Svelte icon="s" theme={null}
// Not supported
```
***
## Tài liệu chính thức
Bài dịch này được đối chiếu từ [tài liệu Inertia.js v1 chính thức](https://inertiajs.com/docs/v1/the-basics/title-and-meta). Nếu có khác biệt do phiên bản hoặc cập nhật mới, hãy ưu tiên tài liệu chính thức làm nguồn tham chiếu.