• Resolved dar12

    (@dar12)


    Hi,

    Recently found post from Baden explaining that to nest collapse elements when using roll-your-own, the use of “display:none” appears to be required as an inline style for the “hidden” content tags, from here: http://spacedonkey.de/1840/roll-your-own-nested-expands/
    Use of display:none does not seem to be required when not nesting. So, it would seem that setting display:none in the initial html in this way would hide content from google/other indexing engines, making it a non-SEO friendly approach? (vs shortcodes where display:none only gets set by js, allowing all the content to still be visible to search engines – I think).

    So, my questions: Is nesting with roll-your-own not as good as using shortcode-based nesting from an SEO standpoint, and if so, is there a way to avoid this shortfall and still use nested collapses with the roll-your-own method? I tried using shortcode-based approach for the nested collapses inside an outer collapse that used roll-own tags, but the two approaches do not seem to mix.

    Thanks

    https://wordpress.org/plugins/jquery-collapse-o-matic/

Viewing 5 replies - 1 through 5 (of 5 total)
  • Thread Starter dar12

    (@dar12)

    After some more digging, I found a newer post ( http://spacedonkey.de/2432/nested-collapse-elements-with-highlander-grouping/ ) which shows nested roll-your-own expands WITHOUT inline display:none styling on the target elements — so I updated to 1.7.3, removed display:none on the target elements, and the nesting seems to work OK with the roll-your-own approach. Maybe the inline display:none from the older post mentioned above were just there for flicker prevention, but I thought that when I tried deleting display:none before doing the version update, the expand content showed by default — maybe something else was going on.

    Anyway, perhaps my concern about SEO is gone now, since I now have the option to operate with display:none removed, as long as I can live with flicker.

    Plugin Author Baden

    (@baden03)

    using inline display: none should only be used for swap-titles.
    If the roll-your-own method is structured properly, the content is only collapsed via javascript after page load, therefore not creating a SEO issue.
    Flicker prevention, if required due to large amounts of content, should use the maptastic class, as does not display:none the content, but simply move it off the screen.
    Issue marked as resolved.

    Thread Starter dar12

    (@dar12)

    Thanks Baden for the clarifications and tip about maptastic class. I tried maptastic but had a new problem surface as follows:
    After your suggestion I did add maptastic inline as a class to the roll-own target divs (ie, ‘<div class=”maptastic collapseomatic_content etc… ‘). And, on the same page, where shortcodes were used for other expands, I applied it as a special class using targclass=”maptastic” in the expand shortcode, per the documentation. The result was good as far as it preventing flicker in both cases, and the content showed fine when the individual triggers were clicked. However, my page-wide expand-all link stopped working (implemented as ‘<span class=expandall”>Expand All</span>’) — with the addition of these maptastic classes, the expand-all now does not cause the content to be displayed, but it does trigger the swaptitle for the trigger text/arrow in all cases — it’s as if the maptastic class is not being managed properly (not being removed?) when expandall is clicked. Any idea on why this might be happening?

    Plugin Author Baden

    (@baden03)

    without a link it would be very tricky to troubleshoot that issue.
    Are you sure that your expand all tag is:

    <span class=expandall">Expand All</span>

    because the correct formating is:

    <span class="expandall">Expand All</span>

    Tomorrow morning (it’s getting late on this end) we’ll set up a demo using maptastic and expand all to see if we can recreate the issue on our end. stay tuned.

    Thread Starter dar12

    (@dar12)

    Thanks for looking into this Baden. Yes, the missing quote was just a typo in my post.
    In the meantime, I have developed a workaround that seems to work, and also made one more odd discovery that I also worked around, as follows:
    – As described, the maptastic class does not get removed when clicking the expand-all span (although the swaptitle trigger text and arrow both change normally). To work around this, I created a simple jQuery onclick function to remove the maptastic class from all collapseomatic_content divs when the expand-all span is clicked — this seems to work OK.
    – I noticed a second problem that also seemed related to the expand-all/collapse-all functionality: I use an additional close trigger at the bottom of my expand content per the documentation (ie, id=bot-… with class colomat-close) and they work great with normal expand actions. But, when using collapse-all, for some reason the colomat-close class is getting removed from these bottom close triggers every time collapse-all is clicked – the result is that after expanding normally following a collapse-all, the bottom trigger arrow png was pointing the wrong way (ie, down for open, not up for close as it should be) Again I used jQuery to work around this by adding back the colomat-close class to elements with id containing “bot-” anytime collapse-all span is clicked (after a short time delay to allow the plugin to do its mysterious removal of this class before my jQ would restore it)

    So, with the above workarounds, I seem to have things behaving the way I want, but I’d be interested if you find anything or have any further insights on these items. My site is in private devel so no readily available link, but if you are unable to reproduce, I may be able to provide access for you to take a look at the behavior.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Does roll-your-own hurt SEO when display:none is used for nesting?’ is closed to new replies.