Embed SERPs into your Website
This JavaScript widget (a single include file) enables you to easily embed previews of Google Search Results on your website. In its simplest form it can be used to quickly show people what a page may look like in the search results. In its more advanced form it can be integrated with editors to enable dynamic previewing as people type.
It was inspired by the popularity of my Search Preview Tool which is now powered by this widget.
The Include file
<script src="https://websiteadvantage.com.au/webSiteAdvantage.OrganicSearchResult/1.3.1/webSiteAdvantage.OrganicSearchResult.min.js" type="text/javascript" async></script>
The widget uses one include file which can be placed anywhere on the page. It uses the async attribute so does not slow your page down.
Simple Example - Preview the current page
<span class="websiteadvantage-organicsearchresult"></span>
A search result preview is added to all elements with the class websiteadvantage-organicsearchresult. The widget will default to the current pages title and meta description. Like this...
Standard Example - Preview your own settings
<span class="websiteadvantage-organicsearchresult"
data-url="https://websiteadvantage.com.au/TestUrl"
data-title="The title is set via the data-title attribute"
data-description="The description is set via the data-description attribute">
</span>Data attributes can be used to set the properties of the search result preview. They can also be dynamically set or read by code.
Full Example - Preview Rich Snippets
<span class="websiteadvantage-organicsearchresult"
data-url="https://websiteadvantage.com.au/aaaaa/bbbbb/gggggg/tttttt/ffffff/wwwwwww"
data-title="Expert Adelaide SEO Services from Web Site Advantage Bla Bla Bla"
data-description="Web Site Advantage is all about providing advice and support in giving your business an advantage over your competitors. Find out more. This description is longer than the space."
data-date="Jan 1st, 2015"
data-rating="4.5"
data-richtext="Super Cool"
data-searchterm="advantage SEO bbbbb bla tttttt"
data-image="https://websiteadvantage.com.au/Media/Tony-McCreath-2.jpg">
</span>Using all available search result properties you can create a very rich snippet.
Editor Example - Dynamically Edit the Preview
<span class="websiteadvantage-organicsearchresult"
data-url-source="urlSource"
data-url-ifblank="http://defaulturl.com/"
data-url-prefix="http://base-url-when-source-is-relative.com"
data-title-source="titleSource"
data-title-ifblank="Show this if there is no title specified in the source"
data-description-source="descriptionSource"
data-date-source="dateSource"
data-description-ifblank="Show this if there is no description specified in the source"
data-rating-source="ratingSource"
data-richtext-source="richtextSource"
data-searchterm-source="searchtermSource"
data-image-source="imageSource">
</span>
<table>
<tr><td>Title:</td><td><input type="text" name="titleSource" id="titleSource" value="Title from Source" /></td></tr>
<tr><td>Url:</td><td><input type="text" name="urlSource" id="urlSource" value="https://websiteadvantage.com.au/fromtextbox" /></td></tr>
<tr><td>Description:</td><td><input type="text" name="descriptionSource" id="descriptionSource" value="Description from Source" /></td></tr>
<tr><td>Date:</td><td><input type="text" name="dateSource" id="dateSource" value="Jan 1st, 2016" /></td></tr>
<tr><td>Rating:</td><td>
<select id="ratingSource" name="ratingSource">
<option value="-">No Rating</option>
<option value="0.0">Rating 0.0</option>
<option value="0.5">Rating 0.5</option>
<option value="1.0">Rating 1.0</option>
<option value="1.5">Rating 1.5</option>
<option value="2.0">Rating 2.0</option>
<option selected value="2.5">Rating 2.5</option>
<option value="3.0">Rating 3.0</option>
<option value="3.5">Rating 3.5</option>
<option value="4.0">Rating 4.0</option>
<option value="4.5">Rating 4.5</option>
<option value="5.0">Rating 5.0</option>
</select>
</td></tr>
<tr><td>Rich Text:</td><td><input type="text" name="richtextSource" id="richtextSource" value="Rich Text from Source" /></td></tr>
<tr><td>Search Term:</td><td><input type="text" name="searchtermSource" id="searchtermSource" value="Search Term from Source" /></td></tr>
<tr><td>Image:</td><td><input type="text" name="imageSource" id="imageSource" value="https://websiteadvantage.com.au/Media/Tony-McCreath-2.jpg" /></td></tr>
</table>Source attributes can be used to bind search result properties to input/select tags via their IDs. That makes it easy to integrate it with an editor. Have a go and edit this preview.
| Title: | |
| Url: | |
| Description: | |
| Date: | |
| Rating: | |
| Rich Text: | |
| Search Term: | |
| Image: |
Code Example
<span id="websiteadvantage-organicsearchresult1"></span>
<script type="text/javascript">
//<![CDATA[
// These two lines set up a way to make your code execute once the include file is loaded. This lets us use async and speed up the page.
var webSiteAdvantage = webSiteAdvantage || {};
webSiteAdvantage.organicSearchResultOnLoadedQueue = webSiteAdvantage.organicSearchResultOnLoadedQueue || [];
webSiteAdvantage.organicSearchResultOnLoadedQueue.push(function () {
// Add code using the widget here
var organicsearchresult1Element = document.getElementById("websiteadvantage-organicsearchresult1");
var organicsearchresult1 = webSiteAdvantage.createOrganicSearchResult(organicsearchresult1Element);
organicsearchresult1.title = "Title set via code.";
organicsearchresult1.description = "Description set via code";
organicsearchresult1.rating = 3.0;
organicsearchresult1.searchterm = "via code";
});
//]]>
</script>More advanced interactions can be done by creating and/or accessing the OrganicSearchResult object via code. An OrganicSearchResult object can be created on an element in the page. Then its properties can be accessed or set. You can also get hold of the dynamically created OrganicSearchResult objects from the examples above via the OrganicSearchResult attribute of the element used.