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:
Here are a few examples of apps that should be optimized for search engines:
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.
Follow these dos and don’ts to optimize your app for search engines.
Do:
<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! "
/><a href="//www.myApp.com">Check out this page!</a><a rel="noreferrer" href="//www.site.com/">Check out this page!</a><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:
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:
<body> tag: Include visible content only – headings, lists, images, etc.<title> or <meta> tags in the <head> element: leave this data for the user to define.<script> tags or other dynamic/interactive content<a href="//www.site.com/product-page/green-hoodie"> Green Hoodie </a>//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>- 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.
App 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
//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>App 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
//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>App 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
//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>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:
For browsers like Edge, Firefox and Safari, check out this article.