Author: Kelly Holcomb

A sitemap is instructions to a search engine telling it where to crawl your website. This will ensure that search engines will find all the relevant content of your site an display it in search results. Check out Google’s guide of how Google Search works to learn exactly how crawling works.

If you create a page or piece of content that isn’t linked anywhere, it’s unlikely that a search engine will find it. When you link to a page on another page of your website, search engines can find it.

Sitemap basics

For the central distribution Druapl here of Oregon State University, you can find your sitemap at sitename.oregonstate.edu/sitemap.xml.

This will show every piece of content included in your sitemap.

To configure your sitemap, first log into your website. You need to be an architect to configure it.

Go to Configuration > Search and Metadata > XML Sitemap

Drupal 7 sitemap configuration

The sitemap includes little by default. However, if you’ve linked to your relevant content, then don’t panic, search engines have probably found it.

There are 4 sections to configure. In each of these sections, you’ll see a list of the things you can include or exclude from your sitemap. It will also tell you which content has been indexed.

To

Frontpage

The configuration includes the front page by default and sets it at the highest priority. No need to make changes here! We’re good to go.

Menu Link

This is any link created by a menu in your website. You can include the menu items that are being used in your website, but they are probably already indexed. Again, remember that search engines can find links that are on your website that are linked from other content. Since menus usually display on multiple pages, search engines can find them easily.

How to add a menu to the sitemap

• You need to go to Structure > Menus
• Click Edit menu link to the right of the menu you want to include
• Expand the XML sitemap section
• Change the Inclusion from Excluded to Included
• Click Save

Be sure to never include the Management menu. That is the administrative menu for Drupal.

Content

By default, the configuration adds no content to the sitemap. However, don’t panic. If you’re been linking to your important content, the search engines can find it.

Recommend to include:

• Book page
• Basic page
• Webforms
• any default content type that you use
• any custom content type that you have created
  • Keep in mind that this will include the node view of your content type. If you haven’t styled it and only expose certain fields in a view, then you don’t want include your content type.

How to add content to your sitemap

1. Click on the content type name you’d like to add
   • This takes you to the content type editing screen
2. Click on the XML sitemap tab at the bottom of the page.
3. Change the Inclusion from Excluded to Included
4. Click Save content type
5. This will then take you back to the sitemap configuration page

Repeat these steps for any content type you want to include.

User

This is anyone you have added to your website. Oftentimes, these are the people in your department or unit to display in the directory. But some people only edit the website and aren’t in your department or unit.

You can exclude or include any individual by editing their profile. First look at the Account section of their profile, and then find the section on that configuration page for XML Sitemap.

Drupal 9 sitemap configuration

For Drupal 9, we have included the default content types (profile, basic page, and story) and groups.

If you create any custom content type, add it to the sitemap when you create it.

If you use taxonomy term pages in your website and want them to show up in search results, you can add them. You can add them under Sitemap Entities. This is also where you can add other entities of your site, as you see fit.

Pages produced by a view

Pages produced by a view are unique and need to be manually added to the sitemap under Custom links in the sitemap configuration.

Submit the sitemap

The sitemap module will submit your sitemap on your behalf automatically after initial configuration.

Click on the Search Engines tab in the XML sitemap menu.

Here are the configurations that you want to set:

1. Submit to both Bing and Google
2. Do not submit more often than every 1 week
3. Leave the box checked next to “Only submit if the sitemap has been updated since the last submission”

Click Save Configuration.

If you have Google Search Console turned on, you can double check that it’s being submitted to Google via the Sitemaps report. Learn how to manage your sitemaps in Google Search Console.

General References

Mozilla Developer Network (MDN) has a great reference for CSS. Any property you want to know, it’s there. I use this for

HTML Dog has a CSS reference. I like how they explain shorthand properties, such as background. I find their layout for those more complex properties more readable.

The CSS Cascade is a beautiful website that explains how inheritance works in CSS. This concept is absolutely essential to understand how CSS works. It’s also important to know the cascade works especially if you are trying to override something in the Drupal theme.

Flexbox

Flexbox Zombies game is a great way to learn flexbox. It’s entertaining and has practical examples.

Josh Comeau has written a a great interactive introduction to flexbox. There’s kebabs, Clippy, and cocktail wieners. Very thorough and delightful.

Flexbox.help or the flexbox properties codepen is quick and visual way to see the effects of changing the different properties on your layout.

Complete Guide to Flexbox from CSS Tricks is great for a reference after you’ve learned it. You can read their collapsed sections at the top about the Background and Basics and terminology. But I’ve found that those concepts are more approachable learning from videos and practicing on your own.

Grid

Jen Simmons has some examples of grid and when to use grid vs flexbox. She does some conceptual work on how to think about layout, which I have found useful.

Rachel Andrew has Grid by Example, where she walks you through examples in her grid video series.

The Best Thing to Do

You can watch all the videos and read a hundred Stack Overflow threads, but the best thing to do is practice. Get a CodePen account and start creating something! Practice! Practice! Practice!

In an ideal world, every page on your website would have perfect metadata to feed the algorithms.

Since most of us are operating on limited time and resources, we need to be strategic about giving the royal treatment to pages based on how much they contribute to your website’s key strategies or if it will be promoted via social media. You can manually configure some settings while building the page to ensure that your webpage looks great when shared and ranks well in searches.

What is Metadata?

Metadata is code in the head of your webpage that tells search engines what your page contains. Metadata doesn’t show up on the visual webpage to regular visitors. It affects how your webpage looks when shared as a link on social media posts. Metadata also contributes to how high your website ranks when people search for your content on Google.

Key Metadata Attributes

1. Title
2. Image
3. Description

There are others, but the Drupal defaults ensure that we follow best practices.

Note: It can take time for your changes to your metadata settings to show up in social media previews. This is because of the caching of OSU websites and the social media platform can sometimes take time to detect those changes. Be sure to flush the cache after you make a change and wait a few minutes. There are multiple systems that this information is flowing through and it isn’t always immediate. Twitter seems to take the longest to get the updated metadata.

Title

The title should be the page title, which should accurately reflect the contents of the page.

Most of the time you don’t have to worry about the title. The OSU Drupal defaults will automatically populate and update the metadata title for basic pageand book pages.

One exception for OSU Drupal 7 is that a top level page for an organic group is missing this metadata title. You need to go fill it out yourself and update it if you change the title of the page.

This is due to some limitations related to the functionality of our version of organic groups. This won’t be an issue in OSU Drupal 9.

You can check to see if the title metadata is correct by looking at the tab in your browser. If it has your page title, you’re good to go.

If it starts with a |Site Name, then you need to add the title manually.

Image

Facebook

Facebook images should be at least 1200×630 pixels. This will produce a large image with the title and description below. If it is smaller than 600×315 pixels, then it will display a much smaller photo. Facebook has written up a complete guide to their images in link shares that includes more information about how their images work and how to pre-cache them.

How to set the Facebook photo

When editing a Drupal page, scroll to the bottom and there is a vertical tab list. Click on the Meta Tags option.

There are a lot of fields in this section, so it’s easy to get overwhelmed. However, there is a lot that you can ignore. Let’s focus on just the images for now.

The OpenGraph section feeds what will display on Facebook.

You want to fill out the Image field under that OpenGraph section. You need the URL of the image.

If you are using a photo specifically sized for Facebook, you can get the URL with these steps:

1. Go to the Admin menu > Content > Files
2. Find the photo that you want to use and click on the title link
   • This will display the image on its own page
3. Right click on the image and select Copy Image URL

Preview Facebook posts

To test that your image is working you can use the Facebook’s Sharing Debugger. You need to log in with a Facebook account to use it.

It will give you a preview of your website when it is shared as a link on Facebook. It will also give you any errors or recommendations for fixes. Generally, a Google search of the exact error will provide you with a fix. You can always ignore the error for fb:app_id. It doesn’t do anything and isn’t necessary.

Twitter

Twitter’s image size depends on the type of card that you select. There is either the Summary Card or Summary Card with Large Image.

Summary Card

The Summary Card will support a small square image, at least 144 x 144 pixels. Given how image and video heavy the internet has become, I don’t recommend using this option.

Summary Card with Large Image

The Summary Card with Large Image supports a larger photo with an aspect ratio of 2:1. The minimum size is 300×157 pixels, but I recommend using 1024×512. I recommend using this card style because it shows a larger picture, which may grab people’s attention more than small photo.

How to set a Twitter Photo

In the Twitter card section of the Meta Tag tab at the bottom of your page, there is a field for Image URL. You can copy and paste the image URL into this field to ensure that your Tweet looks great.

You can use the same images for Facebook and Twitter. However, it is best practice to size the photo for each platform to ensure they look their best and no critical part of the photo gets cut off.

Preview Tweet

To test how your website will look when shared on Twitter, you need to log into your account and draft a message. It will show you a preview of what your shared link will look like:

There is the Twitter Card Validator tool too, but that no longer renders a visual preview. It can be helpful to look at the logs to see what Twitter is able to read from your metadata.

Description

The meta description is the short amount of text that shows up below the title in social media posts and on search results.

The description is your elevator pitch to search engines and your potential site visitors. It has to quick, snappy, and engaging. Moz has a great long form article on how to write meta descriptions.

Cheat Sheet

• ~155-160 characters
  • There isn’t a hard and fast cut off. Depending on the device, browser and user settings, there is no way to know exactly how many characters will show
• front load the most important points to ensure visibility
• succinctly describe what your page is about
  • Bonus points for looking at Search Console to see what search terms people use to find your page adding those to your description

Drupal Defaults

Drupal automatically fill out the meta description field based on the content of the page. First, it looks at the summary field, which is attached to the body field. It is hidden by default.

If there is nothing in the summary field, it will look at the body field and take the first characters from there and put it in the meta description.

However, a lot of us build our webpages with paragraph bundles. There isn’t an option to tell Drupal “go look and find paragraph bundles, find the first one with text, and put that in the meta description.”

That doesn’t mean all is lost. I built the Paragraph page that I have been using as an example with paragraphs. In the search results screenshot above, there is a description for it. Search engines will look at the rest of the page to find information about it if there isn’t something in the meta description.

Note:

You can write a meta description and search engines can decide they don’t like it and will put what it thinks is more useful. That’s a good time to re-write your meta description.

How to add a Meta Description

Add your meta description by placing it in the Summary field attached to the Body field.

Click on Edit Summary to expand the field and then add your description.

The description will now populate in a Facebook post:

There is more to metadata, but these are the key aspects that can help your webpage the most.

There are 1,0001 newsletters out there for front-end web work. It can get overwhelming to not only choose, but if you subscribe to those 1,001 newsletters, your inbox will get even more overwhelming than it already is.

• Nielsen Norman Group
  • All things UX and design, no technical bits.
• Smashing Magazine
  • Smattering of all things front-end, a real variety pack. It’s a great way to round out your knowledge set.
• Kevin Powell
  • Calls himself a “CSS Evangelist.” He covers everything you need to know with CSS with his YouTube videos.
• Moz Top 10
  • All SEO and Digital Marketing

Honorable Mentions

I don’t subscribe to these, but have in the past. It isn’t because these are “bad.” My focus changed and my inbox got full.

• CodePen
  • Includes snippets of code made by the CodePen community. Ends with “Chris’ corner” by Chris Coyier, founder of CSS-Tricks.
• CSS-Tricks
  • I’m not entirely certain they’re running this anymore. Last publication was December 2022. However, the archives are definitely worth a read.

Most of these keyboard shortcuts can be used in other programs. However, these ones are what I reach to every day to make my Drupal life just a little bit easier.

Home/End

Jump to bottom or top of page or the beginning or end of a text line.

The save button is at the bottom of the page in Drupal 7. It’s nice to save yourself and your wrists a bit of scrolling if you have a long page.

Just to keep you on your toes, in Drupal 9, the save button will be at the top of the page.

As I understand it, Apple keyboards don’t have these keys.

Equivalents for Mac

Home: Fn + Left Arrow

End: Fn + Right Arrow

Page Up/Page Down

This is probably a “me” thing. I don’t like to scroll a bunch as it is a highly repetitive and hard on my wrists.

Control + shift + arrow

Select a word or if you keep pressing the arrow key, multiple words.

If you keep pressing the arrow key you’ll select more and more words. Great way to do quick formatting like adding bold or adding a link.

Control or Command + L

Add a link to selected text

The standard everywhere else is to do control/command + K. In Drupal 7, it just loves to be different.

For longer paragraph bundle content this is helpful to skip scrolling back up to that editing bar just to add a link.

Shift + Enter

Add a link break

This will add a link break, rather than start a whole new paragraph. It’s great for contact information where you don’t want a lot of spacing between the lines.

For example:

Sherlock Holmes
221B Baker Street, Marylebone
London, NW1 6XE

Other Keyboard Shortcuts

• CKEditor keyboard shortcuts
• Windows keyboard shortcuts
• Mac keyboard shortcuts