Preventing DOM elements from getting rendered if JS is not enabled

Question

Throughout my app, I'd like to use Razor for all functionality related to Reading, and leverage knockoutJS and AJAX for CUD operations.

In my profile view, I've done the following:

<div>
    <h4>About Me</h4>
    <!-- ko if: !isEditingAboutMe() -->
    <p>@Model.User.AboutMe</p>
    @if (Model.CurrentUserCanEdit)
    {
        <a data-bind="click: editAboutMe">edit</a>
    }
    <!-- /ko -->
    <!-- ko if: isEditingAboutMe() -->
    @Html.TextBoxFor(model => model.User.AboutMe, new { data_bind = "value: aboutMe" })
    <a data-bind="click: saveAboutMe">save</a>
    <a data-bind="click: cancelAboutMe">cancel</a>
    <!-- /ko -->
</div>

This way search engines can at least crawl the content, and users with javascript enabled can perform CUD operations. The idea is that users with javascript disabled and search engines will get a usable read-only version of the app with no edit capabilities shown.

My problem above is that - search engines will see the editing controls since they're wrapped in ko statements. What's the best way to prevent this from happening?

One solution I can think of is adding display: none to each of the edit controls and re-enabling it with knockout attribute bindings... thoughts?

Also - feedback regarding the "properness" of this approach is welcome.

How do you know when a crawler is going to crawl your site? If you knew, and a user was using this page, would you hide these elements and say to the user, "hang on, the site's being crawled and I need to hide some stuff for a minute. BRB"? The `if` binding won't just hide the DOM elements, it removes the elements from the page. Also, there's no need to add/remove the style>display attribute because the `visible` binding will do this for you. This is the subtle difference between the `if` and `visible` binding. `if` adds/removes elements from the DOM and `visible shows/hides elements. — nwayve, Sep 17 '13 at 03:55
@Dennis I don't understand anything in the first part of your comment. And I know the difference between if and visible, that wasn't my question. IF the user has js disabled OR the user is a crawler, I don't want the edit controls on the page. That's the problem I'm trying to solve. — RobVious, Sep 17 '13 at 03:59
Sorry, I'm just a bit confused about the question. It just sounds like you're trying to hide elements with KO which assumes you've already served up the page to a requester who is either a user or a bot. Isn't this something you would check for before rendering the page and using an @if statement to hide the edit controls? I would probably look at the `Request.UserAgent` string in a controller and perform some Regex to see if the requester is a [bot](http://www.useragentstring.com/pages/Crawlerlist/). Then hide/show elements as appropriate. — nwayve, Sep 17 '13 at 04:51
@Dennis since it's unreliable to detect bots / non-JS users, I'm trying to hide the edit controls by detecting JS on the client. How can I do this? — RobVious, Sep 17 '13 at 17:45
Ah, I got. KO won't help to show/hide content if javascript is disabled. I think your best option is to use [` — nwayve, Sep 17 '13 at 18:09
@RobVious "I could throw some javascript into a noscript tag that hides a bunch of elements, but I'm wondering if there's a more elegant / proper approach." I don't think that works how you think it works. — xdumaine, Sep 20 '13 at 12:19

score 2 · Accepted Answer · answered Sep 21 '13 at 03:58

There are two things you are asking about.

First Question: How do I hide specific things on my page from search engines?

Every time something hits your site, it has a user agent string. This can help you learn what browsers are connecting to your site. When a search engine hits your site, it will identify itself as such via the user agent setting.

You can find a list of user agent strings for search engine crawlers at http://www.useragentstring.com/pages/Crawlerlist/

And you can find the user agent string for a request with HttpContext.Current.Request.UserAgent

To hide the controls from search engines, use razor to check the current user agent string against all known search engine crawlers. If it's a search engine, then don't return the edit controls with the markup.

Second Question: How do I hide specific things on my page from browsers without javascript enabled?

You could hide the things by default, then use javascript to make them visible.

Markup:

<a class="hideIfNoJS" data-bind="click: saveAboutMe">save</a>

CSS:

.hideIfNoJS { display: none }

JS:

$('.hideIfNoJS').show();

Preventing DOM elements from getting rendered if JS is not enabled

1 Answers1