4

Galera, bom dia! Tudo bem ?!

Eu estou passando por um problema com jQuery e HTML na qual eu to tentando add os elementos quando o clique do mouse é fora de certo campo[input]. Esse procedimento funciona normalmente. Porém, a clicar no campo e clicar fora outra vez ele add os mesmo elementos ao invés de substitui-los. Meu problema é que eu não estou conseguindo bolar uma solução para corrigir isso.

Meu código abaixo:

// Functions

function formulaSEO(cpc, cpt) { // Function para medir a densidade de wordskeys no conteúdo  
  /*
   * cpc -> contaPalavraChave 
   * cpt -> contaPalavrasTotais
   * fdd -> formulaDeDensidade
   */
  fdd = (cpc / cpt) * 100;
  fdd = fdd.toFixed(2); // 2 casas deciais para cima
  return fdd;

}

/*
 *
 */

// Principal

$("#f_keywords, #f_titulo_seo, #f_resumo_seo, #f_slug").focusout(function() { // Alterar para o ID do campo 
  /*
   * Configuração para Título
   */
  var titulo = $("#f_titulo_seo").val(); // Alterar para o ID do campo
  var array = titulo.split(' ');

  var palavraChave = $("#f_keywords").val(); // Alterar para o ID do campo 

  if (palavraChave != "") {
    if (array.indexOf(palavraChave) == 0) {

      $('#bom').append('<ul id="titulo-seo"><li class="analise-titulo"><div class="circle-green"></div> A palavra-chave em foco aparece logo no inicio do título.</li></ul>');
      $("li.analise-titulo").addClass("block");
      $("#atencao #titulo-seo, #urgente #titulo-seo").remove();

    } else if (array.indexOf(palavraChave) == -1) {

      $('#urgente').append('<ul id="titulo-seo"><li class="analise-titulo"><div class="circle-red"></div> Essa palavra chave não existe no titulo.</li></ul>');
      $("li.analise-titulo").addClass("block");
      $("#atencao #titulo-seo, #bom #titulo-seo").remove();

    } else {

      $('#atencao').append('<ul id="titulo-seo"><li class="analise-titulo"><div class="circle-orange"></div> O título da página contém a palavra-chave em foco, mas ela não parece estar no começo; tente mudar sua posição para o início.</li></ul>');
      $("li.analise-titulo").addClass("block");
      $("#bom #titulo-seo, #urgente #titulo-seo").remove();

    }
  } else {

    $('#urgente').append('<ul id="titulo-seo"><li class="analise-titulo"><div class="circle-red"></div> Nenhuma palavra-chave em foco foi definida para essa página. Se você não definir a palavra-chave em foco, não será possível calcular a pontuação.</li></ul>');
    $("li.analise-titulo").addClass("block");
    $("#atencao #titulo-seo, #bom #titulo-seo").remove();

  }


  /*
   * Configuração para Conteúdo
   */

  var conteudo = editor.getData(); // Pega os valor do textarea CKEDITOR
  var arrayExterno = conteudo.split(/<p.*?>(.*?)<\/p.*?>/g); // Coloca cada paragrafo dentro de um array

  // Pega cada palavra dentro do paragrafo e coloca em um array interno ao array anterior
  var arrayInterno = [];
  for (i = 0; i < arrayExterno.length; i++) {
    arrayInterno.push(arrayExterno[i].split(" "));
  }

  numPalavrasRecomendadas = 300;

  contPalavrasTotais = 0;
  for (i = 0; i < arrayExterno.length; i++) {
    for (j = 0; j < arrayInterno.length; j++) {
      contPalavrasTotais += 1;
    }
  }

  if (contPalavrasTotais >= numPalavrasRecomendadas) {

    $('#bom').append('<ul id="quant-palavras"><li class="analise-quant-palavras"><div class="circle-green"></div> O texto contém ' + contPalavrasTotais + ' palavras. Isso é maior ou igual ao mínimo recomendado de ' + numPalavrasRecomendadas + ' palavras.</li></ul>');
    $("li.analise-quant-palavras").addClass("block");
    $("#urgente #quant-palavras").remove();

  } else {

    $('#urgente').append('<ul id="quant-palavras"><li class="analise-quant-palavras"><div class="circle-red"></div>O texto contém ' + contPalavrasTotais + ' palavras. Isso está muito abaixo do minimo recomendado de ' + numPalavrasRecomendadas + ' palavras. Adicione mais conteúdo que seja relevante para o tópico.</li></ul>');
    $("li.analise-quant-palavras").addClass("block");
    $("#bom #quant-palavras").remove();

  }

  // Quantidade de vezes que a palavra chave foi encontrada
  contPalavrasChaves = 0;
  for (i = 0; i < arrayExterno.length; i++) {
    for (j = 0; j < arrayInterno[i].length; j++) {
      if (arrayInterno[i][j] == palavraChave || arrayInterno[i][j] == palavraChave + '?' || arrayInterno[i][j] == palavraChave + '!' || arrayInterno[i][j] == palavraChave + '.' ||
        arrayInterno[i][j] == palavraChave + ',' || arrayInterno[i][j] == palavraChave + ':' || arrayInterno[i][j] == palavraChave + ';') {
        contPalavrasChaves += 1;
      }
    }
  }

  var resultado = formulaSEO(contPalavrasChaves, contPalavrasTotais);
  if (resultado >= 1 && resultado < 3) {

    $('#bom').append('<ul id="densidade"><li class="analise-densidade"><div class="circle-green"></div> A densidade de palavras-chave é ' + resultado + '% , o que é ótimo, a palavra-chave em foco foi encontrada ' + contPalavrasChaves + ' vezes.</li></ul>');
    $("li.analise-densidade").addClass("block");
    $("#urgente #densidade").remove();

  } else {

    $('#urgente').append('<ul id="densidade"><li class="analise-densidade"><div class="circle-red"></div> A densidade da palavra-chave é de ' + resultado + '% , o que é muito baixo; a palavra-chave em foco foi encontrada ' + contPalavrasChaves + ' vezes.</li></ul>');
    $("li.analise-densidade").addClass("block");
    $("#bom #densidade").remove();

  }

  /**
   * Configuração para meta-descrição
   */

  var metaDescricao = $("#f_resumo_seo").val().trim();
  array = metaDescricao.split(" ");

  if (metaDescricao != "") {
    if (array.indexOf(palavraChave) || array.indexOf(palavraChave + '?') || array.indexOf(palavraChave + '!') ||
      array.indexOf(palavraChave + '.') || array.indexOf(palavraChave + ',') || array.indexOf(palavraChave + ':') ||
      array.indexOf(palavraChave + ';') >= 0) {

      $('#bom').append('<ul id="meta-descricao"><li class="analise-meta-descricao"><div class="circle-green"></div> A meta-descrição contém a palavra-chave em foco.</li></ul>');
      $("li.analise-meta-descricao").addClass("block");
      $("#urgente #meta-descricao").remove();

    } else if (array.indexOf(palavraChave) || array.indexOf(palavraChave + '?') || array.indexOf(palavraChave + '!') ||
      array.indexOf(palavraChave + '.') || array.indexOf(palavraChave + ',') || array.indexOf(palavraChave + ':') ||
      array.indexOf(palavraChave + ';') == -1) {

      $('#urgente').append('<ul id="meta-descricao"><li class="analise-meta-descricao"><div class="circle-red"></div> Uma meta-descrição foi definida, mas ela não contém a palavra-chave em foco.</li></ul>');
      $("li.analise-meta-descricao").addClass("block");
      $("#bom #meta-descricao").remove();

    }
  } else {

    $('#urgente').append('<ul id="meta-descricao"><li class="analise-meta-descricao"><div class="circle-red"></div> Nenhuma meta-descrição foi definida. Os mecanismos de busca mostrarão trechos da página em seu lugar.</li></ul>');
    $("li.analise-meta-descricao").addClass("block");
    $("#bom #meta-descricao").remove();

  }

  // Tamanho de string contidas da MD
  var metaDescricao = $("#f_resumo_seo").val().trim();
  quantString = metaDescricao.split("");
  if (quantString.length >= 120) {
    if (quantString.length < 158) {

      $('#bom').append('<ul id="tam-meta-descricao"><li class="analise-tam-meta-descricao"><div class="circle-green"></div> A meta descrição tem um bom tamanho.</li></ul>');
      $("li.analise-tam-meta-descricao").addClass("block");
      $("#atencao #tam-meta-descricao").remove();

    } else {

      $('#atencao').append('<ul id="tam-meta-descricao"><li class="analise-tam-meta-descricao"><div class="circle-orange"></div> A meta descrição foi definida, porém não está de acordo com as regras de SEO, que é entre 120 e 158 caracteres.</li></ul>');
      $("li.analise-tam-meta-descricao").addClass("block");
      $("#bom #tam-meta-descricao").remove();

    }
  }

  /**
   * Configuração para SLUG 
   */

  var slug = $("#f_slug").val();
  var arraySlug = slug.split("-");
  contWordInURL = 0
  for (i = 0; i < arraySlug.length; i++) {
    if (arraySlug[i] == palavraChave) {
      contWordInURL += 1
    }
  }

  if (contWordInURL >= 1) {

    $('#bom').append('<ul id="slug"><li class="analise-slug"><div class="circle-green"></div> A palavra-chave em foco aparece no URL desta página.</li></ul>');
    $("li.analise-slug").addClass("block");
    $("#atencao #slug").remove();

  } else {

    $('#atencao').append('<ul id="slug"><li class="analise-slug"><div class="circle-orange"></div> A palavra-chave em foco não aparece no URL dessa página. Se decidir renomear esse URL certifique-se que o URL antigo tenha um redirecionamento 301 para o novo!</li></ul>');
    $("li.analise-slug").addClass("block");
    $("#bom #slug").remove();

  }

  // Tamanho contido no slug
  var arrayTamSlug = slug.split("");
  if (arrayTamSlug.length <= 80) {

    $('#bom').append('<ul id="tam-slug"><li class="analise-slug"><div class="circle-green"></div> O comprimento do SLUG da página está excelente.</li></ul>');
    $("li.analise-tam-slug").addClass("block");
    $("#atencao #tam-slug").remove();
  } else {

    $('#atencao').append('<ul id="tam-slug"><li class="analise-slug"><div class="circle-orange"></div> O slug desta página é um pouco longo, considere encurtá-lo.</li></ul>');
    $("li.analise-tam-slug").addClass("block");
    $("#bom #tam-slug").remove();

  }

  /*$("#f_keywords, #f_titulo_seo, #f_resumo_seo, #f_slug").focusin(function(){
      $("#bom, #atencao, #urgente").remove();
  });*/

});
* {
  padding: 0;
  margin: 0;
}

.row {
  margin-top: 50px;
}

.input-group {
  margin-top: 30px;
  margin-bottom: 20px;
}

.seo-config {
  margin: 20px auto;
}

#titulo-seo,
#quant-palavras,
#densidade,
#meta-descricao,
#tam-meta-descricao,
#slug,
#tam-slug {
  margin-top: 10px;
}

.analise-titulo,
.analise-quant-palavras,
.analise-densidade,
.analise-meta-descricao,
.analise-tam-meta-descricao,
.analise-slug,
.analise-tam-slug {
  display: none;
  margin: 0 8px 0 11px;
  flex: 1 1 auto;
  box-sizing: border-box;
  font-size: 13px;
  line-height: 1.5;
}

ul li {
  margin-bottom: 1rem!important;
  margin-top: 10px!important;
}

.block {
  display: block!important;
}

.ck.ck-reset.ck-editor.ck-rounded-corners {
  width: 100%;
}

.circle-green {
  display: inline-block;
  border-radius: 100%;
  width: 13px;
  height: 13px;
  background-color: #7AD03A;
}

.circle-orange {
  display: inline-block;
  border-radius: 100%;
  width: 13px;
  height: 13px;
  background-color: #EE7C1B;
}

.circle-red {
  display: inline-block;
  border-radius: 100%;
  width: 13px;
  height: 13px;
  background-color: #DC3232;
}
<!DOCTYPE html>
<html lang="pt-br">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Projeto SEO</title>
  <!-- Main -->
  <link rel="stylesheet" href="style.css">

  <!-- Bootstrap -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

</head>


<body>

  <div class="container">
    <div class="row">
      <div class="input-group input-group-lg">
        <div class="input-group-prepend">
          <span class="input-group-text" id="inputGroup-sizing-lg">Título</span>
        </div>
        <input type="text" id="f_titulo_seo" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-lg" value="Os 5 principais tipos de vendas do mercado">
      </div>
      <div class="input-group input-group-lg">
        <textarea name="content" id="f_conteudo">
                </textarea>
      </div>

      <div class="seo-config">
        <h2>SEO</h2>
        <div class="input-group input-group-lg">
          <div class="input-group-prepend">
            <span class="input-group-text" id="inputGroup-sizing-lg">Palavra Chave em foco</span>
          </div>
          <input type="text" id="f_keywords" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-lg">
        </div>

        <p>Rsultado de boas práticas: </p>

        <div id="urgente"></div>
        <div id="atencao"></div>
        <div id="bom"></div>


      </div>

      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text">Meta-descrição</span>
        </div>
        <textarea class="form-control" id="f_resumo_seo" aria-label="Meta-descrição">Você sabia que existem diferentes tipos de vendas? Cada uma delas é indicada para um modelo de negócio e, se bem aplicada, pode facilitar a manutenção dos lucros.</textarea>
      </div>

      <label for="f_slug">SLUG</label>
      <div class="input-group mb-3">
        <div class="input-group-prepend">
          <span class="input-group-text" id="basic-addon3"> https://meublog.com/</span>
        </div>
        <input type="text" class="form-control" id="f_slug" aria-describedby="basic-addon3" value="os-5-principais-tipos-de-vendas-do-mercado">
      </div>

    </div>
  </div>




  <footer>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

    <!-- CkEditor -->
    <script src="https://cdn.ckeditor.com/ckeditor5/12.3.1/classic/ckeditor.js"></script>

    <script src="scripts.js"></script>

    <script>
      let editor;

      ClassicEditor
        .create(document.querySelector('#f_conteudo'))
        .then(newEditor => {
          editor = newEditor;
        })
        .catch(error => {
          console.error(error);
        });
    </script>
  </footer>


</body>

</html>

Desde já agradecido pela ajuda da galera!

1 Resposta 1

4

Amigo, não entendi muito bem o que você pediu, mas pelo o que entendi basta você zerar o HTML dessas divs antes de iniciar a função. Tomei a liberdade de mudar .focusout para .blur e então adicionei o código $('#urgente, #atencao, #bom').html('') para toda a vez que a função for chamada, estas divs ficarem limpas e então ser adicionado as observações , testei e está funcionando normalmente. Segue o código:

// Functions

function formulaSEO(cpc, cpt) { // Function para medir a densidade de wordskeys no conteúdo  
  /*
   * cpc -> contaPalavraChave 
   * cpt -> contaPalavrasTotais
   * fdd -> formulaDeDensidade
   */
  fdd = (cpc / cpt) * 100;
  fdd = fdd.toFixed(2); // 2 casas deciais para cima
  return fdd;

}

/*
 *
 */

// Principal

$("#f_keywords, #f_titulo_seo, #f_resumo_seo, #f_slug").blur(function() { // Alterar para o ID do campo 
  /*
   * Configuração para Título
   */
   $('#urgente, #atencao, #bom').html('')
  var titulo = $("#f_titulo_seo").val(); // Alterar para o ID do campo
  var array = titulo.split(' ');

  var palavraChave = $("#f_keywords").val(); // Alterar para o ID do campo 

  if (palavraChave != "") {
    if (array.indexOf(palavraChave) == 0) {

      $('#bom').append('<ul id="titulo-seo"><li class="analise-titulo"><div class="circle-green"></div> A palavra-chave em foco aparece logo no inicio do título.</li></ul>');
      $("li.analise-titulo").addClass("block");
      $("#atencao #titulo-seo, #urgente #titulo-seo").remove();

    } else if (array.indexOf(palavraChave) == -1) {

      $('#urgente').append('<ul id="titulo-seo"><li class="analise-titulo"><div class="circle-red"></div> Essa palavra chave não existe no titulo.</li></ul>');
      $("li.analise-titulo").addClass("block");
      $("#atencao #titulo-seo, #bom #titulo-seo").remove();

    } else {

      $('#atencao').append('<ul id="titulo-seo"><li class="analise-titulo"><div class="circle-orange"></div> O título da página contém a palavra-chave em foco, mas ela não parece estar no começo; tente mudar sua posição para o início.</li></ul>');
      $("li.analise-titulo").addClass("block");
      $("#bom #titulo-seo, #urgente #titulo-seo").remove();

    }
  } else {

    $('#urgente').append('<ul id="titulo-seo"><li class="analise-titulo"><div class="circle-red"></div> Nenhuma palavra-chave em foco foi definida para essa página. Se você não definir a palavra-chave em foco, não será possível calcular a pontuação.</li></ul>');
    $("li.analise-titulo").addClass("block");
    $("#atencao #titulo-seo, #bom #titulo-seo").remove();

  }


  /*
   * Configuração para Conteúdo
   */

  var conteudo = editor.getData(); // Pega os valor do textarea CKEDITOR
  var arrayExterno = conteudo.split(/<p.*?>(.*?)<\/p.*?>/g); // Coloca cada paragrafo dentro de um array

  // Pega cada palavra dentro do paragrafo e coloca em um array interno ao array anterior
  var arrayInterno = [];
  for (i = 0; i < arrayExterno.length; i++) {
    arrayInterno.push(arrayExterno[i].split(" "));
  }

  numPalavrasRecomendadas = 300;

  contPalavrasTotais = 0;
  for (i = 0; i < arrayExterno.length; i++) {
    for (j = 0; j < arrayInterno.length; j++) {
      contPalavrasTotais += 1;
    }
  }

  if (contPalavrasTotais >= numPalavrasRecomendadas) {

    $('#bom').append('<ul id="quant-palavras"><li class="analise-quant-palavras"><div class="circle-green"></div> O texto contém ' + contPalavrasTotais + ' palavras. Isso é maior ou igual ao mínimo recomendado de ' + numPalavrasRecomendadas + ' palavras.</li></ul>');
    $("li.analise-quant-palavras").addClass("block");
    $("#urgente #quant-palavras").remove();

  } else {

    $('#urgente').append('<ul id="quant-palavras"><li class="analise-quant-palavras"><div class="circle-red"></div>O texto contém ' + contPalavrasTotais + ' palavras. Isso está muito abaixo do minimo recomendado de ' + numPalavrasRecomendadas + ' palavras. Adicione mais conteúdo que seja relevante para o tópico.</li></ul>');
    $("li.analise-quant-palavras").addClass("block");
    $("#bom #quant-palavras").remove();

  }

  // Quantidade de vezes que a palavra chave foi encontrada
  contPalavrasChaves = 0;
  for (i = 0; i < arrayExterno.length; i++) {
    for (j = 0; j < arrayInterno[i].length; j++) {
      if (arrayInterno[i][j] == palavraChave || arrayInterno[i][j] == palavraChave + '?' || arrayInterno[i][j] == palavraChave + '!' || arrayInterno[i][j] == palavraChave + '.' ||
        arrayInterno[i][j] == palavraChave + ',' || arrayInterno[i][j] == palavraChave + ':' || arrayInterno[i][j] == palavraChave + ';') {
        contPalavrasChaves += 1;
      }
    }
  }

  var resultado = formulaSEO(contPalavrasChaves, contPalavrasTotais);
  if (resultado >= 1 && resultado < 3) {

    $('#bom').append('<ul id="densidade"><li class="analise-densidade"><div class="circle-green"></div> A densidade de palavras-chave é ' + resultado + '% , o que é ótimo, a palavra-chave em foco foi encontrada ' + contPalavrasChaves + ' vezes.</li></ul>');
    $("li.analise-densidade").addClass("block");
    $("#urgente #densidade").remove();

  } else {

    $('#urgente').append('<ul id="densidade"><li class="analise-densidade"><div class="circle-red"></div> A densidade da palavra-chave é de ' + resultado + '% , o que é muito baixo; a palavra-chave em foco foi encontrada ' + contPalavrasChaves + ' vezes.</li></ul>');
    $("li.analise-densidade").addClass("block");
    $("#bom #densidade").remove();

  }

  /**
   * Configuração para meta-descrição
   */

  var metaDescricao = $("#f_resumo_seo").val().trim();
  array = metaDescricao.split(" ");

  if (metaDescricao != "") {
    if (array.indexOf(palavraChave) || array.indexOf(palavraChave + '?') || array.indexOf(palavraChave + '!') ||
      array.indexOf(palavraChave + '.') || array.indexOf(palavraChave + ',') || array.indexOf(palavraChave + ':') ||
      array.indexOf(palavraChave + ';') >= 0) {

      $('#bom').append('<ul id="meta-descricao"><li class="analise-meta-descricao"><div class="circle-green"></div> A meta-descrição contém a palavra-chave em foco.</li></ul>');
      $("li.analise-meta-descricao").addClass("block");
      $("#urgente #meta-descricao").remove();

    } else if (array.indexOf(palavraChave) || array.indexOf(palavraChave + '?') || array.indexOf(palavraChave + '!') ||
      array.indexOf(palavraChave + '.') || array.indexOf(palavraChave + ',') || array.indexOf(palavraChave + ':') ||
      array.indexOf(palavraChave + ';') == -1) {

      $('#urgente').append('<ul id="meta-descricao"><li class="analise-meta-descricao"><div class="circle-red"></div> Uma meta-descrição foi definida, mas ela não contém a palavra-chave em foco.</li></ul>');
      $("li.analise-meta-descricao").addClass("block");
      $("#bom #meta-descricao").remove();

    }
  } else {

    $('#urgente').append('<ul id="meta-descricao"><li class="analise-meta-descricao"><div class="circle-red"></div> Nenhuma meta-descrição foi definida. Os mecanismos de busca mostrarão trechos da página em seu lugar.</li></ul>');
    $("li.analise-meta-descricao").addClass("block");
    $("#bom #meta-descricao").remove();

  }

  // Tamanho de string contidas da MD
  var metaDescricao = $("#f_resumo_seo").val().trim();
  quantString = metaDescricao.split("");
  if (quantString.length >= 120) {
    if (quantString.length < 158) {

      $('#bom').append('<ul id="tam-meta-descricao"><li class="analise-tam-meta-descricao"><div class="circle-green"></div> A meta descrição tem um bom tamanho.</li></ul>');
      $("li.analise-tam-meta-descricao").addClass("block");
      $("#atencao #tam-meta-descricao").remove();

    } else {

      $('#atencao').append('<ul id="tam-meta-descricao"><li class="analise-tam-meta-descricao"><div class="circle-orange"></div> A meta descrição foi definida, porém não está de acordo com as regras de SEO, que é entre 120 e 158 caracteres.</li></ul>');
      $("li.analise-tam-meta-descricao").addClass("block");
      $("#bom #tam-meta-descricao").remove();

    }
  }

  /**
   * Configuração para SLUG 
   */

  var slug = $("#f_slug").val();
  var arraySlug = slug.split("-");
  contWordInURL = 0
  for (i = 0; i < arraySlug.length; i++) {
    if (arraySlug[i] == palavraChave) {
      contWordInURL += 1
    }
  }

  if (contWordInURL >= 1) {

    $('#bom').append('<ul id="slug"><li class="analise-slug"><div class="circle-green"></div> A palavra-chave em foco aparece no URL desta página.</li></ul>');
    $("li.analise-slug").addClass("block");
    $("#atencao #slug").remove();

  } else {

    $('#atencao').append('<ul id="slug"><li class="analise-slug"><div class="circle-orange"></div> A palavra-chave em foco não aparece no URL dessa página. Se decidir renomear esse URL certifique-se que o URL antigo tenha um redirecionamento 301 para o novo!</li></ul>');
    $("li.analise-slug").addClass("block");
    $("#bom #slug").remove();

  }

  // Tamanho contido no slug
  var arrayTamSlug = slug.split("");
  if (arrayTamSlug.length <= 80) {

    $('#bom').append('<ul id="tam-slug"><li class="analise-slug"><div class="circle-green"></div> O comprimento do SLUG da página está excelente.</li></ul>');
    $("li.analise-tam-slug").addClass("block");
    $("#atencao #tam-slug").remove();
  } else {

    $('#atencao').append('<ul id="tam-slug"><li class="analise-slug"><div class="circle-orange"></div> O slug desta página é um pouco longo, considere encurtá-lo.</li></ul>');
    $("li.analise-tam-slug").addClass("block");
    $("#bom #tam-slug").remove();

  }

  /*$("#f_keywords, #f_titulo_seo, #f_resumo_seo, #f_slug").focusin(function(){
      $("#bom, #atencao, #urgente").remove();
  });*/

});
* {
  padding: 0;
  margin: 0;
}

.row {
  margin-top: 50px;
}

.input-group {
  margin-top: 30px;
  margin-bottom: 20px;
}

.seo-config {
  margin: 20px auto;
}

#titulo-seo,
#quant-palavras,
#densidade,
#meta-descricao,
#tam-meta-descricao,
#slug,
#tam-slug {
  margin-top: 10px;
}

.analise-titulo,
.analise-quant-palavras,
.analise-densidade,
.analise-meta-descricao,
.analise-tam-meta-descricao,
.analise-slug,
.analise-tam-slug {
  display: none;
  margin: 0 8px 0 11px;
  flex: 1 1 auto;
  box-sizing: border-box;
  font-size: 13px;
  line-height: 1.5;
}

ul li {
  margin-bottom: 1rem!important;
  margin-top: 10px!important;
}

.block {
  display: block!important;
}

.ck.ck-reset.ck-editor.ck-rounded-corners {
  width: 100%;
}

.circle-green {
  display: inline-block;
  border-radius: 100%;
  width: 13px;
  height: 13px;
  background-color: #7AD03A;
}

.circle-orange {
  display: inline-block;
  border-radius: 100%;
  width: 13px;
  height: 13px;
  background-color: #EE7C1B;
}

.circle-red {
  display: inline-block;
  border-radius: 100%;
  width: 13px;
  height: 13px;
  background-color: #DC3232;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="pt-br">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Projeto SEO</title>
  <!-- Main -->
  <link rel="stylesheet" href="style.css">

  <!-- Bootstrap -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

</head>


<body>

  <div class="container">
    <div class="row">
      <div class="input-group input-group-lg">
        <div class="input-group-prepend">
          <span class="input-group-text" id="inputGroup-sizing-lg">Título</span>
        </div>
        <input type="text" id="f_titulo_seo" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-lg" value="Os 5 principais tipos de vendas do mercado">
      </div>
      <div class="input-group input-group-lg">
        <textarea name="content" id="f_conteudo">
                </textarea>
      </div>

      <div class="seo-config">
        <h2>SEO</h2>
        <div class="input-group input-group-lg">
          <div class="input-group-prepend">
            <span class="input-group-text" id="inputGroup-sizing-lg">Palavra Chave em foco</span>
          </div>
          <input type="text" id="f_keywords" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-lg">
        </div>

        <p>Rsultado de boas práticas: </p>

        <div id="urgente"></div>
        <div id="atencao"></div>
        <div id="bom"></div>


      </div>

      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text">Meta-descrição</span>
        </div>
        <textarea class="form-control" id="f_resumo_seo" aria-label="Meta-descrição">Você sabia que existem diferentes tipos de vendas? Cada uma delas é indicada para um modelo de negócio e, se bem aplicada, pode facilitar a manutenção dos lucros.</textarea>
      </div>

      <label for="f_slug">SLUG</label>
      <div class="input-group mb-3">
        <div class="input-group-prepend">
          <span class="input-group-text" id="basic-addon3"> https://meublog.com/</span>
        </div>
        <input type="text" class="form-control" id="f_slug" aria-describedby="basic-addon3" value="os-5-principais-tipos-de-vendas-do-mercado">
      </div>

    </div>
  </div>




  <footer>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

    <!-- CkEditor -->
    <script src="https://cdn.ckeditor.com/ckeditor5/12.3.1/classic/ckeditor.js"></script>

    <script src="scripts.js"></script>

    <script>
      let editor;

      ClassicEditor
        .create(document.querySelector('#f_conteudo'))
        .then(newEditor => {
          editor = newEditor;
        })
        .catch(error => {
          console.error(error);
        });
    </script>
  </footer>


</body>

</html>

1
  • 3
    Meu amigo Vitor, muito obrigado. Não imagina que era somente isso que poderia fazer a diferença. Resolveu meu problema. Muito obrigado e bom dia Vitor! Commented 7/08/2019 às 14:28

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .