Share code tạo URL chuẩn SEO cho blog/website

Hướng dẫn làm trang tạo url chuẩn SEO cho blog/website

Chào mừng các bạn đã đến với bài viết tiếp theo của Code Pro. Gần đây, bên mình có cho ra mắt một công cụ tối ưu hoá URL chuẩn SEO bằng cách nhập tiêu đề. Có khá nhiều bạn quan tâm và bên cạnh đó một số bạn hỏi xin source để làm công cụ riêng cho mình.

Share code tạo URL chuẩn SEO cho blog/website

Ban đầu, mình cũng không định share đâu vì code này mình cũng lấy từ bên khác về và chỉnh sửa. Bên đó họ không share code nên mình cũng ngại không dám share. Nhưng mà thấy nhiều bạn rip quá nên thôi nay mình mạn phép share luôn :))

Source:

Copy toàn bộ code sau và thêm vào blog/website!

<style>
    a.button {
        border-radius: 5px;
        color: #fff;
    }
    
    #input {
        border-radius: 5px;
    }
    
    #copyBtn {
        margin-right: 10px;
        border-radius: 5px;
    }
    
    #resetBtn {
        opacity: 0;
        position: absolute;
        cursor: pointer;
        border-radius: 5px;
    }
    
    .nhaptieude {
        width: 100%;
        border-radius: 5px;
    }
    
    .xuattieude {
        width: 100%;
        border-radius: 5px;
        margin-bottom: 20px!important;
    }
    
    .nhaptieude,
    .xuattieude {
        position: relative;
        z-index: 2;
        margin-bottom: 0;
        height: 50px;
        font-size: 16px;
        line-height: 1.42857143;
        color: #555;
        background-color: #fff;
        background-image: none;
        border: 1px solid #ccc;
        text-indent: 10px;
    }
</style>
<h1>Tạo URL từ tiêu đề bài viết chuẩn SEO</h1>
<div>Mọi tài nguyên được lưu trữ trên Internet đều có địa chỉ riêng. Những địa chỉ đó được gọi là đường dẫn URL.</div>
<br/>
<div>URL thân thiện hay friendly URL mô tả chính xác trang bằng các từ khóa giúp người dùng và các công cụ tìm kiếm dễ nhận biết.</div>
<br/>
<div>Dưới đây là công cụ tối ưu URL chuẩn SEO từ tiêu đề bài viết!</div>
<center>
    <h2>Tạo URL</h2>
</center>
<form name="tbtitle">
    <h3>Input</h3>
    <input autofocus="" class="nhaptieude" id="text" name="text" onblur="if(this.value=='')this.value=this.defaultValue;" onfocus="if(this.value==this.defaultValue)this.value='';" onkeydown="CountLeft(this.form.text, this.form.left,8000);" onkeyup="CountLeft(this.form.text,this.form.left,8000);" value="Nhập tiêu đề bài viết vào đây..." />
    <h3>Output</h3>
    <input class="xuattieude" id="result" name="result" readonly="" />
    <a class="button" id="copyBtn" type="button" value="COPY">Copy</a>
    <a class="button">
        <input id="resetBtn" type="reset" value="RESET" />Reset</a>
</form>
<script>
    document.getElementById('text').addEventListener('keyup', function() {
        var _0x7633x1 = tbtitle.text.value;
        _0x7633x1 = _0x7633x1.toLowerCase();
        _0x7633x1 = _0x7633x1.replace(/à|á|ạ|ả|ã|â|ầ|ấ|ậ|ẩ|ẫ|ă|ằ|ắ|ặ|ẳ|ẵ/g, 'a');
        _0x7633x1 = _0x7633x1.replace(/è|é|ẹ|ẻ|ẽ|ê|ề|ế|ệ|ể|ễ/g, 'e');
        _0x7633x1 = _0x7633x1.replace(/ì|í|ị|ỉ|ĩ/g, 'i');
        _0x7633x1 = _0x7633x1.replace(/ò|ó|ọ|ỏ|õ|ô|ồ|ố|ộ|ổ|ỗ|ơ|ờ|ớ|ợ|ở|ỡ/g, 'o');
        _0x7633x1 = _0x7633x1.replace(/ù|ú|ụ|ủ|ũ|ư|ừ|ứ|ự|ử|ữ/g, 'u');
        _0x7633x1 = _0x7633x1.replace(/ỳ|ý|ỵ|ỷ|ỹ/g, 'y');
        _0x7633x1 = _0x7633x1.replace(/đ/g, 'd');
        _0x7633x1 = _0x7633x1.replace(/\[|\]|\(|\)|'|"|`|\\|%|!|#|\$|&|=|~|\^|<|>|\?|\/|\{|\}|\*|\||@|-|:|;/g, '');
        _0x7633x1 = _0x7633x1.replace(/,|\.| |_|\+/g, '-');
        tbtitle.result.value = _0x7633x1
    });
    document.getElementById('copyBtn').addEventListener('click', function() {
        document.getElementById('result').select();
        document.execCommand('copy')
    });

    function CountLeft(_0x7633x3, _0x7633x4, _0x7633x5) {
        if (_0x7633x3.value.length > _0x7633x5) {
            _0x7633x3.value = _0x7633x3.value.substring(0, _0x7633x5)
        } else {
            _0x7633x4.value = _0x7633x5 - _0x7633x3.value.length
        }
    }
</script>
  

Lời kết

Trên đây là toàn bộ code tạo URL chuẩn SEO cho blog/website. Nếu có bất cứ thắc mắc hay khiếu nại về bản quyền hãy comment ngay phía dưới cho mình biết nhé. Chúc các bạn một ngày tốt lành!

Copyright @ Code Pro