Google SERP/Snippet Preview Plugin With jQuery - SEO Preview

Google SERP/Snippet Preview Plugin With jQuery - SEO Preview

A great jQuery based Google SERP Snippet Preview Tool for SEO that allows bloggers and webmasters to optimize and preview what your page (page title, url and meta description) look like when shown in the Google search results. Similar to the Wordpress Yoast plugins's snippet preview tool.

1. Load the latest version of jQuery JavaScript library (slim build is recommended) and the jQuery SEO Preview plugin's files in the document.

<link href="css/jquery-seopreview.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" 
        integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" 
        crossorigin="anonymous">
</script>
<script src="js/jquery-seopreview.js"></script>

2. Insert the following text fields into the web page that allows the user to edit the SERP Snippet information: page title, url and meta description.

<label for="meta-title">Page Title</label>
<input type="text" id="meta-title" value="Page Title" placeholder="Meta Title">
<label for="meta-url">Page URL</label>
<input type="text" id="meta-url" value="https://www.jqueryscript.net/" placeholder="Meta Webiste URL">
<label for="meta-desc">Meta Description</label>
<textarea id="meta-desc" placeholder="Meta Description">
8000+ latest Free jQuery plugins with examples and tutorials for web &amp; mobile developers.
</textarea>

3. Create an empty container to place the preview box.

<div id="seopreview"></div>

4. Enable the Google SERP Snippet Preview Tool.

$(document).ready(function() {
  $("#seopreview").seoPreview({
    metadata: {
      title: $('#meta-title'),
      url: $('#meta-url'),
      desc: $('#meta-desc')
    }
  });
});

5. More plugin options to customize the Google SERP Snippet Preview Tool.

$(document).ready(function() {
  $("#seopreview").seoPreview({
    metadata: {
      base_domain: "",
      use_slug: false
    },
    google: {
      label: true,
      label_text: "Google-view",
      date: true,
      title_limit: 60,
      url_limit: 72,
      desc_limit: 300
    },
    styled: true,
    tabs: true
  });
});

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

  • Publication date: 06.01.2018
  • Source