> Portal Navigation:
> 
> - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version.
> - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages).
> - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`).
> - Top-level index of all portals: https://dev.wix.com/docs/llms.txt
> - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt

## Resource: Optimize for SEO (iframe)

## Article: Optimize for SEO (iframe)

## Article Link: https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/self-hosting/supported-extensions/deprecated/iframe/optimize-for-seo-iframe.md

## Article Content:

# Optimize Your App for SEO (iframe)

Does your website component have text or other content that’s meaningful for SEO? Optimize your app for search engine crawlers, to improve SEO for your users.

There are two main steps to optimize your app:

1.  **Optimize the app itself in the live site:** as search engines like Google can crawl JavaScript, make sure the app itself is fully optimized for SEO.
2.  **Develop an SEO endpoint:** as not all search engines crawl JavaScript, we’ll call your SEO endpoint when a search engine requests the SEO version of your app

Here are a few examples of apps that **should be optimized** for search engines:

*   FAQ widgets
*   News ticker widgets
*   Testimonial widgets

If there’s no content in your widget that’s meaningful for SEO, don’t develop an SEO endpoint – we’ll render your widget as an iframe. For example, apps like chat widgets, form builders, and social media buttons don’t need an SEO endpoint.

### Optimize your app in the live site

Follow these dos and don’ts to optimize your app for search engines.

**Do**:

*   **Add alt text and src to images**: That way, these attributes are easily readable in the DOM.

```html
<img src="images/optimize-for-seo-md_build-apps-portal_develop-your-app_frameworks_self-hosting_supported-self-hosted-extensions_site-extensions_iframes_myappimage.png" alt="This is an image of my app! ">
```

*   **Use absolute, schemeless links and add the href attribute**: This is the full URL _without_ the protocol. For example:

```html
<a href="//www.myApp.com">Check out this page!</a>
```

*   **Add rel=”noreferrer” for links to other site pages**: Have links that go to other pages in the user’s site, like the homepage? Set the rel attribute value to “noreferrer” for links that go to these pages – **excluding** links to your app’s internal pages. (This ensures that users don’t see your app’s iframe URL as a referrer in Google Analytics.)

```html
<a rel="noreferrer" href="//www.site.com/">Check out this page!</a>
```

*   **Manage internal pages in your app the right way:**

1.  Use deep linking to link to internal pages.
2.  Return a 404 error for deleted internal pages.
3.  Set a title and description for internal pages using the [setPageMetaData](https://dev.wix.com/docs/client/api-reference/deprecated/iframe-sdk-deprecated/wix.md#setpagemetadata) SDK method. These values must match what’s in your SEO endpoint.

*   **Title:** insert the name of the internal page into the page title. For example, the page name in an eCommerce app would be the name of the product, e.g., ‘Green Hoodie’.
*   **Description:** we recommend using the first 160 characters from the page content, or allowing users to customize the description.
*   **Use ```<h1>``` only for internal pages:** for the app’s main page, **don’t** use ```<h1>```. Use ```<h2>```, ```<h3>```, and so on, according to your app’s hierarchy.

**Don’t**:

*   **Add a noindex meta tag:** Google can crawl JavaScript, so don’t block search engines from crawling JavaScript in your app’s iframe.
*   **In the robots.txt file, don’t block anything that’s needed for the page to load:** contact us if you think something should be blocked.

### Develop an SEO Endpoint

Create a separate HTML file for the SEO endpoint. Your SEO endpoint should be an “HTML snapshot” – a  stripped down version of your app that has all the static HTML content visible on the user’s site, and none of the JavaScript or dynamic functionality.

Here are some important things to keep in mind when creating your SEO endpoint:

*   **For your app’s main page, only include the `<body>` tag:** Include visible content only – headings, lists, images, etc.
*   **Don't include `<title>` or `<meta>` tags in the `<head>` element:** leave this data for the user to define.
*   **Don't include `<script>` tags or other dynamic/interactive content**
*   **Make sure the elements match the app itself.** For example, the heading structure, alt text for images, etc.
*   **Link to your app’s internal pages:** [deep link](https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/self-hosting/supported-extensions/site-extensions/deprecated/iframe/deep-linking-for-iframe-page-extensions.md) to internal pages, and use absolute, schemeless links. For example:

```html
<a href="//www.site.com/product-page/green-hoodie"> Green Hoodie </a>
```

*   **For internal pages, include both the <head> and <body>:** unlike the app’s main page, you should include <meta> tags in the <head> element for internal pages:

1.  Add the title and description you already set in the app via the [setPageMetaData](https://dev.wix.com/docs/client/api-reference/deprecated/iframe-sdk-deprecated/wix.md#setpagemetadata) SDK method.
2.  Add [Open Graph tags](https://ogp.me/) for social media (title, type, URL and image).

```html
 //Example of an internal product page in an eComm app
<head>  
<title> Page/Product Name</title>  
<meta name="description" content="Page/Product Description">  
<meta property="og:title" content="Page/Product Name" />  
<meta property="og:type" content="website" />  
<meta property="og:url" content="//www.site.com/product1/" />  
<meta property="og:image" content="//www.site.com/product1/myProduct.png"/>
</head>
```

*   **Don’t display content in the SEO endpoint that isn’t visible in the app:** search engines consider this to be bad practice, since it’s usually done to manipulate SEO ranking. Search engines detect this, and may remove suspect pages or the entire site from their index. E.g., if your app doesn’t include marketing text like “powered by MyCompany” – then don’t include it in the SEO version.
*   **Support SEO in other languages:** after you render the HTML for your SEO view, include an additional header in your HTTP response: Content-Type: “text/html;charset=UTF-8”.
*   **Make sure your endpoint is up, publicly accessible, up-to-date, and fast:**

\- Define a publicly accessible URL (don’t use a localhost hostname).

\- Keep the error rate low – otherwise, we’ll turn off your SEO endpoint.

\- Update the content dynamically so that it reflects the current content in the app.

\- Load the endpoint within 4 seconds.

### SEO Endpoint examples

#### Widget component examples

**App HTML**

```html
//App HTML includes JS 
<html>
<body>
<h1>JavaScript Loops</h1>
<p id="demo"></p>
 
<script>
var cars = ["BMW", "Volvo", "Saab", "Ford", "Fiat", "Audi"];
var text = "";
var i;
for (i = 0; i < cars.length; i++) {
text += cars[i] + "<br>";
}
document.getElementById("demo").innerHTML = text;
</script>
 
</body>
</html>
```

**Static Endpoint**

```html
//Static HTML code that displays the visible content
<body>
<p id="demo">
BMW<br>
Volvo<br>
Saab<br>
Ford<br>
Fiat<br>
Audi<br>
</p>
</body>
```

#### Page component examples

**App HTML**

```html
//App HTML page includes JS 
<html>
<body>
<h2>HEADING</h2>
<p id="divid"></p>
 
<script>
var car_name = ["Mazda", "Volvo", "Nissan", "Ford", "Skoda", "Audi"];
var string = "";
var i;
for (i = 0; i < car_name.length; i++) {
string += car_name[i] + "<br>";
}
document.getElementById("divid").innerHTML = string;
</script>
 
</body>
</html>
```

**SEO Endpoint**

```html
//Static HTML code that displays the visible content
<body>
<h2>HEADING</h2>
<p id="divid">
Mazda<br>
Volvo<br>
Nissan<br>
Ford<br>
Skoda<br>
Audi<br>
</p>
</body>
```

#### Internal page component examples

**App HTML**

```html
//App HTML page includes JS
<html>
<head>
<title>INTERNAL PAGE TITLE </title>
<meta name="description" content="INTERNAL PAGE DESCRIPTION"/>
</head>
<body>
<h2>HEADING</h2>
<p id="divid"></p>
 
<script>
var car_name = ["Mazda", "Volvo", "Nissan", "Ford", "Skoda", "Audi"];
var string = "";
var i;
for (i = 0; i < car_name.length; i++) {
string += car_name[i] + "<br>";
}
document.getElementById("divid").innerHTML = string;
</script>
 
</body>
</html>
```

**SEO Endpoint**

```html
//Static HTML code that displays the visible content
<html>
<body>
<head>
<title>INTERNAL PAGE TITLE </title>
<meta name="description" content="INTERNAL PAGE DESCRIPTION"/>
</head>
 
<h2>HEADING</h2>
<p id="divid">
Mazda<br>
Volvo<br>
Nissan<br>
Ford<br>
Skoda<br>
Audi<br>
</p>
 
</body>
</html>
```

### Check your app’s SEO view

You can see what your app looks like to a search engine crawler – whether or not you developed a dedicated SEO endpoint by accessing the site / page with a Googlebot.

 Here’s how to do it in Google Chrome:

*   Right click anywhere on your page and click **Inspect**.
*   Click **Menu** in the top right > **More tools** > **Network conditions**
*   Under '**User agent**' uncheck '**Use browser default**'
*   Select a Googlebot from the dropdown or paste one into the **Custom field**

For browsers like Edge, Firefox and Safari, check out [this article](https://www.searchenginejournal.com/change-user-agent/368448/).