seoMarkup

Sets or gets the SEO markup to be rendered for search engine bots.

Description

Use the seoMarkup property to write HTML content that will be served to Google and other search engines. This is necessary because some bots cannot process the JavaScript content of the custom element.

If you do not add the equivalent HTML of the custom element's implementation using this SEO markup property, only bots that index JavaScript, such as Google, will be able to index the custom element's content/markup for search engine results.

Note: It is the user's responsibility to handle all aspects of SEO for the element, including managing the validity of the SEO markup opposite search engines.

Type:

stringRead & Write

Was this helpful?

Set SEO markup for the custom element

Copy Code

1// **********************************************
2// Custom Element Code in Velo 
3// **********************************************
4
5// Set the HTML content for SEO markup 
6// to be used by search engines.
7// Make sure the SEO markup matches the 
8// contents of the custom
9// element exactly so as not to mislead 
10// web crawlers.
11
12$w('#myCustomElement').seoMarkup = 'Hello World!';
13
14
15// **********************************************
16// Custom Element Implementation on an HTML Page
17// **********************************************
18
19class MyElement extends HTMLElement {
20  connectedCallback() {
21    this.innerHTML = 'Hello World!'
22  }
23}
24customElements.define('my-custom-element', MyElement);
25
26
27// ***************************************************************
28// Custom Element's Result (both for SEO bots and non-SEO traffic)
29// ***************************************************************
30<my-custom-element>Hello World!</my-custom-element>