Generate SEO-friendly URL Slugs From Titles - TitleSeoUrl

Generate SEO-friendly URL Slugs From Titles - TitleSeoUrl

Yet another URL slug creation plugin for jQuery that lets you generate an SEO-friendly URL slug as you type a page title.

Supports multiple languages such as English, Spanish, French and much more. 

Licensed under the Apache License, Version 2.0.

1. Create an empty container in which you want to output the SEO-friendly URL slug.

<input type="text" id="editurl" placeholder="Article Title Here">
<div id="txturl"></div>

2. Insert the latest version of jQuery library and the jQuery TitleSeoUrl plugin's JavaScript into the document.

<script src="https://code.jquery.com/jquery-1.12.4.min.js"
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" 
        crossorigin="anonymous">
</script>
<script src="jquery.titleseourl.js"></script>

3. Initialize the plugin and override the default domain name:

$('#editurl').titleSeoUrl({
  domain: 'https://www.jqueryscript/',
  urlbox: '#txturl'
});

4. Add a subdir to the URL slug.

$('#editurl').titleSeoUrl({
  domain: 'https://www.jqueryscript/',
  urlbox: '#txturl',
  subdir: 'plugin/'
});

5. Specify the HTML file extension.

$('#editurl').titleSeoUrl({
  domain: 'https://www.jqueryscript/',
  urlbox: '#txturl',
  format: '.htm', // default: .html
});

6. Customize the URL separator:

$('#editurl').titleSeoUrl({
  domain: 'https://www.jqueryscript/',
  urlbox: '#txturl',
  separator: '-'
});

7. Specify the max length of the URL slug.

$('#editurl').titleSeoUrl({
  domain: 'https://www.jqueryscript/',
  urlbox: '#txturl',
  max: ''
});

8. Special characters supported.

$('#editurl').titleSeoUrl({
  domain: 'https://www.jqueryscript/',
  urlbox: '#txturl',
  special: {  
    ą:"a",Ą:"A",ę:"e",Ę:"E",ó:"o",Ó:"O",ś:"s",Ś:"S",ł:"l",Ł:"L",
    ż:"z",Ż:"Z",ź:"z",Ź:"Z",ć:"c",Ć:"C",ń:"n",Ń:"N",č:"c",ď:"d",
    ň:"n",ř:"r",š:"s",ť:"t",Š:"S",Œ:"O",Ž:"Z",š:"s",œ:"o",ž:"z",
    Ÿ:"Y",ÿ:"y",µ:"U",À:"A",Á:"A",Â:"A",Ã:"A",Ä:"A",Å:"A",Æ:"A",
    Ç:"C",È:"E",É:"E",Ê:"E",Ë:"E",Ì:"I",Í:"I",Î:"I",Ï:"I",Ð:"D",
    Ñ:"N",Ò:"O",Ô:"O",Õ:"O",Ö:"O",Ø:"O",Ù:"U",Ú:"U",Û:"U",Ü:"U",
    Ý:"Y",ß:"s",à:"a",á:"a",â:"a",ã:"a",ä:"a",å:"a",æ:"a",ç:"c",
    è:"e",é:"e",ê:"e",ë:"e",ì:"i",í:"i",î:"i",ï:"i",ð:"o",ñ:"n",
    ò:"o",ô:"o",õ:"o",ö:"o",ø:"o",ù:"u",ú:"u",û:"u",ü:"u",ý:"y",
    '¥':"Y",'&':"and"
  },
});

This awesome jQuery plugin is developed by tedirghazali. For more Advanced Usages, please check the demo page or visit the official website.

  • Publication date: 08.05.2018
  • Source