When to link
You can link to an external website when:
There isn’t an internal page on http://SF.gov with the same information
The external website is a trustworthy source that can support users better than http://SF.gov can
A user can only complete a specific task using that website
The external website provides a single source of truth
General rules
Endorsement
When you link to an external website, it is an endorsement. You must have a good reason for choosing one website over the other. The website you are linking to must be a safe, trustworthy place to send a user. Do your due diligence to minimize risks in the future.
Maintenance
Links can break without warning. You don’t have control over external websites. Plan how you are going to maintain your links. Pages higher up a website’s navigational structure are more stable, so link to a sites’ homepage over linking to a PDF on that site, where you can.
The more links you have, the more effort you will need to put in to maintain them. Be intentional and mindful of your “curation” of links. Keep them up to date by running a content audit every couple of months, either manually or using a content audit site to crawl your pages. And remember, you don’t have to recreate the internet!
Transparency
If your link requires a login, authentication, or registration, let the users know upfront. Use text or icon to indicate a link that is not directly available on the internet.
Usability and accessibility
Check if the site works on mobile. Read its privacy and cookie policies, if you can.
How to link
On http://SF.gov , you can put an external link:
In the body of the text (inline links)
As a resource tile on your Resource Collection page or Agency page
As a quick link on your Agency page
Best practices
Do ✅ | Do not ❌ |
Provide contextAdd a description for the link to explain what the page is about. This will help your user decide if the information will be relevant or helpful. | Do not use “click here”People skim pages for links, so highlight the text to tell them where they are going and what they will get. “Click here” is also not accessible for people using screen readers. Example: 👍 Speak with a Rent Board counselor if you have questions about evictions. 👎 Click here to speak with a Rent Board counselor if you have questions about evictions. |
Limit the number of linksA link has cognitive weight. Be mindful of how many links you put on your page or in a sentence. | Do not use too many linksHaving too many links in a single sentence affects readability. |
Be clear about logins or authenticationUse text or a lock icon to indicate if a page requires login. Examples:
| Do not link to a page that requires further actionHelp your users go to the right place in the shortest amount of time. Avoid linking to a page that requires a user to click more to find what they need. |