Dynamic Attribute (Show/Hide) appearing in SEO

Wappler General Need Help
1

I have used the Dynamic Attribute > Show for when a database field shows results.

When viewing the page in a browser, everything works as intended.

I have set up several google alerts to notify me when certain things appear online. I was surprised to receive a google alert for my site so quickly, but concerned because it showed the database field in the alert when it should not have for this particular page.

A google site search shows the same results as the google alert notification. This is concerning since it is misleading to visitors of the site because the database field is actually not showing for this particular page, but would show for other pages.

Is this an expected result of using Dynamic Attributes > Show/Hide ?

If so, is there an alternate method of showing and hiding information on a dynamic page that would ensure information that should not be shown does not appear in SEO results?

2

Show and hide attributes use css display property to hide or show the elements, by applying display:none; to hide or display:block; to show the element.
If you don’t want the element to render on the page, use conditional regions instead.

3

Any item show/hide/conditional that is based on a result from a query will be seen as part of the DOM by search indexing bots and especially Google. The bots have no way of interacting with the query nor do they wait around. They render the entire DOM. Google does offer a solution to this however but what you may need to do is remove all your pages that are affected in the Google Console and after applying the below fix request indexing again.

Using the data-nosnippet HTML attribute

You can designate textual parts of an HTML page not to be used as a snippet. This can be done on an HTML-element level with the data-nosnippet HTML attribute on span, div, and section elements. The data-nosnippet is considered a boolean attribute. As with all boolean attributes, any value specified is ignored. To ensure machine-readability, the HTML section must be valid HTML and all appropriate tags must be closed accordingly.

Examples:

<p>This text can be shown in a snippet <span data-nosnippet>and this part would not be shown</span>.</p> <div data-nosnippet>not in snippet</div> <div data-nosnippet="true">also not in snippet</div> <div data-nosnippet="false">also not in snippet</div> <!-- all values are ignored --> <div data-nosnippet>some text</html> <!-- unclosed "div" will include all content afterwards --> <mytag data-nosnippet>some text</mytag> <!-- NOT VALID: not a span, div, or section --> <p>This text can be shown in a snippet.</p> <div data-nosnippet> <p>However, this is not in snippet.</p> <ul> <li>Stuff not in snippet</li> <li>More stuff not in snippet</li> </ul> </div>

Google typically renders pages in order to index them, however rendering is not guaranteed. Because of this, extraction of data-nosnippet may happen both before and after rendering. To avoid uncertainty from rendering, do not add or remove the data-nosnippet attribute of existing nodes through JavaScript. When adding DOM elements through JavaScript, include the data-nosnippet attribute as necessary when initially adding the element to the page's DOM. If custom elements are used, wrap or render them with div, span, or section elements if you need to use data-nosnippet.

The above is taken from the Google Developer documentation

We would use no-snippet on items such as breadcrumbs and navigation, infact anything that you do not want displayed in the 'snippet' Google displays in results, just to air on the side of caution no-snippet all the things aside from the text you want displayed in the results.

If the above Google example makes not a lot of sense here is another for you:

<h3 data-nosnippet="true">We DO NOT WANT this displayed in Google results </h3>

<h3>We WANT this displayed in Google results </h3>

Hope that helps @scott. If you have any questions just ask as we have became quite the SEO experts over the past twelve months or so.

2 Likes
4

Nope, conditional regions are not rendered in the DOM if the condition is not met. This only applies to show/hide regions.

5

Try telling the Google Indexer that. :slight_smile:

We tried it in the past and the contents were still rendered as a snippet. The Indexer is a sneaky little s**t...

6

Well it’s App Connect who doesn’t render it.

1 Like
7

Only speaking from experience and sharing it. We had Conditions set and they were entirely ignored by Google. As a fail-safe using data-nosnippet="true" with a Conditional Region does not hurt and that way one way or the other it will not be displayed. But for us the use of solely a Conditional Region failed and we tried multiple times over weeks as those type of changes are not the type to be reflected immediately (reliant upon indexing of course). Thus doing both will insure Google does not render the 'thing' in any result snippets.

8

Trigger alert :laughing:

1 Like
9

I must have about 3999 (and counting) of those!

:joy:

Also love this referring to App Connect as not just a Framework and more of a being.

image
image542Ă—822 36.1 KB

2 Likes
10

@Apple
What i mean is the conditional element doesn’t render the content in the dom when the condition is not met.

Google can’t read something that is not on the page, but google perfectly well parses js expressions.

So google can read your {{binding}} but when it is available on the page.

If you don’t see the value, element or expression when inspecting page source, then google also doesn’t see it.

1 Like