Adding HTML meta tags for Search Engine Optimization | HCL Digital Experience
Search engine optimization (SEO) focuses on improving the visibility of a page or website in search engine results. A basic technique of SEO is adding HTML title and meta tags to your page source. These meta tags are used to define description information and other metadata that search web engines and crawlers can use when they create search indexes and collections. When you include content in a page with a web content viewer, you can improve the search engine optimization of the page by adding title and meta tags with values derived from the web content itself.
About this task
By default, the HTML title for a page is defined by the page title in the portal. However, when you add a web content viewer to a page to render web content, you can override the value that is used for the HTML title. For metadata tags to be included as portlet preferences, you must set a custom HTML title so that only one portlet can contribute the metadata to the head section. If this default behavior does not suit your requirements, you can override it as described in step 2.d of the following procedure.
With the Page Display Title field in the portlet settings for the viewer, you can define an HTML title that better reflects the content on the page. You can even have the viewer pull the title directly from the rendered content.
Procedure
- Select one web content viewer to be the primary viewer
on the page. Click Edit Shared Settings, and
select a value for the Page Display Title field
in the portlet settings for the viewer.
To override the HTML title, you must select a value other than Use default title. If you want the title value to come directly from the web content that is rendered by the viewer, select Select from content. This setting uses the value of the Display title field for the content item in Web Content Manager.
After you save the changes, the page header is updated with the new title value. For example:<head> <title>Display title of the rendered web content</title> </head>
- Create portlet preferences for each meta tag that you want
to add to the page header.Each meta tag is defined by a pair of portlet preferences:
meta.tag.name.suffix
identifies the name of the meta tag (for example,keywords
).meta.tag.content.suffix
identifies the value of the meta tag.
meta.tag.attribute.suffix.
The suffix portion of each preference is used to associate a name preference with its related value preference. The suffix can be any value while it is unique across the preferences.
There are two ways you can add portlet preferences:- The Manage Portlets portlet of the administration interface. Locate the instance of the web content viewer you want to modify, and select the Configure portlet icon.
- The XML configuration interface. Export the page that contains the instance of the web content viewer you want to modify. Edit the exported XML file with the meta tags you want to add, and update the page by using the XML file along with the xmlaccess command.
Examples
- Setting the meta tag value with the user who created the rendered
content:
Result:meta.tag.name.1=DC.creator meta.tag.content.property.1=Creator
<meta name=”DC.creator” content=”content admin”/>
- Setting the meta tag value with preset text:
Result:meta.tag.name.1=DC.publisher meta.tag.content.text.1=IBM
<meta name=”DC.publisher” content=”IBM”/>
- Setting multiple meta tag values with the default value for the
author and the value of the text element
descelement
in the rendered content:
Result:meta.tag.name.1=author meta.tag.name.2=description meta.tag.content.element.2=descelement
<meta name=”author” content=”content author”/> <meta name=”description” content=”Information about IBM”/>
- Setting the meta tag with an
http-equiv
attribute and a value of the date that the rendered content was last modified:
Result:meta.tag.name.1=last-modified meta.tag.attribute.1=http-equiv meta.tag.content.property.1=LastModifiedDate
<meta http-equiv=”last-modified” content=”Mon, 01 Aug 2011 13:45:57 GMT”/>
- Setting the meta tag and with a scheme attribute and a value of the date that the rendered
content was
published:
Result:meta.tag.name.1=DC.date meta.tag.scheme.1=W3CDTF meta.tag.content.property.1=PublishDate
<meta name=”DC.date” content=”2011-08-01T08:15:30+02:00” scheme="W3CDTF"/>
- Setting the meta tag and using a relative URL to specify an image content item. You
need to add `abs` to specify the format (e.g.
meta.tag.content.element.format.x = abs
):meta.tag.content.element.1 TestImage meta.tag.content.element.format.1 abs meta.tag.name.1 CustomMetaTag
Note: The full URL should be included in a tag starting with<meta content=.....>
.Result:<meta name="Testimage" property="og:image" content="[Image URL here]">