Como criar uma ferramenta de densidade de palavras-chave com o Laravel a partir do zero

Início » Tecnologia » Como criar uma ferramenta de densidade de palavras-chave com o Laravel a partir do zero


Introdução

Olá leitores do freeCodeCamp. Espero poder lhe trazer um ótimo conteúdo de codificação para inspiração, educação e, claro, diversão!

Neste tutorial, aprenderemos sobre a densidade de palavras-chave e como criar uma ferramenta que pode calcular a densidade de palavras-chave com o Laravel.

A ferramenta da web nos permitirá colar em uma página completa de HTML. Em seguida, a mágica será executada para fornecer uma pontuação precisa da densidade da palavra-chave.

Em um resumo rápido, aqui estão algumas habilidades básicas que abordaremos ao criar a ferramenta.

  1. Rotas, controladores e visualizações do Laravel
  2. Layouts do Laravel
  3. HTML e formulários
  4. JQuery e Ajax
  5. Algum PHP nativo
  6. Um pouco de SEO!

O que é densidade de palavras-chave?

Se você possui seu próprio site ou blog, provavelmente já sabe o que é densidade de palavras-chave. Para quem não sabe o que significa, darei uma breve e doce explicação abaixo.

A densidade de palavras-chave é um cálculo de ocorrências de palavras ou palavras-chave geralmente em um grande pedaço de texto. A densidade é relatada em uma porcentagem que é simplesmente calculada com a seguinte fórmula.

KeywordDensity = (Contagem de palavras-chave / Contagem de palavras) * 100

Por que isso é importante?

A densidade de palavras-chave é um fator-chave no algoritmo do mecanismo de pesquisa do Google. Pensa-se amplamente que uma boa densidade de palavras-chave para otimizar páginas da web para rankings do Google é de cerca de 3,5%. Se a porcentagem for maior, por exemplo 20%, isso poderá ser visto como “preenchimento de palavras-chave” e, portanto, poderá afetar seriamente seus rankings de pesquisa do Google.

Portanto, essa é uma lição minúscula sobre SEO e para lhe dar um pouco de contexto do que estamos tentando construir.

Este tutorial presume que todos nós estamos começando com uma nova versão do Laravel, permitindo que qualquer pessoa siga a partir de qualquer ponto específico. (Desculpas se as seções iniciais estão dizendo para você chupar ovos!)

Além disso, apenas para um contexto mais aprofundado, estou construindo isso no MacOS com o XAMPP localmente.

Pré-requisitos

  1. Um ambiente PHP instalado e acesso ao diretório raiz
  2. Compositor instalado
  3. Seu editor de código favorito que interpreta PHP, HTML, CSS e JS.

Com todos esses pré-requisitos desmarcados, agora podemos sujar as mãos.

Criando nosso aplicativo Laravel

Antes de tudo, precisamos baixar e instalar uma nova versão do Laravel. Siga as etapas abaixo para conseguir isso.

  1. Abra sua interface da linha de comandos no diretório raiz do seu servidor da web, por exemplo, XAMPP / xamppfiles / htdocs /
  2. Execute o seguinte comando e deixe o compositor fazer a mágica

composer create-project --prefer-dist laravel/laravel KeywordDensityApp

Melhor dica: Se você estiver trabalhando no MacOS, verifique as etapas a seguir para ativar as permissões na pasta de armazenamento do Laravel.

  1. Navegue até sua CLI para a pasta do projeto (‘KeywordDensityApp’)
  2. Execute o seguinte comando

sudo chmod -R 777 storage/*

Adicionando um controlador e visualização

Agora que temos o básico fora do caminho, podemos começar a construir nosso controlador e página da Web que permitirá que um usuário cole e analise um pouco de HTML.

Podemos criar um novo controlador de duas maneiras: através do auxiliar de linha de comando do artesão PHP ou simplesmente criando com o seu editor de código. Sinta-se livre para usar qualquer um dos métodos abaixo, apenas verifique se o controlador corresponde

Criar controlador com PHP artesão

php artisan make:controller ToolController

Criar controlador com editor de código

  1. Localize o seguinte – ProjectFolder / App / Http / Controllers
  2. Crie um novo arquivo .php chamado ToolController

Verifique se esse arquivo recém-criado possui o seguinte conteúdo:

Agora vamos criar a visualização.

Criar visualização com o editor de código

  1. Localize a pasta de exibição em ProjectFolder / resources / views
  2. Crie uma nova pasta chamada ferramenta
  3. Crie um novo arquivo PHP de visualização chamado index.blade.php

Agora vamos criar um arquivo de layout

Com a maioria dos aplicativos Laravel, você deseja criar um arquivo de layouts para não precisar repetir muito HTML repetidamente para obter o mesmo design em todos os aspectos.

Esse layout é bastante básico, usando um modelo simples do Bootstrap e possui uma chamada @yield para a área 'content' que utilizaremos em nossas visualizações. Além disso, há uma chamada @yield para 'scripts' que usaremos mais tarde.

  1. Localize a pasta de exibição em ProjectFolder / resources / views
  2. Crie uma nova pasta aqui chamada layouts
  3. Crie um novo arquivo chamado master.blade.php
  4. Adicione o seguinte código ao arquivo

            Ferramenta de densidade de palavras-chave                
@yield ('conteúdo')
@yield ('scripts')

Amplie nossas visualizações para usar o arquivo de layout

Agora, vamos usar o arquivo de layouts recém-criado na visualização de boas-vindas e na visualização do índice de ferramentas. Siga estas etapas para estender ao layout.

  1. Adicione o seguinte código ao ProjectFolder / resources / views / welcome.blade.php e ProjectFolder / resources / views / tool / index.blade.php

@extends('layouts.master')@section('content')    @endsection

Tente renderizar a página de índice do diretório da ferramenta, por exemplo localhost / tool. Deve ser algo como abaixo.

Layout básico da vista

Vinculando o Controlador, Rota e Visão

Agora que temos um controlador e uma visualização, precisamos primeiro definir uma rota e, em seguida, adicionar um método de visualização de retorno ao controlador.

Defina a rota

  1. Localize o arquivo de rotas da web em ProjectFolder / routes / web.php
  2. Adicione o seguinte código à parte inferior do arquivo:

Route::get('/tool', '[email protected]')->name('KDTool');

Crie o novo método do controlador

Agora, volte ao seu ToolController e adicione a seguinte função:

public function index(){   return view('tool.index');}

Sinta-se à vontade para alterar os nomes das visualizações, os URLs de rota ou as funções do controlador ao seu gosto pessoal. Apenas certifique-se de que todos correspondam e a página seja renderizada.

Agora, com nossa configuração anterior de visualizações e arquivos de layout, podemos começar a adicionar o conteúdo na forma de HTML de que precisaremos. Ele consistirá em nada mais do que algum texto, formulário de entrada de área de texto e um botão de envio.

Adicione o seguinte HTML à seção de conteúdo do arquivo ProjectFolder / resources / views / tool / index.blade.php.

    

A visualização agora deve renderizar como esta:

Visualização da Ferramenta de densidade de palavras-chave com entrada da área de texto

Criando a ponte entre o front-end e o back-end

Agora, temos praticamente tudo o que precisamos no front end: uma área de texto de entrada simples onde os usuários podem colar em texto sem formatação ou HTML. O que falta é a lógica de quando o botão é pressionado 'Obter densidades da palavra-chave'.

Essa lógica de ponte fará essencialmente o seguinte.

  1. Ouça os cliques no botão Obter densidade de palavras-chave
  2. Pegue o conteúdo da entrada de área de texto não vazia
  3. Use o JQuery Ajax para enviar os dados ao back-end para serem processados ​​e aguardar uma resposta.
  4. Quando a resposta for retornada, manipule os dados e crie uma tabela HTML com as estatísticas legíveis por humanos (densidade de palavras-chave).

A parte dianteira

Para fazer isso, usaremos um script in-page que podemos injetar usando a tag @section.

Adicione o seguinte à visualização tool / index.blade.php, após a seção de conteúdo.

@section ('scripts')    @endsection

Todo esse script que injetarmos manipulará todos os itens da lista numerada acima.

O que falta fazer é lidar com os dados que chegam no lado de trás das coisas.

Processo interno

Primeiro, antes de prosseguirmos com a codificação, precisamos lidar com o fato de que texto simples e HTML podem ser enviados. Para isso, podemos usar uma ferramenta bacana para nos ajudar.

html2text é a biblioteca PHP perfeita para este caso de uso, então é hora de instalá-lo. html2text faz exatamente o que diz na lata, converte a marcação HTML em texto sem formatação.

Felizmente, este pacote possui um comando de instalação do compositor, portanto, digite o seguinte comando na CLI no diretório raiz do projeto.

composer require html2text/html2text

Agora, nosso controlador de back-end receberá HTML ou texto sem formatação em solicitações disparadas do formulário HTML que criamos em nossa exibição. Agora precisamos fazer a rota para lidar com essa chamada e encaminhar a chamada para o controlador específico que fará a mágica.

Adicione o seguinte PHP ao arquivo de rotas web.php:

Route::post('/tool/calculate-and-get-density', '[email protected]');

Em segundo lugar, adicione o seguinte ao arquivo ToolController.php:

    public function CalculateAndGetDensity(Request $request) {        if ($request->isMethod('GET')) {                  }    }

OK, então o palco está montado. Vamos codificar a mágica que calculará a densidade da palavra-chave e retornará os dados.

Em primeiro lugar, a instrução add use é necessária para o pacote html2text recém-instalado. Adicione o seguinte ao topo do ToolController.php, logo abaixo de outras instruções de uso:

use Html2TextHtml2Text;

Em seguida, precisamos manipular o parâmetro get que deve ser passado, certificando-se de que não esteja definido e convertendo o parâmetro do conteúdo em texto sem formatação. Refatorar a função CalculateAndGetDensity para a seguinte aparência:

public function CalculateAndGetDensity(Request $request) {        if ($request->isMethod('GET')) {            if (isset($request->keywordInput)) { // Test the parameter is set.                $html = new Html2Text($request->keywordInput); // Setup the html2text obj.                $text = $html->getText(); // Execute the getText() function.            }        }    }

Agora que temos uma variável para armazenar todo o texto retirado do parâmetro keywordInput, podemos prosseguir e começar a calcular a densidade.

Precisamos lidar com o seguinte:

  1. Determinar a contagem total de palavras
  2. Analise a sequência de texto e converta-a em uma matriz de valores-chave (a chave é a palavra-chave, o valor é a ocorrência da palavra)
  3. Classifique em ordem decrescente com a maior ocorrência primeiro na matriz
  4. Passe o loop sobre a matriz de chave e valor, enviando os valores para uma nova matriz com um campo adicional de 'densidade', que utiliza a fórmula de densidade de palavras-chave que vimos anteriormente no artigo. Essa fórmula usará o valor (ocorrência) e a contagem total de palavras.
  5. Finalmente, para retornar os dados

Refatorar a função para ter a seguinte aparência, anotando os comentários:

public function CalculateAndGetDensity(Request $request) {        if ($request->isMethod('GET')) {            if (isset($request->keywordInput)) { // Test the parameter is set.                $html = new Html2Text($request->keywordInput); // Setup the html2text obj.                $text = strtolower($html->getText()); // Execute the getText() function and convert all text to lower case to prevent work duplication                $totalWordCount = str_word_count($text); // Get the total count of words in the text string                $wordsAndOccurrence  = array_count_values(str_word_count($text, 1)); // Get each word and the occurrence count as key value array                arsort($wordsAndOccurrence); // Sort into descending order of the array value (occurrence)                $keywordDensityArray = [];                // Build the array                foreach ($wordsAndOccurrence as $key => $value) {                    $keywordDensityArray[] = ["keyword" => $key, // keyword                        "count" => $value, // word occurrences                        "density" => round(($value / $totalWordCount) * 100,2)]; // Round density to two decimal places.                }                return $keywordDensityArray;            }        }    }

Nota: A beleza do html2text é que ele realmente não se importa se está convertendo HTML ou texto sem formatação, portanto, não precisamos nos preocupar se o usuário enviar um. Ainda produzirá texto sem formatação.

Colocando à prova

Finalmente, estamos prontos para testar a ferramenta, wahoo! Vá em frente e renderize a visualização do índice da ferramenta (localhost / ferramenta).

  1. Agora, você pode acessar qualquer site de sua escolha na Web, carregar uma página a partir desse site, clicar com o botão direito do mouse e clicar em Visualizar código-fonte.
  2. Copie todo o conteúdo e volte para a ferramenta.
  3. Cole o conteúdo na área de texto e clique no botão Obter densidades da palavra-chave.
  4. Aguarde a resposta e confira a tabela de densidades de palavras-chave!
  5. Confira meu exemplo abaixo, que usa o HTML desta página.

Ferramenta de densidade de palavras-chave e tabela de palavras-chave

E é isso aí!

Sumário

Neste artigo, aprendemos como criar um aplicativo Laravel do zero. Ele tocou em algumas das diferentes partes da pilha completa no desenvolvimento, como JQuery, PHP, HTML etc. Esperançosamente, com o entendimento desse aplicativo, a mesma metodologia pode ser usada para criar algo mais, talvez maior e melhor.

Possíveis desenvolvimentos

A ferramenta de densidade de palavras-chave atualmente leva em consideração as palavras 'stop'. Sabe-se que as palavras de parada são ignoradas pelos rastreadores do Google. Palavras como ele, o, como e a. Observando a captura de tela da ferramenta acima, você pode ver que elas são muito usadas!

Desenvolvimento adicional poderia ser realizado para filtrar as palavras de parada e apenas calcular a densidade das palavras de parada, o que é potencialmente uma melhor visualização para a pontuação de SEO.

Espero que tenha gostado deste artigo! Se você fez, fique à vontade para conferir meu blog, https://www.codewall.co.uk/

Até a próxima vez!



Fonte

Avalie este post

Clique nas estrelas

Média da classificação 0 / 5. Número de votos: 0

Nenhum voto até agora! Seja o primeiro a avaliar este post.

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *