Webflow Designer API: Open Graph

`page.usesTitleAsOpenGraphTitle()`

Checks if the page uses the page title as the Open Graph title.

Syntax

1 page.usesTitleAsOpenGraphTitle(): Promise<boolean>

Returns

Promise<boolean>

A Promise that resolves to a boolean value.

Example

TypeScript

1 // Get Current Page
2 const currentPage = await webflow.getCurrentPage() as Page
3 
4 // Check if page is using the Title as the Open Graph title
5 const isOpenGraphTitle = await currentPage.usesTitleAsOpenGraphTitle()
6 
7 // Print results
8 if (isOpenGraphTitle) {
9 
10   console.log('Page uses Title as Open Graph Title')
11 } else {
12   console.log('This page has a custom Open Graph Title')
13 }

Designer Ability

Designer Ability	Locale	Branch	Workflow	Sitemode
canReadPageSettings	Any	Any	Any	Any

`page.useTitleAsOpenGraphTitle(use)`

Indicate whether the page should use its title as the Open Graph (OG) title.

Syntax

1 page.useTitleAsOpenGraphTitle(use: boolean): Promise<null>

Parameters

use: boolean - Set to true to use the page title as the OG title, false otherwise.

Returns

Promise<null>

A Promise that returns to null

Example

TypeScript

1 // Get Current Page
2 const currentPage = await webflow.getCurrentPage() as Page
3 
4 // Set page title as open graph title
5 await currentPage.useTitleAsOpenGraphTitle(true)
6 const title = await currentPage.getOpenGraphTitle()
7 console.log(title)

Designer Ability

Designer Ability	Locale	Branch	Workflow	Sitemode
canManagePageSettings	Any	Any	Any	Any

`page.getOpenGraphTitle()`

Retrieves the Open Graph title of the page.

Syntax

1 page.getOpenGraphTitle(): Promise<string>

Returns

Promise<string>

A Promise that resolves to a string with the Open Graph title of the page.

Example

TypeScript

1 // Get Current Page
2 const currentPage = await webflow.getCurrentPage() as Page
3 
4 // Get Open Graph Title
5 const openGraphTitle = await currentPage.getOpenGraphTitle()
6 console.log("Open Graph Title", openGraphTitle)

Designer Ability

Designer Ability	Locale	Branch	Workflow	Sitemode
canReadPageSettings	Any	Any	Any	Any

`page.setOpenGraphTitle(title)`

Sets the Open Graph (OG) title of the page to the provided value.

Syntax

1 page.setOpenGraphTitle(title: string): Promise<null>

Parameters

title: string - The new OG title to set for the page.

Returns

Promise<null>

A Promise that returns to null.

Example

TypeScript

1 // Get Current Page
2 const currentPage = await webflow.getCurrentPage() as Page
3 
4 // Set Open Graph Title
5 await currentPage.setOpenGraphTitle("My New Title")
6 
7 // Print results
8 const openGraphTitle = await currentPage.getOpenGraphTitle()
9 console.log("Open Graph Title", openGraphTitle)

Designer Ability

Designer Ability	Locale	Branch	Workflow	Sitemode
canManagePageSettings	Any	Any	Any	Any

`page.usesDescriptionAsOpenGraphDescription()`

Checks if the page uses its description as the Open Graph description.

Syntax

1 page.usesDescriptionAsOpenGraphDescription(): Promise<boolean>

Returns

Promise<boolean>

A Promise that resolves to a boolean value.

Example

TypeScript

1 // Get Current Page
2 const currentPage = await webflow.getCurrentPage() as Page
3 
4 // Check page status
5 const isOpenGraphDescription = await currentPage.usesDescriptionAsOpenGraphDescription()
6 
7 // Print page status
8 if (isOpenGraphDescription) {
9 
10   console.log('Page uses Page Description as Open Graph Description')
11 } else {
12   console.log('This page has a custom Open Graph Description')
13 }

Designer Ability

Designer Ability	Locale	Branch	Workflow	Sitemode
canReadPageSettings	Any	Any	Any	Any

`page.useDescriptionAsOgDescription(use)`

Indicate whether the page should use its description as the Open Graph description.

Syntax

1 page.useDescriptionAsOgDescription(use: boolean): Promise<null>

Parameters

use: boolean - Set to true to use the page description as the OG description, false otherwise.

Returns

Promise<null>

A Promise that resolves to null when the Open Graph description is set.

Example

TypeScript

1 // Get Current Page
2 const currentPage = await webflow.getCurrentPage() as Page
3 
4 // Set page description open graph description
5 await currentPage.useDescriptionAsOpenGraphDescription(true)
6 const description = await currentPage.getOpenGraphDescription()
7 console.log(description)

Designer Ability

Designer Ability	Locale	Branch	Workflow	Sitemode
canManagePageSettings	Any	Any	Any	Any

`page.getOpenGraphDescription()`

Retrieves the Open Graph description of the page.

Syntax

1 page.getOpenGraphDescription(): Promise<string>

Returns

Promise<string>

A Promise that resolves to a string value of the Open Graph description.

Example

TypeScript

1 // Get Current Page
2 const currentPage = await webflow.getCurrentPage() as Page
3 
4 // Get Open Graph Description
5 const openGraphDescription = await currentPage.getOpenGraphDescription()
6 console.log("Open Graph Description", openGraphDescription)

Designer Ability

Designer Ability	Locale	Branch	Workflow	Sitemode
canReadPageSettings	Any	Any	Any	Any

`page.setOpenGraphDescription(description)`

Sets the page’s Open Graph description to the provided value.

Syntax

1 page.setOpenGraphDescription(description: string): Promise<null>

Parameters

description: string - The new OG description to set for the page.

Returns

Promise<null>

A Promise that resolves to null when the Open Graph description is set.

Example

TypeScript

1 // Get Current Page
2 const currentPage = await webflow.getCurrentPage() as Page
3 
4 // Set Open Graph Description
5 await currentPage.setOpenGraphDescription(description)
6 
7 // Print results
8 const openGraphDescription = await currentPage.getOpenGraphDescription()
9 console.log("Open Graph Description", openGraphDescription)

Designer Ability

Designer Ability	Locale	Branch	Workflow	Sitemode
canManagePageSettings	Any	Any	Any	Any

`page.getOpenGraphImage()`

Retrieves the URL of the Open Graph image associated with the page.

Syntax

1 page.getOpenGraphImage(): Promise<string>

Returns

Promise<string>

A Promise that resolves to a string with the URL of the Open Graph image.

Example

TypeScript

1 // Get Current Page
2 const currentPage = await webflow.getCurrentPage() as Page
3 
4 //  Get Open Graph image and Print Details
5 const openGraphImage = await currentPage.getOpenGraphImage()
6 console.log(openGraphImage)

Designer Ability

Designer Ability	Locale	Branch	Workflow	Sitemode
canReadPageSettings	Any	Any	Any	Any

`page.setOpenGraphImage(url)`

Sets the URL of the Open Graph image associated with the page.

Syntax

1 page.setOpenGraphImage(url: string): Promise<null>

Parameters

url: string - The new URL of the Open Graph image to set for the page.

Returns

Promise<null>

A Promise that resolves to null when the Open Graph image is set.

Example

TypeScript

1 // Get Current Page
2 const currentPage = await webflow.getCurrentPage() as Page
3 
4 //  Set open graph image and print details
5 await currentPage.setOpenGraphImage("example.com/image.jpg")
6 const openGraphImage = currentPage.getOpenGraphImage()
7 console.log(openGraphImage)

Designer Ability

Designer Ability	Locale	Branch	Workflow	Sitemode
canManagePageSettings	Any	Any	Any	Any

1	// Get Current Page
2	const currentPage = await webflow.getCurrentPage() as Page
3
4	// Check if page is using the Title as the Open Graph title
5	const isOpenGraphTitle = await currentPage.usesTitleAsOpenGraphTitle()
6
7	// Print results
8	if (isOpenGraphTitle) {
9
10	console.log('Page uses Title as Open Graph Title')
11	} else {
12	console.log('This page has a custom Open Graph Title')
13	}

1	// Get Current Page
2	const currentPage = await webflow.getCurrentPage() as Page
3
4	// Set page title as open graph title
5	await currentPage.useTitleAsOpenGraphTitle(true)
6	const title = await currentPage.getOpenGraphTitle()
7	console.log(title)

1	// Get Current Page
2	const currentPage = await webflow.getCurrentPage() as Page
3
4	// Get Open Graph Title
5	const openGraphTitle = await currentPage.getOpenGraphTitle()
6	console.log("Open Graph Title", openGraphTitle)

1	// Get Current Page
2	const currentPage = await webflow.getCurrentPage() as Page
3
4	// Set Open Graph Title
5	await currentPage.setOpenGraphTitle("My New Title")
6
7	// Print results
8	const openGraphTitle = await currentPage.getOpenGraphTitle()
9	console.log("Open Graph Title", openGraphTitle)

1	// Get Current Page
2	const currentPage = await webflow.getCurrentPage() as Page
3
4	// Check page status
5	const isOpenGraphDescription = await currentPage.usesDescriptionAsOpenGraphDescription()
6
7	// Print page status
8	if (isOpenGraphDescription) {
9
10	console.log('Page uses Page Description as Open Graph Description')
11	} else {
12	console.log('This page has a custom Open Graph Description')
13	}

1	// Get Current Page
2	const currentPage = await webflow.getCurrentPage() as Page
3
4	// Set page description open graph description
5	await currentPage.useDescriptionAsOpenGraphDescription(true)
6	const description = await currentPage.getOpenGraphDescription()
7	console.log(description)

1	// Get Current Page
2	const currentPage = await webflow.getCurrentPage() as Page
3
4	// Get Open Graph Description
5	const openGraphDescription = await currentPage.getOpenGraphDescription()
6	console.log("Open Graph Description", openGraphDescription)

1	// Get Current Page
2	const currentPage = await webflow.getCurrentPage() as Page
3
4	// Set Open Graph Description
5	await currentPage.setOpenGraphDescription(description)
6
7	// Print results
8	const openGraphDescription = await currentPage.getOpenGraphDescription()
9	console.log("Open Graph Description", openGraphDescription)

1	// Get Current Page
2	const currentPage = await webflow.getCurrentPage() as Page
3
4	// Get Open Graph image and Print Details
5	const openGraphImage = await currentPage.getOpenGraphImage()
6	console.log(openGraphImage)

1	// Get Current Page
2	const currentPage = await webflow.getCurrentPage() as Page
3
4	// Set open graph image and print details
5	await currentPage.setOpenGraphImage("example.com/image.jpg")
6	const openGraphImage = currentPage.getOpenGraphImage()
7	console.log(openGraphImage)