RankSense allows users to easily change any part of a webpage’s HTML instead of manually making code changes. You can achieve this by creating a content rules sheet for your website.
If you want to modify your website’s content, you can use the content rules feature to do it. This feature will help reduce the development cost for the site as well as the effort needed on your end to make the changes.
It is a compelling feature that enables you to make an almost infinite amount of changes to your site’s pages. It is a 4 step procedure that includes creating a content rules sheet, mapping the HTML DOM elements you wish to modify to the rules sheet, uploading the sheet to the RankSense app, and finally publishing the changes directly on your website.
Let’s start by creating a content rules sheet. While going through these steps, we will create a rule to show the abilities of this feature. For our example, we will be replacing the visible “site description” of a page on our demo site.
Steps to create a content rules sheet -
The content rules sheet should contain four columns -
1. URL -
This column should contain the URL of the webpage where you want your HTML changes to take place—for example, https://ludwigmodel.dev/index.php/sample-page/.
If you want to make a content change on a specific page of your site, just copy the URL from the address bar on your browser and paste it directly into the column.
2. CSS Selector -
To fill this column, you have to right-click on a UI element on the page. After right-clicking on the element, you wish to modify, such as an image or block of text, select ‘Inspect Element’ from the options provided. You will see the Developer Tools dialog box open in your browser, and the snippet of HTML that contains the element you selected will be highlighted. You can identify the HTML DOM selectors and relevant HTML tags from here, which will then be used in the Selector column.
For our example, we will use the HTML tag and the class attribute of the text we wish to modify as a selector- div[class="site-description"].
NOTE: It is very important to include the exact HTML DOM selector in the content rules sheet. An incorrect HTML DOM selector can interfere with the other rules in the sheet even if they are correct. We advise you to go through this document thoroughly to avoid any mistakes.
You can grab your HTML DOM selector by right-clicking the element and selecting Copy Selector.
Here are the exact steps we used to grab our example DOM selector.
First, find the element on the page and right-click it. Then click on Inspect to open the Developer Tools. Your element will be highlighted in the Element tab of the Developer Tools.
Once you see the highlighted element in the Element tab of the Developer Tools, right-click on the element and select Copy selector.
In our example, “div” is the HTML tag and “class” is the attribute associated with the “div” tag. There may be multiple “div” tags on your website. Using “site-description” as the “class” attribute indicates the specific element we want to change. Similarly, you can look at other HTML elements and select other HTML DOM selectors. You can also use generic HTML tags such as the h1 and h2 tags directly in this column to modify the content within them.
You can refer to the following format for defining the HTML DOM selectors:
Here, E is defined as any HTML element such as a div, p, a, h1, h2, etc.
An element of type E
An element belonging to the class info
An element with ID equal to myId
An element with a Foo attribute
E[foo = “bar”]
An element whose foo attribute value is exactly equal to“bar.”
E[foo = “bar” s]
An element whose foo attribute value is exactly and case-sensitively equal to“bar.”
E[foo ^= “bar”]
An element whose foo attribute value starts with a string “bar.”
E[foo $= “bar”]
An element whose foo attribute value ends with a string “bar.”
E[foo *= “bar”]
An element whose foo attribute value contains a substring “bar.”
E[foo ~= “bar”]
An element whose foo attribute value is a list of whitespace-separated values, one of which is exactly equal to “bar.”
E[foo |= “bar”]
An element whose foo attribute value is a hyphen-separated list of values beginning with “bar.”
An element F descendent of an E element
E > F
An element F child of an E element
Targeting the meta tag inside the head
Targeting the HTML inside the body tag
Targeting the HTML inside h1 tag
3. Value -
Once you have the HTML DOM selector in place, you can modify the content within the selector’s scope. A simple tip to achieve this is to copy the entire snippet from the Element tab of the Developer tools and paste it into this column. You can then make your changes directly in the sheet as this snippet will replace the original one in the page’s HTML. You can also add additional HTML elements within this snippet and add new UI elements to your web page.
In our example, we edited the snippet to look like this:
<div class="site-description" style="color:red">This is the new one</div>
We have added the “style” attribute and also replaced the text within the div tag.
The above snippet will replace the original code on the page.
The following examples show what the snippets within the Value column can modify.
<span>Enter your text here</span>
Modify using <span> tag
Modify using <meta> tag
<input name=”submit” id=”submit” class=”submit” value=“Click to enter”>
Modify using <input>
<div class="copyright text-center spacer">
Modify using a block of HTML code. This replaces the current HTML content with the new one.
<h1 class="page-title">Heading text</h1>
Modify using <h1> tag
Modify using <img> This helps you replace the content with an image
<p class=”para”>This is a paragraph</p>
Modify using <p> tag.
4. Insertion change type -
This column should contain the type of operation you want to perform on your selected element. You can either replace the HTML content, remove it, or even add your modifications to the current content.
Note: If you leave this column empty, the default insertion change type will be “replace.”
In our example, we will be using the replace method. This method will replace the original content within our element with our new value.
You can find the Insertion change type methods and their explanations in the table below.
Inserts content before the element
Inserts content after the element
Removes the element and inserts content in place of it
Removes the element with all its content
Inserts content right after the start tag of the element
Inserts content right before the end tag of the element
Replaces content of the element
Once all four columns have been set up, your spreadsheet should look similar to this:
<span>Modify where div has a class cloud</span>
<span>Modify where id is submit</span>
<div>Text inside body</div>
You can find an example spreadsheet here: Content Rules Sheet.
For our example, the spreadsheet should look like this.
<div class="site-description" style="color:red">This is the new one</div>
Once you have created this content rules sheet, which should be formatted per our example, you can import the sheet inside the RankSense app. You can then view the changes on your website after publishing them through the RankSense dashboard.
Steps to publish content rules -
You can follow these steps to import your content rules sheet.
1. Go to the Settings tab and then navigate to the SEO rules tab.
2. Find the “+File” icon beside the “Files with rules” section.
3. You will then see the “Add rules file” section, where you can insert the Google Sheet URL inside the “Spreadsheet URL” input box. Then click on “+Import.”
(Note that before you can do this, you will have to connect your Google Drive account to the RankSense app. Learn more here: Connect Google Drive to RankSense.)
4. Once the file is imported, you will find your new changes under the Publishing tab. Then under the Staging tab, you will find the unpublished modifications. You can click the “Show” link to view your uploaded changes.
5. Once you can verify that the rules are working properly on staging, you can Publish the rules to Production so that they will be live on your site. (Learn more here: Publish Rules to Production.)
View the changes on your site -
1. Go to the webpage you made your changes on in Chrome and open the RankSense tab, which can be found in Chrome’s Developer tools.
(You must first download the RankSense Chrome App.)
2. Refresh your page to see the changes in the production and staging environments.
3. Click on the Show link button to highlight the changes you made on the page.
Please also view our Content Rules video for a detailed look into all of these steps.
In addition to this documentation, we have also created several in-depth videos explaining different use-cases for the content rules.
1. How to add an image to a web page.
In this example, we are adding an image to the start of a blog post. This can be a great example to look for ways to add images or any other content to your web page.
2. How to replace the inner content of a text block.
In this example, we are replacing the content within a text block. This can be a good example to look for ways to replace just the content within an HTML element.
3. How to add a paragraph after the second one on the page.
In this example, we are adding a paragraph after the second one of the blog post. If you have multiple <p> tags or any other HTML tags, this can be a great example to understand how you can add content before or after a specific tag.
4. How to add a FAQ section before the footer.
In this example, we are adding a FAQ section to our web page. This can be a great example if you want to add huge HTML blocks to your web page.