SEO & metadata

If some or all of the pages in your application are publicly available (i.e. visible to unauthenticated users), you may want to take steps to control whether and how those pages appear in search engine results (such as Google or Bing). You may also want to use cookies to track user behavior and send data to Google Analytics.

You can control how your public pages appear in search results and track user behavior by:

• Using SEO and metadata profiles to add meta tags to views.
• Adding a robots.txt file for your site.
• Using CSS classes to trigger custom Google Analytics events.

SEO and metadata profiles

SEO (Search Engine Optimization) and metadata profiles allow you to define values for HTML meta tags. This includes adding a description and keywords for individual pages, customizing how previews of your site are displayed on social media, enabling Google Analytics, and instructing search engines not to include pages in search results.

You can create SEO and metadata profiles from your Studio: go to Platform > Search engine optimization. Create a separate profile for each piece of metadata. More information about the available meta tags and supported values is provided in the table below.

You can either apply an SEO and metadata profile to all pages (views) in your application, or you can apply specific profiles to individual views (such as your application homepage or all views for the Product casetype). To do this, open the casetype, select the view, and then click the edit icon to edit the view properties. Select the relevant profile from the SEO and Metadata list.

When you apply an SEO and metadata profile to a view, the relevant meta tags are added to the HTML head element of the rendered page. To check that profiles have been applied as expected, compile and deploy your changes, and then use your browser to view the source for the relevant page.

Metadata tag	Example	Explanation
Basic SEO settings:
Description		A short description of your application or the current page.
Keywords		A number of keywords that describe your page.
Robots	noindex, nofollow	Provide instructions to search engine crawlers. For a list of supported values, refer to this guide from Yoast.
Canonical	https://www.example.nl	The primary version of a page. Search engine crawlers use this information to avoid indexing duplicate pages (which can affect how the page ranks in search engine results). For example, if the same page is available from https\://www\.example.nl, https\://example.nl, and preview\.grexx.today, you can specify which of those is the canonical version so that only that version is indexed.
Google		For Google-specific options, refer to Google's list of supported meta tags
Google site verification		Site verification code for Google Search Console.
Adjust appearance on mobile displays:
Manifest		A web manifest json. This allows you to make your application behave more like an app on mobile phones. Users are asked if they want to save this application as an app on their home screen. When they then open the app, you have the option to indicate whether the app should open full screen, whether there should be a splash screen and, if so, which color and which icons. For more information, refer to the MDN documentation.
Theme color	#891232	Create more of an "app feel" by changing the color of the top bar. Supported on Chrome on Android. May also be supported on other browsers and platforms.
Tile Color (Microsoft)	#891232	Color of the tile as displayed on a Microsoft phone and Tiles in Windows.
Tile Image (Microsoft)		Icons displayed on a Microsoft phone and Tiles in Windows.
Icon		Image files that are used as application icons on a desktop (favicon) and on Android home screens. You can add these multiple times with different sizes.
Apple-touch-icon		Icons as shown on an iOS home screen. You can add these multiple times with different sizes.
Configure link previews on social media:		For more information about these options, refer to the Open Graph protocol and Facebook's developer documentation.
Facebook App ID		Your Facebook developer App ID.
OG - Type	website	Type of page: Choose website for "shared" content or article for blog post-like pages.
OG - Locale	nl_NL	Locale of the page
OG - Title		Title to display.
OG - Image	https://example.nl/logo.jpg	Image to display.
OG - Description		Short text to display.
OG - URL	https://grc-boxx.net/page/home	URL to link to.
OG - Site Name	Grexx Manager	Site name.
Track your application users:
Cookie consent		Generates a cookie wall for the selected type of cookies (analytical and/or third-party).
Google Analytics	UA-12345678-01	To use this option, you must also add a Cookie consent SEO and metadata profile for Analytical cookies and add a script-src entry to your application's content security policy (via My Grexx) for https://www.googletagmanager.com.
SiteImprove	1234567	To use this option, you must also add a Cookie consent SEO and metadata profile for Analytical cookies and add entries to your application's content security policy (via My Grexx) as follows: script-src for https://siteimproveanalytics.com and img-src for https://ssl.siteimprove.com.

Robots.txt file

The Robots Exclusion Protocol, Robots Exclusion Standard or robots.txt protocol provides guidelines to search engines about how to crawl your website. Although the protocol is respected by all major search engines, it should be noted that search engines may choose to ignore the robots.txt file or certain parts of it. As a result, the robots.txt file is just a set of guidelines rather than a mandate.

Each file defines the following:

• User agent: The search engine(s) that the guidelines are aimed at. Use * to address the guidelines to all search engines. You can also address guidelines to specific search engines, such as GoogleBot.
• Allow: Identify content that the user agent should crawl. Note that Allow is only supported by Googlebot and Bingbot, so generally Disallow rules are listed.
• Disallow: Identify content that should not be crawled by the user agent.

The default robots.txt configuration for Grexx Platform applications contains:

User-Agent: \*\
Disallow: \*\
Allow: /case/\*\
Allow: /home\
Allow: /page/\*

To view the contents of your application's robots.txt file, append robots.txt to the base URL (for example, https://my-application-dev.grexx.today/robots.txt). The default robots.txt file does not contain any potentially sensitive data.

You can make changes to your application's robots.txt file from the Advanced settings in My Grexx. For more information about configuring robots.txt, including additional keywords, refer to the MDN documentation and/or search-engine specific content such as Google's documentation.

Note:

robots.txt should not be used to prevent pages from appearing in search results. If you have applied the noindex meta tag to a view, do not also add the view to the Disallow list in your robots.txt file. For more information, refer to Google's documentation.

Google Analytics custom events

If you have enabled Google Analytics for your application, page_view events are sent by default. You can also trigger custom events from click events in forms or templates used to create template or tile widgets.

Add custom events to forms

You can trigger custom events by adding the following CSS classes to a form:

• grexx-analytics-open sends an analytics event (grexx_activity_open) when the form is opened.
• grexx-analytics-submit sends an analytics event (grexx_activity_submit) when the form is successfully submitted.
• grexx-analytics-action-ACTION (where you replace ACTION with the action/event you want) is triggered when the form is successfully sent. For example, grexx-analytics-action-add_to_cart or grexx-analytics-action-purchase.

All these events are labeled with the title of the activity.

Add custom events to templates

You can trigger a custom event when the template loads or when a button (or element) is clicked. You must add the grexx-analytics class to the object and set the data-analytics-type attribute to an existing or custom event.

<!-- Simple on view -->
<span class="grexx-analytics" data-analytics-type="read_item">Read this amazing story about a man in his....</span>

<!-- On click -->
<span class="btn btn-default grexx-analytics" 
   data-analytics-type="purchase"
   data-analytics-label="purchasing the whole cart"
   data-analytics-on="click"
>Order</span>

<!-- All options -->
<span class="btn btn-default grexx-analytics" 
   data-analytics-type="checkout_progress"
   data-analytics-value="2"
   data-analytics-label="purchasing the whole cart"
   data-analytics-on="view"
   data-analytics-category="ecommerce"
>Order</span>