Adding a title tag with text and variable to a masterpage

afredrick · Post by **afredrick** » Mon Jun 16, 2014 10:49 am

I am trying to automate a <title></title> tag that includes text and an H1 variable for HTML5 output.

My project is single-sourced (11 different outputs) and localized, so up until now I have left the Topic Properties Topic Title blank so that it defaults to the first H1. However, for SEO (Search Engine Optimization) purposes I'd like to append the title with the product name.
<title> < H1> | Product</title>

I have tried adding this to the masterpage, which did not work.
<title>Product Name Web Client Help - <MadCap:variable name="SLXRunningHeading.Running H/F 1" /> </title>

I also tried the new "Add meta tags to content" option on the HTML 5 target, Advanced tab, but it will not allow me to save the target with non "meta" tags. I even tried to force it by adding it to the target file using the Text Editor and it adds the text, but does not convert the variable.

Does anyone have any suggestions?

Post by **doc_guy** » Mon Jun 16, 2014 11:02 am

If you edit the HTML5 skin file, on the General Tab there is a "Caption:" option.

Set your product name as the caption.

When you generate HTML5 output, Flare uses this Caption to form the title in the format:

<Product TItle> | <Topic Title>

I wish it were the other way, with the topic title first (which is what you're looking for too), but this is a simple fix that gives you both with minimal effort.

afredrick · Post by **afredrick** » Mon Jun 16, 2014 12:47 pm

Thank you! I didn't even think about the skin. <slapping my forehead>

I updated the HTML 5 Caption and sure enough now the topic title on the browser window shows the Caption | Title. However it doesn't appear to change the <title> tag content. My content has not been released yet, so I am unable to preview how the topic will appear in a Google search, but do you know if Google will use the <title> tag or the Caption | Topic Title?

Thanks!

Post by **doc_guy** » Mon Jun 16, 2014 1:26 pm

Very good question. I don't know.

The HTML5 output is a page that contains an iframe. The main page contains all the TOC stuff, (the tabs on the left), and the topic tool bar. The iframe contains the topic itself.

The <title> attribute for the main page is whatever you put in your HTML5 skin, per our earlier conversation.

The <title> attribute for the iframe page is the name of the topic.

Somehow the browser concatonates these together putting the two titles together into the browser title bar. How this is recognized by the search engines is a really good question.

Kt_123 · Post by **Kt_123** » Tue Jun 28, 2016 4:36 am

doc_guy wrote:If you edit the HTML5 skin file, on the General Tab there is a "Caption:" option.

Set your product name as the caption.

When you generate HTML5 output, Flare uses this Caption to form the title in the format:

<Product TItle> | <Topic Title>

I wish it were the other way, with the topic title first (which is what you're looking for too), but this is a simple fix that gives you both with minimal effort.

I am looking for something like <Topic Title> | <Product Title>

I am able to get it if I update the Topic Title attribute in Topic Properties. But the Product Title appears in the Breadcrumbs. I do not want the product title to appear in the Breadcrumbs.

Is it possible to do that? I am using Flare 11 and creating HTML5 Help. I do not want <Product Title> | <Topic Title>.

Corinna · Post by **Corinna** » Thu Mar 23, 2017 10:04 am

I hope it's ok to revive an old thread.

I've had a similar problem: the text added to the title tag was shown in the breadcrumbs section.

CSS pseudo-element "after::" didn't work, but I've found a simple solution using jQuery:

Code: Select all

<?xml version="1.0" encoding="utf-8"?>
    <head>
	<title>[%=Heading.Level1%]</title>
        <!-- add reference to jQuery file -->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>		
    </head>
    <body>
         <!-- add script to add standard text to title tag of topic -->
       	<script>
		$("title").append(" | CompanyName Online Help");		
	</script>
	<h1>Topic Title</h1>
        <p>text</p>
    </body>
</html>

This solution doesn't use a variable for the company name, but I think using more jQuery or conditions (for the entire script part) will do the trick.

I've put the jQuery script into a snippet and added it to my master pages to reduce copy-and-paste.

MadCap Software Forums

Adding a title tag with text and variable to a masterpage

Adding a title tag with text and variable to a masterpage

Re: Adding a title tag with text and variable to a masterpage

Re: Adding a title tag with text and variable to a masterpage

Re: Adding a title tag with text and variable to a masterpage

Re: Adding a title tag with text and variable to a masterpag

Re: Adding a title tag with text and variable to a masterpag