MODX Guide for Optimisation & Monitoring tools

by Hayden Close ON Aug 08, 2019

Introduction

Completed the Basic course to MODX?Now learn how to optimise and monitor aspects of managing your website.

This includes optimising pages, Google Chrome Extensions and Debugging

This tutorial will give you the ability to optimise & monitor your current MODX website.

Enjoy, and remember…

If you ever need our help with something not included in this course or any others then please get in touch.

Optimising your pages and posts

How to edit SEO settings

1

Select the SEO tab at the top of your page.

2

Within the SEO tab you will be shown the findability option to begin with.

(index/noindex) - This option allows you to decide whether the page will be indexed/displayed by search engine results.

(follow/nofollow) - A follow link will allow search engines to flow through all the links within the page. The nofollow tag is basically a notice sign for search engines to not follow a page.

Internal search - This option allow you to remove the page from any search features your website contains.

3

Next are the 'Google Sitemap' options.

Google site map - This option includes this page on your sitemap, making it easier for Google to find and index it. Removing a page from the sitemap couldresult in Google not finding a page.

Priority - This informs search engines of how important the page is to your website. Higher being of greater priority. This helps prioritise your most important pages for Google's crawlers.

Update Frequency - This allows you to include a estimated update period for the page, so Google knows when to return to crawl the page.

4

The 301-redirect tab allow you to view, create and remove any 301 redirect you may currently have.

A 301-redirect will send the user/search engine, to the new URL. This allows you to change the URL of a page whilst minimising it's current search engine value.

By default MODX will automatically create a 301-redirect when you change a pages URL.

5

By default, URLs will start from the root of your site. Freeze URL's allow you to change the URL of the page to a more keyword friendly alternative.

Select the tick on the 'freeze URL for this page' and then enter your user-friendly URL.
Note: You do not need to re-enter the domain name.

How to edit social media cards

1

Start by selecting the 'Social Media' tab at the top of your page.

Note: Social media share cards will use the page title and description by default until the share cards have been updated.

2

Within the 'social share card' tab provide a social title and desicription.

3

Upload/Select an image which will accompany the title/description on the share card.

4

Select the save option once you have added all the details.

All social media's will use the 'social share card' settings.

5

Twitter can be selected on the left hand side to provide it with it's own settings, which will override social share settings for Twitter specifically.

Google Chrome Extensions

How to add Chrome Extensions

1

Firstly, go to the Chrome Web store and select extensions from the left hand menu or follow the link below.

(https://chrome.google.com/webstore/category/extensions?hl=en )

2

Search for the extension you wish to add using the search bar on the top left.
Once you have found the extension (in this example 'Lighthouse') select the 'add to chrome' option.

3

A pop up will appear asking for your permission to add the extension. Select the 'add extension' option when you are ready to install the extension to chrome.

4

Once the extension has been added it will appear in the top right hand corner of your Google Chrome.

5

Most extensions simply need to be selected to run.

Right clicking and extension will also allow you to view the setting of the selected icon further or remove it completely from your Chrome.

MODX Queeg

1

Queeg is a tiny extension that provides a one click access to MODX Resources from a website to it's manager.

Queeg can be downloaded at: https://chrome.google.com/webstore/detail/modx-queeg/pchmcecidlmiajanecgkibndaoabncke

2

Add the Queeg extension to your Chrome, through the Chrome Web Store.

*Please refer back to the 'How to add Chrome Extensions' course if you are unsure how to do this.

3

The Queeg icon will be displyed in the top right hand corner of Google Chrome. This icon will show the page ID you are currenly view and if you have access to the page.

4

Selecting the Queeg icon will take you directly to the currently viewed pages MODX resources manager.

* if you are not logged into MODX, you'll need to log-in to Queeg. Afterwards, Queeg will automatically log-in and display the resources manager page.

5

Queeg's default setting if you are not logged in is to view the URL's /manager path.

To change this right click the Queeg icon, within Chrome and select 'options'.

6

The Queeg options will open within a new tab.

From here firstly enter the sites URL in the first box. Then enter the path of your sites login path.

For this example, we have change the path Queeg will use to yourdomain.com/webmaster as opposed to the default setting of https://yourdomain.com/manager.

AMP Validator

1

AMP Validator automatically checks each page for AMP validation.

The AMP Validator will check the current page to see if it is an AMP page and then run it through the AMP validator and report if the page passes (green) or fails (red) via the extension icon.

AMP Validator can be downloaded at: https://chrome.google.com/webstore/detail/amp-validator/nmoffdblmcmgeicmolmhobpoocbbmknc

2

If the current page is not an AMP page and one is available via <link rel="amphtml" href="..."> the extension icon turns blue and clicking it will load the AMP version of that page.

3

A green AMP-Validator icon will indicate that the page has passed the Amp Validation test.

4

This example shows a red AMP validator icon, which indicates that the page has failed the AMP test. Selecting the Extension will provide further information.

Select Debug to view the issue within the AMP Validator Extension.

5

Selecting Debug will provide you with the reason why the page has failed the Validation test and the location of the issue.

*In this example the target attribute does not specify a window or a frame where the linked document is loaded.

If you encounter an error you don't know how to fix, get in touch and we will help as part of your management package, or quote to do so.

Lighthouse

1

Lighthouse is an open-source, automated tool for improving the performance, quality, and correctness of your website.

When auditing a page, Lighthouse runs a series of tests against the page, and then generates a report on how well the page did.

This report works best in incognito mode, as your browser extensions may cause poorer performance.

From here you can use the failing tests as indicators on what you can do to improve.

Lighthouse can be downloaded at: https://chrome.google.com/webstore/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk

2

To start generating a report using Lighthouse:

Click on the Lighthouse log within Chrome whilst on the homepage of the website you wish to test.

3

Select the 'option' button to choose the categories you want to check.

4

Once Lighthouse has completed it's test, it will open the report within a new tab for you to view.

Select any areas you want to view for further information on how to improve the category, if needed.

Debugging

How to clear the cache

1

Once you have logged in:

Select the 'Manage' Tab at the top of the page.

2

Cached data is information which comes from a website or an app that is stored on your computer, smartphone and tablet.

This data is stored on your machine, so that the next time you go to use it, it’ll already be available. This simply provides quicker load times.

3

From the drop down list, select 'Clear Cache'.

4

Clearing the cache will remove any saved files, images, scripts and other media files stored on your devices by the website or app.

This forces the device to re-request this information when you view a page for the first time. Which could display the latest information on the page e.g, an image which has recently changed.

Quick Enquiry