Giving views-generated pages from Drupal unique titles to improve site SEO

There is a higher priority ‘Title found on more than one page’ SEO checkpoint in Monsido that highlights webpages with duplicate titles. Many times pages generated by Drupal Views will have duplicate titles and most of the pages in the Pharmacy site failing that checkpoint are caused by Views.
There is a Metatag: Views sub-module that ships with the main Metatags module that can fix the issues be giving Views pages unquie titles. A webpage title is the text entered in the <title> tag, can be different from the main page <h1>, and isn’t always seen easily in all browsers. Internet Explorer 11 still shows the page title in the top of a window. The Metatag: Views sub-module allows you to set the page title independenly of the main <h1> heading.

In Views UI the Metatag: Views sub-module adds a new Meta tags area in you view where you can override the page title.  Then in the Page Title field you can use tokens to give the views-generated page a unquie title. For example you could use:
[view:title] [page:title]
or
[view:title] [site:name]
Many times views generated pages will just use the View Title casing a lot of pages with duplicate tiles. Enabling the Metatag: Views sub-module and setting an override with tokens can fix the duplicate title SEO problem.
See this Advanced Page Titles Using Drupal Views article for more information.

Adding a node ID as class to the tag in Drupal 8

One thing I discovered recently in my college’s Drupal 8 site was that the node number CSS class that used to be applied to the <body> tag was missing. In Drupal 7 there was a unique node ID class and it looked sort of like this:

<body class=”html not-front not-logged-in no-sidebars page-node page-node- page-node-8471 node-type-article news-newsreleases context-news”>

Having this unique node number CSS class was useful for cases when specific pages needed custom styles applied.

By default, Drupal 8 seems to add no such class to pages. To get them back I added a snippet of code I found on a Drupal.org post. I found it was easiest to use:

 /**
* Implements hook_preprocess_html().
*/
function themename_preprocess_html(&$variables) {
if ($node = \Drupal::request()->attributes->get(‘node’)) {
$variables[‘attributes’][‘class’][] = ‘page-node-‘ . $node->id();
}
}

in my theme’s sitetheme.theme file.

There is also a Node Class module that might help accomplish the same objective, adding unique CSS classes to a page. It’s a simple module that allows users to add custom CSS classes to any node through the node/add interface.

After adding the snippet of code above to my sitetheme.theme file I was able to target a faculty profile page that needed custom styling. Previously, without a unique CSS class, there no way to target that specific page.

Ohio State Drupal Users Group Meeting – March 22, 2018

The Ohio State Drupal Users Group is having its March 2018 meeting in 141 Sullivant Hall (the Collaboratory) on Thursday, March 22, 2018, 3:00 pm to 5:00 pm. One of the topics of discussion with be Drupal site hosting, which will probably get into hosting on cloud platforms like Pantheon or Acquia. The university also runs a hosting service that’s available for Ohio State Colleges and Departments to use. The OCIO hosting service offers some Drupal-specific information about installing, backing up, and restoring Drupal 7 and Drupal 8 websites. In Drupal 8, drush commands can be used to create backups and migrate a site from a development account to a production account. Cloud hosting services, like Pantheon or Acquia, also offer DEv, Test, and Live (production) environments and methods to move (deploy) site data between them.

 

There is a Sullivant Hall Collaboratory and Rotunda Reservation Request form available that other groups from the university can use to reserve that space.

 

Begin at the beginning – Sketching out a full, extended web design process: the initial steps

Many times in redesigning websites there is pressure to jump straight into the visual design and programming phases but spending time & effort in initial planning can improve efficiency and help the later work go more smoothly. Some of the first steps of the planning phase include site content audits, website strategy plans, and card sorting exercises. A content audit takes an inventory of the website’s existing content. As the content is inventoried some problem areas may stand out to web team members. Heuristics and review of site analytics can be used to confirm problem areas (structure usability problems, audience marketing problems). Website strategy plans outline specific web-centric strategies to meet the organization’s goals & business objectives. These planning documents also include details about metrics to measure the success of the strategies and approaches. In the post I attempt to further describe these early steps in the web development process and suggest some resources and articles for learning more.

Phase 1: Planning – Conducting Site Content Audits:

One of the first things in a website redesign process that a web team should do is conduct a Site Content Audit of the existing site pages. “You have to know what you have before you can improve it”. A content audit and site inventory spreadsheet can be an important exercise in understanding what content is in the current site. As the content is inventoried in a Content Audit some problem areas may stand out to the team. These areas can be further analyzed through card-sorting exercises later in the phase 1 planning process. Heuristic knowledge of web design best practices and review of site analytics can be used to further confirm and analyze these problem areas later in the design process.

Conducting Site Content Audits resources & articles:

Content audit guide and template: this article includes information about why an organization should do a website content audit and how it should be performed.

Example content inventory spreadsheets

 

Phase 1: Planning – Writing Website Strategy Plans

Website Strategy Plan outlines specific web-centric strategies to address organizational goals and objectives and metrics to track the success. The website strategy document may consider and incorporate communications objectives and initiatives from the organization’s marketing department as well as business objectives from other departments. The exact scope of the strategy will depend on the client’s organization and what industry they’re in. For example a website strategy plan for higher education institutions may differ than those for commerce stores. The specific web-centric strategies to meet goals may go in-depth into technical detail as a reference to guide the web team’s work.

Metrics to measure the success of strategies can help project managers to decide if a particular approach needs improvement or is working well. Review of web analytic data on site visits may identify if approaches and strategies are working. Metrics may be more qualitative or quantitative based on the strategy statement and nature of the organization’s goals.

The Website Strategy Plan metrics definitions may describe the benchmarks for success in reaching certain target audiences. It’s good practice to define a primary audience to focus efforts on engaging. In the case of higher education institutions the primary audience may be prospective students, and organizational goals may be focused on engaging this group. The scope of work that organizations do may serve many different audiences so it’s good practice to allow think about strategies to reach secondary groups. In the case of colleges or universities secondary audiences such as alumni & donors may may identified and web-centric strategies developed to met the needs of those groups. To understand a typical person from an audience personas may be developed to sketch out their informational needs and online tasks.

Writing Website Strategy Plans resources & articles:

– Web Design for ROI:  The book has a website strategy example and template here: http://www.wd4roi.com/bonus-materials.html

– A web strategy in 10 quite simple steps: This blog post includes information about engaging stakeholder from all levels of the client’s organization.

 

Phase 1: Planning – Running Card Sorting Exercises

Card sorting exercises are used to test a verify the web team’s assumptions about the website’s information architecture, the site structure. As the content is inventoried in a Content Audit some problem areas may stand out to the team. Heuristics (web design best practices) and review of site analytics can be used to confirm usability & audience marketing problem areas in the site’s structure. For example if the analytics say that a certain area of the site is getting a high-bounce rate that may indicate that the section is confusing and site visitors are leaving. Once a problem area or section of the site is identified a Card Sorting Exercise is justified to help redevelop the structure of the section.

 

There are two forms of card sorting: open & closed. Open card sorting is for brainstorming when creating a new website from scratch or used if the whole structure of an existing site is deemed to be confusing to site visitors. Closed card sorting is used if the the site’s top-level categories are well agree upon and if the team just wants to test certain problem areas of the site. The higher-level categories are used as buckets to sort sub-page content below.

 

To confirm that top-level categories fit within norms for the client’s industry it can be useful to perform a competitive analysis of the website’s of other organizations. By comparing the competitor’s top-level categories in a competitive review spreadsheet the client & web team may grasp a better under standing of website navigation norms and section naming for that industry. Seeing top-level navigation schemes compared side by side may reveal common trends and good ideas in section naming. The results of a competitive review can inform the decide on whether to do open or closed card sorting. Site visitors may have certain expectations for using websites from a certain industry. For example, prospective students applying to a graduate program may have expectations on how they should be able apply online and what information about the school should be presented. Competitive reviews of college & university websites can help the web team get a handle on what is normal for an application process to higher education programs. Divergent areas that stand out, as compared to competitors, may be an indication that something is wrong with the existing site’s structure and justify card sorting in that area.

 

There are pros and cons to using traditional card sorting vs. software-facilitated sorting. if a sitemap outline can be automatically generated (from an outline) that’s more efficient than drawing one in Adobe Illustrator. If a spreadsheet of the website’s structure could be output from the CMS (content management system) that would help speed up a content audit.

 

Running Card Sorting Exercises resources & articles:

Card Sorting: Getting the right results: this article describes old card sorting methods vs. newer digital methods (synchronous facilitated or asynchronous).

– Using Card Sorting To Test Information Architecture: This article describes when to perform card sorting exercises and how they can be used to test the web team’s assumptions about a site’s information architecture, the structure.

Content Inventories

A content inventory is a deliverable used in the planning phase of a web design process. It’s a spreadsheet listing pages in the website by section or category. Details to inform the web team regarding frequency of updates may be included. For example if a page should be updated annually it’s noted in the entry about that page. One could consider a content inventory as a sitemap in outline format with more detail about each page. The outline may be organized by the hierarchical categories used in a website. Notes and color coding may be included to indicate the status of certain pages; whether they need improvements or updating.

Ohio State Drupal training resources from the College of Arts & Sciences

Updated:
New 2016-2017 ASC Drupal CMS training articles and resources:
How to Use Images on Drupal – Preparing an Image for a Drupal (or any) Web page.
Creating an ‘Accessible’ Website – Resources to making your websites accessible.
ASC Drupal training videos on YouTube – easy video training for ASC Drupal instances.