Insert Additional Text into HTML Page based on Dropdown List Value

Question

I was hoping to get some advice on the following. I have a dropdown box which has 15 separate options, when an option is selected a paragraph of text is displayed under it. Therefore I have 15 paragraphs of text each assigned as a 'Value' to the dropdown option.

The value is displayed under the dropdown box when an option is selected.

From an SEO perspective, I have been advised that this may be bad practice as Google may percieve this as 'hidden' text and give a low weight to the page when it comes to ranking.

How can I instead keep the text on a seperate page and 'pull' the additional value based on the dropdown list value?

The code I am working off is here: https://codepen.io/mgsolid2010/pen/amrxRA

HTML

<label for="car">Car</label>
<select id="car">  
  <option value="---Select Option---">---Select Option---</option>
  <option value="Ford">Ford</option>
  <option value="Fiat">Fiat</option>
  <option value="Volvo">Volvo</option>
</select>

<label for="engine">Engine</label>
<select id="engine">
  <option value="---Select Option---">---Select Option---</option>
  <option value="1.4 Petrol 1.4">1.4 Petrol1</option>
  <option value="1.6 Petrol">1.6 Petrol</option>
  <option value="2.0 TDI">2.0 TDI</option>
</select>

<button id="process">Update</button>



<a id="displayText" style="display: none"><p>Please select an option from the dropdown list above.</p></a>
<div id="toggleText" style="display: none"><h1><p>You have chosen a <span class="car">Ford </span> with a <span class="engine">1.4 Petrol</span> engine.</p></h1></div>

JS

$('#process').on('click', function() {
  var ele = document.getElementById("toggleText");
    var text = document.getElementById("displayText");
  var car = $('#car :selected').text();
  var engine = $('#engine :selected').text();

  if (car == "---Select Option---" || engine == "---Select Option---" ){
  ele.style.display = "none";
  text.style.display = "block";
  } else{
  ele.style.display = "block";
  text.style.display = "none";
  $('p .car').text(car);
  $('p .engine').text(engine);
  }
});

Many Thanks

Are you getting append the result one by one depend on selected input value? — prasanth, Oct 28 '16 at 10:02
First, it might be best to try and validate that assumption before you assume it's true and requires a workaround (how does moving hidden content off the page help with SEO looking for that text?); you may wish to ask over on [webmasters.se]. — David Thomas, Oct 28 '16 at 10:06
I read the following thread, which made be think whether search engines may misinterpret my intentions:http://stackoverflow.com/questions/31521462/search-engine-indexing-of-single-page-applications/31535615#31535615 — Marcus, Oct 28 '16 at 10:32
I remember working on this before. Posted a solution below which should work for you. — Paul Redmond, Oct 28 '16 at 10:50

score 0 · Answer 1 · answered Oct 28 '16 at 10:06

0

I don't think that should be a problem with SEO, it's a very normal thing to do. The only other way would be to have the text stored as a javascript string and insert it / remove it when needed. But i would not do this.

answered Oct 28 '16 at 10:06

mikepa88

733
1
6
20

This may be a good work around, why would you not recommend this? – Marcus Oct 28 '16 at 10:34
Well, depending on how your javascript is organized, it might not be good programming practice to have content on variables like that, instead on the view. I would not recommend because I think having them in the view and hiding is better and not that bad for SEO. But if you have a good structured Javascript code and something like a class/service/model that fetches text content, then yes, go with it. – mikepa88 Oct 28 '16 at 10:40

score 0 · Answer 2 · answered Oct 28 '16 at 10:07

One approach would be to have the various paragraphs in the source code already, then just show/hide them as required.

Simple example (Fiddle):

HTML

<select>
  <option selected>select...</option>
  <option data-for-para='1'>Option 1</option>
  <option data-for-para='2'>Option 2</option>
  <option data-for-para='3'>Option 3</option>
  <option data-for-para='4'>Option 4</option>
</select>

<div id='dropdown-paras'>
  <p id='para1'>Text for option 1</p>
  <p id='para2'>Text for option 2</p>
  <p id='para3'>Text for option 3</p>
  <p id='para4'>Text for option 4</p>
</div>

JS (jQuery)

var paras_cntr = $('#dropdown-paras');
$('select').on('change', function() {
    var para_id = $(this).children(':selected').data('for-para');
    if (!para_id) paras_cntr.children().hide();
    paras_cntr.children('#para'+para_id).show().siblings().hide();
});

CSS

  #dropdown-paras p { display: none; }

Thanks, though this currently the method I am using, and feel that as there is a paragraph of text assigned to each value, whether this will be considered 'hidden text'. — Marcus, Oct 28 '16 at 10:33

score 0 · Answer 3 · answered Oct 28 '16 at 10:47

I have made some changes to your code to simplify it a bit. This is perfectly SEO compliant, the text is in your markup.

Both drop downs need to have a valid option selected to show the sentence, or else it will remind the user to choose an option from both dropdowns.

    // HTML
    <label for="car">Car</label>
    <select id="car">  
      <option value="---Select Option---" class="first">---Select Option---</option>
      <option value="Ford">Ford</option>
      <option value="Fiat">Fiat</option>
      <option value="Volvo">Volvo</option>
    </select>

    <label for="engine">Engine</label>
    <select id="engine">
      <option value="---Select Option---" class="first">---Select Option---</option>
      <option value="1.4 Petrol 1.4">1.4 Petrol</option>
      <option value="1.6 Petrol">1.6 Petrol</option>
      <option value="2.0 TDI">2.0 TDI</option>
    </select>

    <button id="process">Update</button>

    <p id="defaultText">Please select the two options from the dropdown list above.</p>

    <p id="optionsText">You have chosen a <span class="car">Ford </span> with a <span class="engine">1.4 Petrol</span> engine.</p>

    // jQuery/JS
    $(function(){
        var ele = $('#defaultText');
        var opt = $('#optionsText');

        opt.hide();
        $('#process').on('click', function() {

        var carFirst = $('#car :selected').hasClass('first');
        var engineFirst = $('#engine :selected').hasClass('first');      

        if ( !carFirst && !engineFirst ){

          var carText = $('#car :selected').text();
          var engineText = $('#engine :selected').text();        

            ele.hide();
            opt.show();

            $('#optionsText .car').text(carText);
            $('#optionsText .engine').text(engineText);

        } else {
            ele.show();
            opt.hide();
        }
        });

    });

http://codepen.io/paulcredmond/pen/bwyrNG?editors=1011

Thanks for this! You see the text I would be displaying would be in paragraphs, would it still be SEO friendly if the following was the case: http://codepen.io/mgsolid2010/pen/ZpNjGz — Marcus, Oct 28 '16 at 12:50
Yeah, it would be. You're storing the options in the markup. All your JS is doing is displaying different combinations. — Paul Redmond, Oct 28 '16 at 12:51

score 0 · Answer 4 · answered Oct 28 '16 at 10:57

Another way of implementing this would be storing your paragraphs in javascript object, and use them as you select the dropdown options.

var data = [
   {car: 'ford', engine: ['petrol 1.4l', 'diesel 2l']},
   {car: 'suzuki', engine: ['petrol 1.4l', 'diesel 2l']},
   ...
]

Have a single element for description, and on change event of your dropdown, show the description from your javascript data.

Storing the data in object gives you better control and ability to keep your dropdown dynamic (unless rendering from server side), or use data in the app later.

Hope this helps

Insert Additional Text into HTML Page based on Dropdown List Value

4 Answers4