Apply SEO best practices

This guide describes how you can implement SEO best practices in Appfarm. It is not a general guide to SEO. If you are looking for a grounding in SEO, see this guide from Ahrefs.

For an app to be accessible by search engines and the broader public it must be available with unauthenticated access.

The following topics are addressed in the guide:

• Set the title tag for each view

• Set a meta description for each view

• Set a canonical URL for each view (only if you have a custom domain)

• Optimize internal linking

• Optimize images

• Inform search engines

As Google is the biggest referrer of search traffic links are provided to Google search documentation for more information, where relevant.

Canonical URLs

If you have added a custom domain to your solution your app can be accessed using two hostnames; your custom domain and the default [solution].appfarm.app URL. Set a canonical URL for each view in your app using your custom domain to send a strong signal to Google that this is the URL that should be shown in search results.

Further reading: What is URL canonicalization?

Use On App Load to inject HTML tags

Typically you’ll want to set a meta description and potentially a canonical URL per page (view). These tags need to be added into the app’s HTML. Use the On App Load event handler to trigger an action and use the Run Code action node to inject the tags. Example code is provided below. You can then use the On View Load event handler to update them.

Example code

// Create and append empty meta description
const metaTag = document.createElement("meta");
metaTag.name = "description";
document.head.appendChild(metaTag);

// Create and append empty canonical URL
const linkTag = document.createElement("link");
linkTag.rel = "canonical";
document.head.appendChild(linkTag);

resolve();

Use On View Load to update HTML tags

To set unique content in the HTML tags for each view, use the On View Load event handler to trigger an action. You can use the same action for each view and use logic to insert the appropriate content for that view.

To set a page’s <title> tag, update the built-in App Variable Document Title.

To update the meta description and canonical URL tags, use the Run Code action node. Example code is provided below.

Example code

// Update the meta description
let metaDescription = document.querySelector('meta[name="description"]');
metaDescription["content"] = "Enter your meta description for this view";

// Update the canonical URL
const path = window.location.pathname;
let canonicalUrl = document.querySelector('link[rel="canonical"]');
canonicalUrl["href"] = `https://your.customdomain.com${path}`;

resolve();

By using On View Load to trigger updates to the HTML tags, you ensure that they are updated whether a user (or Google Crawler) arrives at a page directly or by navigating inside the app.

Further reading: Best practices for title tags, Best practices for creating quality meta descriptions

Optimize internal linking

When you use the Navigate action node to navigate to the default view, select the Navigate to Root checkbox.

By navigating to the root when the default view is to be loaded, the URL path for that view will always be the app root. If you instead use the View property to select the view, the view’s URL Path Key is added to the URL and this results in two different URLs displaying the same content.

Restricting it to the root means that search engines (and users) will only see and share one URL for that content, focusing the search ranking on one primary URL.

Optimize images

If you have an image-heavy page, consider using the Lazy Load Image and Responsive Image properties on the the Image UI component. These improve page performance which is a search ranking factor.

Additionally, you should use descriptive file names for your images and include descriptive alt text.

Further reading: Google image SEO best practices

Inform search engines

The easiest way to inform search engines about your app is ask them to crawl the URLs. For example, you can ask Google to crawl your URLs using Google Search Console.

If you need to verify ownership of the property in Google Search Console, you can select the HTML tag method and add the provided meta tag as a custom header tag in the Production environment.

Another way to inform search engines is to submit a sitemap, but depending on the nature of your app you may not need a sitemap. In Google’s documentation on sitemaps they state that you might not need a sitemap if:

• Your site is small (Google classifies a site with 500 pages or fewer as small)

• Your site is comprehensively linked internally

• You don't have many media files (video, image) or news pages that you want to show in search results

If you determine that you require a sitemap, you can generate an XML sitemap and add it as a .well-known directory entry in the Production environment. You must then submit it directly within Google Search Console.