Linking Content in WebCMS
Following the instructions on this page will minimize broken links (both yours and others).
- How do I make a link?
- How do I make an email link?
- How do I make a telephone link?
- When to use or not use a direct URL link
- Linking Anchors
- Open a Link in a New Tab or Window
- Naming content to find titles more easily
How do I make a link?
-
- If you want to link an image, highlight the image
- Select the link icon in the toolbar
- For linking to other WebCMS pages, start typing the title of the page that you want to link to in the URL box, and choose it from the dropdown list.
- For linking to external content, type the full URL into the URL box, such as https://www.energy.gov
- Note: As you are adding a link, the Anchor links dialogue box will open. Only select a link from the anchor list if you're adding an anchor tag. If you accidentally select an anchor for a regular link, you will see a "#" in front of the URL...remove it. Otherwise the link will not point to the correct URL.
How do I make an email link?
- Highlight the link text
- Select the link icon in the toolbar to open the LinkIt tool window
- Start typing the full email address into the URL box (no space after the colon)
- The system will correctly link the email address (using mailto:)
Follow Web Standard: Email Address Links
How do I make a telephone link?
- Highlight the link text
- Select the link icon in the toolbar to open the LinkIt tool window
- Start typing the full telephone number into the URL box
- The system will correctly link the telephone number (using tel:)
When should I use a full URL?
Never for www content
Using the URL rather than Internal Path (node ID link) to pages in www.epa.gov can lead to broken links. The WebCMS database remembers every path (URL) the page has ever used, and manages and updates internal links based on the node ID which doesn't change. If you use the Internal Path option you do not have to worry about that link being broken, even if the page's title and URL change.
Always for external content, which includes www3.epa.gov
Links to pages on www3.epa.gov and other EPA sites are considered external links in the WebCMS (www.epa.gov), even though this is EPA content. Exit icons will be added to any link that isn't a .gov. This means some state pages will not have a disclaimer and that's OK. It is done system wide. We no longer add exit disclaimers.
Linking Anchors
Create good anchor links: Best practices for creating anchors
Link to an anchor on the same page
- Make sure your anchor has been created using the flag icon in the editor and you know the exact anchor you want to link to (Example: #quiz)
- Highlight the text you want to link to
- Click the "Link " icon in the toolbar to open the Add Link tool window
- In the URL box, type #anchorname
- Click Save
Link to an anchor on another page
- Highlight the text you want to link to
- Click the "Link " icon in the toolbar to open the Add Link tool window
- Type in the name of the page in the URL box
- Once the page has been added, the node # will show in the URL box
- Add #anchorname to the end of the node
- Click Save
Link to an anchor in a different pane or block in the Layout Builder
You will need the Layout Builder role to be able to work with content in that area. Please follow the guidelines on how to access the Layout Builder.
- In the Layout Builder, create the anchor at the desired section in the pane
- Follow the same steps as "Link to an anchor on another page"
Link to a page in a PDF
Add #page=[page number] to the end of the link's URL.
- Example, https://www.epa.gov/sites/default/files/2017-01/documents/smart_growth_fixes_climate_adaptation_resilience.pdf#page=4
Open a Link in a New Tab or Window
If you intend to have a link open in a new tab or window (as selected by each visitor in his or her browser preferences), you must include target="_blank" and rel="noopener noreferrer" when setting it up. This will prevent tab hijacking when a visitor clicks on the link.
Please Note: If you have not added "noopener noreferrer" to the links that open in a new tab/window, you will need to update those.
You have two options to add the code:
- Click the "Source" icon in the toolbar. Use this code, <a href="/URL-of-closely-related-content" target="_blank" rel="noopener noreferrer"> to open a new window or tab (This example link will open the Web Guide homepage in a new window or tab).
- Highlight the text you want to set as a link and click on the "Link" icon in the toolbar. Adjust the settings as you see in the example below. Add the /node/# in the URL field, then under the Advanced settings, check the "Open in new/window" box, and add noopener noreferrer in the "Relation" field.
Content naming to improve finding titles you want to link to
Creating good titles is extremely important for many reasons, but it will also help you link to the right page.
Basic Information Page Example
- Suppose you made a page for your Meteorite Permitting web area and named it “Basic Information”.
- Then suppose you were working on another page in the web area and wanted to make a link to that Basic Information page.
When you select the text and click the button to make a hyperlink, and you begin typing in Basic Information, a list of pages whose names include the string “Basic Information” will appear for you to choose from. If your page name is not unique, you will see all pages in Public Access WebCMS with that name. There could be quite a few of them, which makes it hard to tell which one you want.
To avoid that situation:
- Use unique page names that include more context. In our example, you might call it “Basic Information About Meteorite Permitting”.
- Use node IDs to link to pages. If you know the node ID of your content, you can place /node/12345 directly in the link box, and it will point to your page.