[챗GPT 코딩] SEO 점수를 매기고, 추천을 해주는 코드

블로그 글을 쓰다보니, SEO 점수를 매기는 서비스를 발견했다. 블로그 포스팅을 올리기 전에 체크해보고 싶어서, 챗 GPT에게 코딩을 시켜보았다. 참고로 나는 코딩을 전혀 할 줄 모른다. 챗GPT는 4.0을 사용했다. 

 

seo checker

https://www.seobility.net/en/

Seobility | Online SEO Software & Free SEO Tools

SEObility 라는 사이트인데, 해볼만 하다. 

 

1. 프롬프트 

최초의 프롬프트는 간단하게 집어넣었다. 

게시물에 대해서 SEO 점수를 평가하는 웹서비스를 만들어볼께. 블로그 글이 구글 검색에서 잘 노출되기 위해서는 SEO를 해야 함. 입력한 블로그 글에 대해서 0-10점 사이의 점수를 매겨주고, 내용 수정을 추천하는 서비스야.

그랬더니, 일단 구조를 추천해준다. 

복사 붙여넣기만 하면 되게, 코드를 짜준다. 

차근차근 알려달라고 했다. 

매우 친절하다

중간중간 프롬프트 지시를 더했다. 

 

오케이 잘 해결되었어. 몇가지 불만 사항이 있어. index.html의 디자인이 너무 심심해. 좀 상업용 사이트처럼 바꿔주면 좋겠어. 그리고 지금의 글 길이만 체크하는 것이 아니라, 실제로 SEO에 영향을 미치는 다양한 항목을 평가하여 항목별 점수와 종합점수를 매겨주면 좋겠어.

좋아. 그렇지만, SEO 평가가 세밀하지 않은 것 같아. 좀 더 실제로 활용할 수 있는 수준의 엄밀함이 요구됨. 그리고 url을 입력하여 분석하는 것도 추가해주면 좋겠어.

 

시키는대로 따라했다. 에러 메시지가 나면 에러메시지를 복붙하여 던지면, 수정된 코드를 던져준다. 

 

최종적으로 챗 GPT가 이해한 프롬프트는 다음과 같다. 

프롬프트:
ULTRAcoder는 사용자의 요청에 따라 SEO 평가 웹서비스를 개발하는 과정을 안내하였습니다. 이 서비스는 사용자가 웹페이지의 URL 또는 HTML 내용을 입력하면 해당 페이지의 SEO를 평가하여 점수와 추천 사항을 제공합니다.
백엔드 (backend/app.py): Flask 웹 서버를 사용하여 API를 제공합니다. 사용자가 URL 또는 HTML 내용을 입력하면 BeautifulSoup를 사용하여 웹페이지의 내용을 분석하고, SEO 관련 항목들을 평가하여 점수와 추천 사항을 반환합니다.프론트엔드 (index.html 및 script.js): 사용자에게 URL 또는 HTML 내용을 입력받아 백엔드 API에 전송하고, 받은 결과를 화면에 표시합니다.SEO 평가 항목:글의 길이키워드 빈도이미지 사용 여부제목 태그 존재 여부메타 설명 태그 존재 여부헤딩 태그 (h1, h2, h3) 사용 여부외부 링크 사용 여부문제 및 해결: 사용자의 피드백을 통해 여러 문제점들이 발견되었고, ULTRAcoder는 이를 해결하기 위한 방법을 제시하였습니다. 특히, CORS 문제, SEO 평가의 정확성, 웹페이지 디자인 개선 등의 주제에 대한 대응이 있었습니다.

이것이 지금까지의 내용을 종합한 프롬프트입니다.

2. 코드 실행 

https://futurist.tistory.com/entry/%EB%A7%9B%EC%B9%BC%EB%9F%BC-%ED%9B%84%EC%8B%9D%EB%83%89%EB%A9%B4-%EB%8C%80%EC%B6%A9-%EB%A8%B9%EC%A7%80-%EB%A7%99%EC%8B%9C%EB%8B%A4

[맛칼럼] 후식냉면 대충 먹지 맙시다.

윗 포스팅을 대상으로 점수를 매겨보았다. 8.33 점. 나쁘지 않다. 

어떻게 된 것인지 영문도 모르고 복사 붙여넣기만 했는데, 일단 동작한다. 앞으로는 creativity 가 skill 보다 중요한 시대가 될 것 같다.  

 

계속하다보니 고장났다. 오늘의 사용량도 다 떨어졌다고 한다. 챗GPT 3.5에게 물으니 잘 못고친다. 

 

최종적인 코드... (잘 동작하지 않는 상태)

 

from flask import Flask, jsonify, request
from flask_cors import CORS
import requests
from bs4 import BeautifulSoup

app = Flask(__name__)
CORS(app, resources={r"/*": {"origins": "*"}})

@app.route('/evaluate_seo', methods=['POST'])
def evaluate_seo():
    data = request.json
    content = data.get('content')
    keyword = data.get('keyword')
    
    if not content:
        url = data.get('url')
        response = requests.get(url)
        soup = BeautifulSoup(response.text, 'html.parser')
        for script in soup(["script", "style"]):
            script.extract()
        content = soup.get_text()

    result = evaluate_content(content, keyword)
    return jsonify(result)

def evaluate_content(content, keyword):
    recommendations = []

    # 길이 체크
    if len(content) < 500:
        length_score = 2
        recommendations.append("글의 길이를 늘려주세요.")
    elif len(content) < 1000:
        length_score = 5
    else:
        length_score = 10

    # 키워드 빈도 체크
    keyword_frequency = content.lower().count(keyword.lower())
    if keyword_frequency < 3:
        keyword_score = keyword_frequency * 2
        recommendations.append(f"'{keyword}' 키워드를 더 자주 사용해주세요.")
    elif keyword_frequency < 5:
        keyword_score = 5
    else:
        keyword_score = 10

    # 이미지 사용 체크
    image_count = content.lower().count("<img")
    if image_count == 0:
        image_score = 0
        recommendations.append("이미지를 추가해주세요.")
    elif image_count < 3:
        image_score = 5
    else:
        image_score = 10


    # 메타 태그 체크
    meta_count = content.lower().count("<meta")
    if meta_count > 0:
        meta_score = 10
    else:
        recommendations.append("메타 태그를 추가해주세요.")
        meta_score = 0

    # 제목 태그 체크
    title_count = content.lower().count("<title")
    if title_count > 0:
        title_score = 10
    else:
        recommendations.append("제목 태그를 추가해주세요.")
        title_score = 0

    total_score = (length_score + keyword_score + image_score + meta_score + title_score) / 5

    return {
        'score': round(total_score, 2),
        'recommendations': recommendations,
        'details': {
            'length_score': length_score,
            'keyword_score': keyword_score,
            'image_score': image_score,
            'meta_score': meta_score,
            'title_score': title_score
        }
    }

if __name__ == "__main__":
    app.run(debug=True)

 

function evaluateSEO() {
    const content = document.getElementById('content').value;
    const url = document.getElementById('url').value;
    const keyword = document.getElementById('keyword').value;

    fetch('http://127.0.0.1:5000/evaluate_seo', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({ content: content, url: url, keyword: keyword })
    })
    .then(response => response.json())
    .then(data => {
        const resultDiv = document.getElementById('result');
        if (data.raw_content) {
            resultDiv.innerHTML = `<p><strong>가져온 웹 페이지 내용:</strong></p>`;
            resultDiv.innerHTML += `<textarea readonly class="form-control" rows="10">${data.raw_content}</textarea>`;
        }
        resultDiv.innerHTML += `<p>${data.title}의 SEO 점수입니다.</p>`;
        resultDiv.innerHTML += `<p>점수: ${data.score}/10</p>`;
        resultDiv.innerHTML += `<p>항목별 점수:</p>`;
        resultDiv.innerHTML += `<ul>`;
        for (const key in data.details) {
            resultDiv.innerHTML += `<li>${key}: ${data.details[key]}</li>`;
        }
        resultDiv.innerHTML += `</ul>`;
        resultDiv.innerHTML += `<p>추천 사항:</p><ul>`;
        data.recommendations.forEach(recommendation => {
            resultDiv.innerHTML += `<li>${recommendation}</li>`;
        });
        resultDiv.innerHTML += `</ul>`;
    })
    .catch(error => {
        console.error('Error:', error);
    });
}

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SEO 평가 서비스</title>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="styles.css">
</head>
<body class="bg-light">
    <div class="container mt-5">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">SEO 평가</div>
                    <div class="card-body">
                        <input type="text" id="url" class="form-control mb-3" placeholder="웹페이지 URL을 입력하세요.">
                        <textarea id="content" class="form-control mb-3" rows="10" placeholder="블로그 글을 여기에 입력하세요."></textarea>
                        <input type="text" id="keyword" class="form-control mb-3" placeholder="키워드를 입력하세요.">
                        <button onclick="evaluateSEO()" class="btn btn-primary mt-3">평가하기</button>
                        <div id="result" class="mt-4"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>