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.
Copy
  • Use absolute, schemeless links and add the href attribute: This is the full URL without the protocol. For example:
Copy
  • 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.)
Copy
  • 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 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 to internal pages, and use absolute, schemeless links. For example:
Copy
  • For internal pages, include both the and : unlike the app’s main page, you should include tags in the element for internal pages:
  1. Add the title and description you already set in the app via the setPageMetaData SDK method.
  2. Add Open Graph tags for social media (title, type, URL and image).
Copy
  • 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

Copy

Static Endpoint

Copy

Page component examples

App HTML

Copy

SEO Endpoint

Copy

Internal page component examples

App HTML

Copy

SEO Endpoint

Copy

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.

Did this help?