`ftd.document` is a kernel component that provides root-level configuration to the document. In addition to the usual document attributes like title, theme-color, etc., it includes a range of SEO-related attributes that enhance the accessibility of your page. This element can only appear once in the document and must be at the root level, which means it cannot be a child of any container components.

Usage

-- ftd.document: My Title
description: My Description
og-image: https://www.fifthtry.com/assets/images/logo-fifthtry.svg

<other elements>

-- end: ftd.document

Lang:

ftd

In the above example, `ftd.document` sets the title of the document to "My Title". The description attribute provides a brief description of the content of the page, and `og-image` specifies the image that should be displayed when the page is shared on social media.

Rules for Using `ftd.document`

When using `ftd.document` in the ftd, it is essential to follow certain rules to ensure that the document is structured correctly and functions as intended.

Rule 1: `ftd.document` Cannot Be a Child Component

`ftd.document` cannot be a child of any container components. It must be at the root level of the document, meaning it cannot be nested within any other component, including `ftd.column`, `ftd.row`, or any other container components. Attempting to use ftd.document as a child component will result in an error.

Input

-- ftd.column:

-- ftd.document:
-- end: ftd.document

-- end: ftd.column

Lang:

ftd

Output

FTDExecError(ParseError { message: "ftd.document can occur only once and must be the root", doc_id: "", line_number: })

Rule 2: `ftd.document` Can Only Occur Once

`ftd.document` can only occur once in the document. Attempting to use it more than once will result in an error. This is because `ftd.document` is the root-level configuration of the document, and having multiple root-level configurations can cause conflicts and inconsistencies.

Input

-- ftd.document:
-- end: ftd.document

-- ftd.document:
-- end: ftd.document

Lang:

ftd

Output

FTDExecError(ParseError { message: "ftd.document can occur only once and must be the root", doc_id: "", line_number: })

Rule 3: `ftd.document` Cannot Have Any Sibling

`ftd.document`element cannot have any siblings. This means that the `ftd.document` element must be the only root-level element in the document and cannot have any other elements at the same level.

Input

-- ftd.document:
-- end: ftd.document

-- ftd.text: Hello World!

Lang:

ftd

Output

FTDExecError(ParseError { message: "ftd.document can't have siblings.", doc_id: "", line_number: })

Attributes

`ftd.document` accepts the below attributes as well all the [container root attributes](/ftd/container-root-attributes/).

`title`

Type: : `optional` [`caption`](/built-in-types/#caption) The `title` attribute specifies the title of the document. It is displayed in the browser's title bar or tab. The content within the title tag is crucial for both user experience and search engine optimization (SEO) purposes.

Example of using title

-- ftd.document: My title

;; or

-- ftd.document:
title: My title

Lang:

ftd

`og-title: optional string`

The `og-title` attribute provides the title of a webpage for social media platforms and other websites when the webpage is shared or linked. The og in `og-title` stands for Open Graph, which is a protocol that allows webpages to become rich objects in social media platforms. **This attribute takes default value same as `title` attribute value, if not provided explicitly**

Example of using `og-title`

-- ftd.document:
og-title: My Page Title

Lang:

ftd

`twitter-title: optional string`

The `twitter-title` attribute provides the title of a webpage for Twitter cards. When a webpage is shared on Twitter, the `twitter-title` attribute is used to display the title of the webpage in the Twitter card preview. ** This attribute takes default value same as `title` attribute value, if not provided explicitly**

Example of using twitter-title

-- ftd.document:
twitter-title: My Page Twitter Title

Lang:

ftd

`description: optional body`

The `description` attribute specifies a brief summary or description of the content of a page. The description is typically displayed in search engine results as a preview snippet or as the description text below the page title.

Example of using description

-- ftd.document:
description: This is a brief description of my webpage.

;; or

-- ftd.document:

This is a brief description of my webpage.

Lang:

ftd

`og-description: optional string`

The `og-description` attribute provides a brief description of a webpage for Open Graph protocol. The Open Graph protocol is used by social media platforms, like Facebook and LinkedIn, to display a preview of a webpage when it is shared. ** This attribute takes default value same as `description` attribute value, if not provided explicitly**

Example of using og-description

-- ftd.document:
og-description: This is the description of my webpage for Open Graph protocol.

Lang:

ftd

`twitter-description: optional string`

The `twitter-description` attribute provides a brief description of a webpage for Twitter Cards. Twitter Cards are used by Twitter to display a preview of a webpage when it is shared. ** This attribute takes default value same as `description` attribute value, if not provided explicitly**

Example of using twitter-description

-- ftd.document:
twitter-title: My Page Twitter Title

Lang:

ftd

`breakpoint: optional ftd.breakpoint-width-data`

This attribute specifies the breakpoint width below which the device would be considered mobile otherwise desktop. It takes value of type [`ftd.breakpoint-width-data`](ftd/built-in-types/#ftd-breakpoint-width-data) and is optional. If not specified, then the default breakpoint will be used which is `768px`.

Sample usage of breakpoint

-- ftd.document:
title: My page title
breakpoint: 800

Lang:

ftd

`favicon: optional ftd.raw-image-src`

This attribute defines the favicon used on the document. In the scenario, where you want to use different favicons for different pages, defining this attribute will let you define it for individual pages. **Note:** This value will overwrite the favicon defined at the package level inside `FASTN.ftd`

Sample usage of favicon

-- ftd.document:
title: My page title
favicon: $assets.files.doc-icon.svg.light

Lang:

ftd

Support `fastn`!

Enjoying `fastn`? Please consider giving us a star ⭐️ on [GitHub](https://github.com/fastn-stack/fastn) to show your support!

[⭐️](https://github.com/fastn-stack/fastn)

Getting Help

Have a question or need help? Visit our [GitHub Q&A discussion](https://github.com/fastn-stack/fastn/discussions/categories/q-a) to get answers and subscribe to it to stay tuned. Join our [Discord](https://discord.gg/a7eBUeutWD) channel and share your thoughts, suggestion, question etc. Connect with our [community](/community/)!

[💻️](/community/)

Found an issue?

If you find some issue, please visit our [GitHub issues](https://github.com/fastn-stack/fastn/issues) to tell us about it.

Quick links:

- [Install `fastn`](install/) - [Create `fastn` package](create-fastn-package/) - [Expander Crash Course](expander/) - [Syntax Highlighting in Sublime Text](/sublime/)

Join us

We welcome you to join our [Discord](https://discord.gg/a7eBUeutWD) community today. We are trying to create the language for human beings and we do not believe it would be possible without your support. We would love to hear from you.