Google Snippet & Facebook Link Preview Plugin With jQuery - SEO Preview

A great jQuery based Google Snippet and Facebook Link 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 and Facebook pages.. Similar to the Wordpress Yoast plugins's snippet preview tool.

How to use it:

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>

<label for="meta-featured-image">Featured Image URL</label>
<input type="text" id="meta-featured-image" value="featured.jpg" placeholder="Featured Image URL">

3. Create empty containers to place the Google and Facebook preview boxes.

<h6>Google Preview</h6>
<div id="seopreview-google"></div>
<h6>Facebook Preview</h6>
<div id="seopreview-facebook"></div>

4. Enable the SEO Preview Tool.

$.seoPreview({
  google_div: "#seopreview-google",
  facebook_div: "#seopreview-facebook",
  metadata: {
    title: $('#meta-title'),
    desc: $('#meta-desc'),
    url: {
      full_url: $('#meta-url')
    }
  },
  google: {
      show: true,
      date: false
  },
  facebook: {
      show: true,
      featured_image: $('#meta-featured-image')
  }
});

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

$.seoPreview({
  google_div: "#seopreview-google",
  facebook_div: "#seopreview-facebook",
  metadata: {
    title: "Page title",
    desc: "Page desc",
    url: {
      full_url: "Page Url",
      use_slug: false,
      base_domain: "",
      auto_dash: true
    }
  },
  google: {
    show: true,
    date: true
  },
  facebook: {
    show: true,
    featured_image: ""
  }
});

Change log:

2018-01-07

• Added Facebook link preview

---

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