Optimizing an embedded publication for search engines – Zmags Publicator Community

Note: This tutorial assumes that you are familiar with the basics of embedding the Viewer in your HTML pages.

One of the key components of hosting a publication on your site is to make sure that your publication page is optimised for search engines. By placing an embedded viewer on your existing website you automatically benefit from having all of the hard work you have already done in search engine optimisation as the publication will form part of your existing site structure.

Here is a simple example of how to optimize your publication more effectively with some tricks that we use internally.

1) First we need to setup our our basic viewer script on our html page with some basic DOCTYPE and META tags configured:

<!DOCTYPE html>
<html>
<head>
<title>Zmags Test Page</title>
<script type="text/javascript" src="http://api.viewer.zmags.com/viewer/viewer.js"></script>
</head>
<body>
<div id="myviewer" style="width:800px; height:600px;"></div>
<script>
var viewer = new com.zmags.api.Viewer();
viewer.setPublicationID("cce6e87c");
viewer.setParentElementID("myviewer");
viewer.setLocale("en_US");
viewer.show();
</script>

</body>
</html>

2) Next we need to configure the TITLE and the META tags within the HEAD area of our page.

The TITLE tag configures the Title of our page which is displayed on the browser window chrome and also in the heading of the search engine result. The META tags tell the search engine spiders about the content that is displayed on the page, some popular example tags to demonstrate this are:

<title>Gmail: Email from Google</title>
<title>Welcome to Facebook</title>
<title>Digital Publishing Software | Digital Publishing Platform by Zmags</title>
<meta name="description" content="7+ GB of storage, less spam, and mobile access.
Gmail is email that's intuitive, efficient, and useful. And maybe even fun.">
<meta name="description" content=" Facebook is a social utility that connects people with friends and
others who work, study and live around them. People use Facebook to keep up with friends, upload an
unlimited number of photos, post links and videos, and learn more about the people they meet." />
<meta name="description" content="Zmags, the industry leading digital publishing platform, offers a
rich set of capabilities, grouped in solutions for multiple markets." />

In the following way:

<!DOCTYPE html>
<html>
<head>
<title>xxx Digital Publication | The best online resource on xxxxx</title>
<meta name="description" content="This publication is aimed at providing you
with some fantastic information on xxxxx" />
<script type="text/javascript" src="http://viewer.zmags.com/js/viewer.js"></script>
</head>

<body>
<div id="myviewer" style="width:800px; height:600px;"></div>
<script>
var viewer = new com.zmags.api.Viewer();
viewer.setPublicationID("cce6e87c");
viewer.setParentElementID("myviewer");
viewer.setLocale("en_US");
viewer.show();
</script>
</body>
</html>

3) Next we need to use some of the optimisation code that we use in our standard viewer.zmags.com page on this page.

To do this you need to open up your publication on the viewer.zmags.com URL using the Standard URL which you can find in the publish section of your My Publications area:

Figure 2. Publish tab for a publication
Screenshot_2022-01-20_at_5.39.47_PM.png

To view the source code of a web page in Microsoft Internet Explorer, follow the below steps.
1) Open Internet Explorer
2) Click View
3) From the drop-down-menu click "Source"

Alternatively in Firefox you can access the source code by pressing CTRL + U

4) Next we need to grab the source code within the NOFRAMES tag at the bottom of the HTML page which contains some of the text of pages of the publication and also links to the internal pages of the publication. The code looks something like the following:

<noframes><br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam felis turpis, semper at rhoncus sit amet, suscipit a urna. Vestibulum tincidunt condimentum sapien sit amet ullamcorper. Nulla facilisi. Nam sagittis tempus auctor. Nulla nec tellus tellus. Etiam tristique tempus vulputate. Donec lorem leo, bibendum et lacinia congue, imperdiet nec tellus. Cras velit magna, placerat nec ultricies sed, tincidunt vitae eros. Morbi in tincidunt augue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum laoreet congue quam nec porttitor. Suspendisse molestie lacinia nunc at cursus. Proin ut sem neque.<br />
<br/>
Nulla dolor ligula, pharetra sit amet convallis quis, condimentum in ipsum. Curabitur eget purus metus. Aenean dapibus sodales nisi nec semper. Duis viverra enim at tortor commodo a varius orci pretium. Cras accumsan facilisis cursus. Integer blandit lectus sed nisi tempor tincidunt. Cras semper facilisis eros vitae congue. Curabitur tincidunt lorem ac dolor ultrices tempor. Pellentesque fermentum urna sit amet risus mattis venenatis. Vivamus a lectus eu odio sodales lobortis. Pellentesque faucibus, lacus id lobortis adipiscing, erat enim aliquet ipsum, id iaculis nunc lorem sit amet urna. Vivamus ultrices mollis neque, non tincidunt risus vehicula in. Maecenas blandit porttitor turpis eu semper. Praesent eleifend pulvinar augue, sed dapibus erat lacinia non. Donec rhoncus accumsan diam, non rutrum purus vehicula a. Ut ut justo magna, luctus auctor elit. <br /><a title="Technical Guide - BP 3 page 5" href="http://viewer.zmags.com/publication/b573c8fc?page=5">The Zmags platform is currently hosted on the Amaz</a>

<a title="Technical Guide - BP 3 page 7" href="http://viewer.zmags.com/publication/b573c8fc?page=7">Minimum PDF Version: Acrobat 6 (PDF 1.5) Maxi</a>
<a title="Technical Guide - BP 3 page 6" href="http://viewer.zmags.com/publication/b573c8fc?page=6">Zmags is cross browser compatible and works on bot</a>
<a title="Technical Guide - BP 3 page 10" href="http://viewer.zmags.com/publication/b573c8fc?page=10">Most of our customers creating their documents in-</a>
</noframes>

5) Next we need to change the URL links in the page to direct to our embedded viewer page that we are building like so:

<noframes><br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam felis turpis, semper at rhoncus sit amet, suscipit a urna. Vestibulum tincidunt condimentum sapien sit amet ullamcorper. Nulla facilisi. Nam sagittis tempus auctor. Nulla nec tellus tellus. Etiam tristique tempus vulputate. Donec lorem leo, bibendum et lacinia congue, imperdiet nec tellus. Cras velit magna, placerat nec ultricies sed, tincidunt vitae eros. Morbi in tincidunt augue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum laoreet congue quam nec porttitor. Suspendisse molestie lacinia nunc at cursus. Proin ut sem neque.<br />
<br/>Nulla dolor ligula, pharetra sit amet convallis quis, condimentum in ipsum. Curabitur eget purus metus. Aenean dapibus sodales nisi nec semper. Duis viverra enim at tortor commodo a varius orci pretium. Cras accumsan facilisis cursus. Integer blandit lectus sed nisi tempor tincidunt. Cras semper facilisis eros vitae congue. Curabitur tincidunt lorem ac dolor ultrices tempor. Pellentesque fermentum urna sit amet risus mattis venenatis. Vivamus a lectus eu odio sodales lobortis. Pellentesque faucibus, lacus id lobortis adipiscing, erat enim aliquet ipsum, id iaculis nunc lorem sit amet urna. Vivamus ultrices mollis neque, non tincidunt risus vehicula in. Maecenas blandit porttitor turpis eu semper. Praesent eleifend pulvinar augue, sed dapibus erat lacinia non. Donec rhoncus accumsan diam, non rutrum purus vehicula a. Ut ut justo magna, luctus auctor elit. <br />
<a title="Technical Guide - BP 3 page 5" href="http://vwww.domain.com/seo.html">The Zmags platform is currently hosted on the Amaz</a>
<a title="Technical Guide - BP 3 page 7" href="http://vwww.domain.com/seo.html">Minimum PDF Version: Acrobat 6 (PDF 1.5) Maxi</a>
<a title="Technical Guide - BP 3 page 6" href="http://vwww.domain.com/seo.html">Zmags is cross browser compatible and works on bot</a>
<a title="Technical Guide - BP 3 page 10" href="http://vwww.domain.com/seo.html">Most of our customers creating their documents in-</a>
</noframes>

6) Finally we need to copy and paste the NOFRAMES content into the bottom of our HTML page above the end BODY tag, for a complete overview of this please see the complete example below.

Example: Optimizing an embedded publication for search engines

If you are looking to build your own test version the code provided below should be used. Remember to remove any commenting in order to activate the code. The first snippet should be placed in the <head> tags:

  <title>xxx Digital Publication | The best online resource on xxxxx</title>
  <meta name="description" content="This publication is aimed at providing you with some fantastic information on xxxxx" />
  <script type="text/javascript" src="http://api.viewer.zmags.com/viewer/viewer.js"></script>

The next set of code should be placed in the <body> tags:

<div id="myviewer" style="width:800px; height:600px;"></div>

  <script>
    
    var viewer = new com.zmags.api.Viewer();
    viewer.setPublicationID("cce6e87c");
    viewer.setParentElementID("myviewer");
    viewer.setLocale("en_US");
    viewer.show();
   
  </script>  

  <noframes><br />
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam felis turpis, semper at rhoncus sit amet, suscipit a urna. Vestibulum tincidunt condimentum sapien sit amet ullamcorper. Nulla facilisi. Nam sagittis tempus auctor. Nulla nec tellus tellus. Etiam tristique tempus vulputate. Donec lorem leo, bibendum et lacinia congue, imperdiet nec tellus. Cras velit magna, placerat nec ultricies sed, tincidunt vitae eros. Morbi in tincidunt augue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum laoreet congue quam nec porttitor. Suspendisse molestie lacinia nunc at cursus. Proin ut sem neque.<br />
    <br/>
    Nulla dolor ligula, pharetra sit amet convallis quis, condimentum in ipsum. Curabitur eget purus metus. Aenean dapibus sodales nisi nec semper. Duis viverra enim at tortor commodo a varius orci pretium. Cras accumsan facilisis cursus. Integer blandit lectus sed nisi tempor tincidunt. Cras semper facilisis eros vitae congue. Curabitur tincidunt lorem ac dolor ultrices tempor. Pellentesque fermentum urna sit amet risus mattis venenatis. Vivamus a lectus eu odio sodales lobortis. Pellentesque faucibus, lacus id lobortis adipiscing, erat enim aliquet ipsum, id iaculis nunc lorem sit amet urna. Vivamus ultrices mollis neque, non tincidunt risus vehicula in. Maecenas blandit porttitor turpis eu semper. Praesent eleifend pulvinar augue, sed dapibus erat lacinia non. Donec rhoncus accumsan diam, non rutrum purus vehicula a. Ut ut justo magna, luctus auctor elit. <br />
    <a title="Technical Guide - BP 3 page 5" href="http://vwww.domain.com/seo.html">The Zmags platform is currently hosted on the Amaz</a>
    <a title="Technical Guide - BP 3 page 7" href="http://vwww.domain.com/seo.html">•   Minimum PDF Version: Acrobat 6 (PDF 1.5)•  Maxi</a>
    <a title="Technical Guide - BP 3 page 6" href="http://vwww.domain.com/seo.html">Zmags is cross browser compatible and works on bot</a>
    <a title="Technical Guide - BP 3 page 10" href="http://vwww.domain.com/seo.html">Most of our customers creating their documents in-</a>
    </noframes>