O componente <title> do navegador incorporado permite que você especifique o título do documento.

<title>Meu Blog</title>

Referência

<title>

Para especificar o título do documento, renderize o componente <title> de navegador incorporado. Você pode renderizar o <title> de qualquer componente, e o React sempre colocará o elemento DOM correspondente no head do documento.

<title>Meu Blog</title>

Veja mais exemplos abaixo.

Props

<title> suporta todas as props de elementos comuns.

  • children: <title> aceita apenas texto como um filho. Este texto se tornará o título do documento. Você também pode passar seus próprios componentes desde que eles renderizem apenas texto.

Comportamento de renderização especial

O React sempre colocará o elemento DOM correspondente ao componente <title> dentro do <head> do documento, independentemente de onde na árvore React ele for renderizado. O <head> é o único lugar válido para <title> existir dentro do DOM, mas é conveniente e mantém as coisas compostas se um componente representando uma página específica pode renderizar seu próprio <title>.

Há duas exceções a isso:

  • Se <title> estiver dentro de um componente <svg>, então não há comportamento especial, porque nesse contexto ele não representa o título do documento, mas sim uma anotação de acessibilidade para esse gráfico SVG.
  • Se o <title> tiver uma prop itemProp, não há comportamento especial, porque nesse caso ele não representa o título do documento, mas sim metadados sobre uma parte específica da página.

Pitfall

Renderize apenas um <title> por vez. Se mais de um componente renderizar uma tag <title> ao mesmo tempo, o React colocará todos esses títulos no head do documento. Quando isso acontece, o comportamento dos navegadores e mecanismos de busca fica indefinido.

Uso

Definir o título do documento

Renderize o componente <title> de qualquer componente com texto como seus filhos. O React colocará um nó DOM <title> no <head> do documento.

import ShowRenderedHTML from './ShowRenderedHTML.js';

export default function ContactUsPage() {
  return (
    <ShowRenderedHTML>
      <title>Meu Site: Fale Conosco</title>
      <h1>Fale Conosco</h1>
      <p>Envie um e-mail para support@example.com</p>
    </ShowRenderedHTML>
  );
}

Use variáveis no título

Os filhos do componente <title> devem ser uma única string de texto. (Ou um único número ou um único objeto com um método toString.) Pode não ser óbvio, mas usar chaves JSX assim:

<title>Página de resultados {pageNumber}</title> // 🔴 Problema: Isso não é uma única string

… na verdade, faz com que o componente <title> receba um array de dois elementos como seus filhos (a string "Página de resultados" e o valor de pageNumber). Isso causará um erro. Em vez disso, use a interpolação de string para passar ao <title> uma única string:

<title>{`Página de resultados ${pageNumber}`}</title>
Previous<style>
NextAPIs