Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current Restore this Version View Page History

Version 1 Current »

Images                                                                                                                                                                  

Image Sources

  • TCS Team Site - Includes header images for services (best used on Web Power catalogs)

  • SharePoint Stock Photos - The Design Team uses images from here and we do, too!

  • Lift Kit Brands - A bunch of lift kit brand logos, sized small and linked to their respective sites

  • Wheel Brands - A bunch of wheel brand logos, sized small and linked to their respective sites

  • Pexels - A site that allows the use of its stock images for commercial purposes for free

  • Pixabay - Stock image site that contains some free images; check that the image is ok before use

  • Facebook - If the client has recent, real photos, they may make sense to use. Be cautious when adding photos that contain people or pets.

  • Google Business Profile - Must be uploaded by the shop. Can’t use Street View images

  • Filezilla Public Image Collection - There are stock images on FileZilla that work with all clients

  • AI Image Generation: Don’t use at present; there are ongoing experiments with some tools

  • Canva - The social media team has access to this; the paid version includes access to stock photos. Canva can also resize images or allow for different image shapes (circles, etc.). It might be something we can consider in the future or collaborate with Social Media to build a bigger library of images.

Image File Names

Use a semi descriptive name with the client’s region, state, or city (ie: oil-change-georgia)

Don’t include spaces between words; instead, use - in place of a space (ie: michelin-tire.jpg)

Don’t use underscores because Google doesn’t like this

Compressing Images

Compress images before uploading them using:

Online Image Сompressor (imagecompressor.com)

Compression speeds up loading time on pages and leads to better site speed scores with Google.

Image Size

980 px width for header images

380 px width for images you want to align to the right, alongside the text

Brand logos can be smaller, especially if you have more than one.

You can play with the image size if it doesn’t look great alongside the text, although keep in mind that the appearance will differ depending on the device someone has, and many site visitors use mobile.

Image File Types

We use .jpg and .png at present

Webp is ideal, but there are no free tools to change images to this format; it is a future item

Uploading Images

There are a few ways to upload images:

  • Filezilla>Client Folder (or public folder if it will work for multiple sites)

  • Site Assets

  • Blog module upload

Image HTML (aligned right; remove styling for header images)

Note: Replace # with the rest of the image path; on Web1, replace the portal token with the actual site portal number (the  token will work if you are adding the image through a website HTML module)

<img alt="ALT" src="//a.nd-cdn.us/modules/custom-pages/responsive/#" style="float: right; margin: 15px;" />

<img alt="ALT" src="//a.nd-cdn.us/modules/custom-pages/#" style="float: right; margin: 15px;" />

<img alt="ALT" src="/Portals/[Portal:PortalID]/Skins/master/img/#" style="float: right; margin: 15px;" />

Image Alt Text

Alt text should explain what the image is

Max 125 characters

Can use the client’s location or general geographic area

We need to check if tokens work in alt text

Good examples of alt text: 

  • "service truck parked next to a blue Challenger farm tractor"

  • "stack of tires for passenger vehicles"

  • "mechanic smiling while talking to a customer at the auto repair shop"

  • "auto repair shop in Florida with a business sign that says John's Tire in bold letter. It is daytime with a blue sky and flowers are near the shop entrance"

  • “Chevrolet Impala with its hood popped up in the service garage”

Old examples of alt text that can be replaced with better descriptions:

  • “Tires [ND:FocusArea1]”

  • “Oil change in [ND:FocusArea2]”

Image Placement

  • Service/Catalog Pages

    • On Web Power Catalogs:

      • Add to the top as a header/banner or align right

    • On Net Driven Catalogs

      • Don’t use on catalog/service pages

      • For the landing page introduction paragraph, align right (or use header via Web1 preferably)

The Net Driven Service Catalog has extra elements due to the images, videos, etc. Adding images might slow the page down more vs Web Power Catalogs that have less elements to worry about when adding images

  • Blog articles - Use the Featured Image

We need to look into page speed with featured images and see if there is a way to adjust the number of articles that shows on a page.

Links (WIP)

This section has not been discussed yet. Updates to come.

The Agenda:

Link Text

Is variation, good or should we always do an exact match with the page name?

ie: Auto repair, automotive repair, and automotive services can all link to the “Auto Repair” page

Link Path
When linking, don’t use the domain name on the website, blog, or Web1

Examples of what to do:

“/auto-repair/cat/brake-repair”

“/shop-for-tires”

“/contact”

See us for <a href="/auto-repair">automotive repair</a> services.

This way, if the client ever changes their domain, the links won’t break.

How many links per word count on a blog or page?

???

How many times can we link to the same page within one blog/page?

Is there a consensus?

How many times can we link to a single page across the site?

Is there a consensus?

Buttons, Emojis/Font Awesome (WIP)

Contact Us Button for Custom Pages (Newer Websites)

<div class="subpage-buttons"><a href="/contact"><span class="fa fa-envelope-o"></span> Contact us about XSERVICEX</a></div>

Button for Anything (Newer Websites)

<div class="subpage-buttons" style="margin-bottom: 10px;"><a href="LINK"> INSERT TEXT HERE</a></div> 

Contact Us Button for Custom Pages (Older Sites)

<div><a class="ndcb large ndcustomcolorclass" href="LINK" style="margin-bottom: 10px;"><span class="fa fa-envelope-o"></span> Contact us about XSERVICEX</a></div>

Big Button for Anything (Older Sites)

<div><a class="ndcb large ndcustomcolorclass" href="LINK" style="margin-bottom: 10px;">INSERT TEXT HERE</a></p>

FontAwesome Icons 

FontAwesome icons can be used on many sites, usually in buttons

<span class=”fa fa-star”></span> 

Not all sites work with all versions of icons

Net Driven Icons

Net Driven icons that can also be used, usually in buttons:

<span class=”ndicon-tire1”></span> 

Emojis

Do we want to use them? Best practices? đź‘ľ đźš—

Client Business Names  (WIP)

Full name vs short name best practices

Meta Descriptions/Titles Overview (WIP)

Content Tasks & SEO Tasks

If completing both Content and SEO assignments, claim both types of tasks before working on them.

Content - The service or catalog page content; blog article; new or rewritten page

SEO - Meta titles and descriptions; h1, h2, and h3 headings, links; slight rewrites

Standards for Blog  (WIP)

Word Count - Around 500

Images

SEO Fields

Tokens

Web1 Tokens (Catalog/Services)

XNAMEX

XFOCUSAREA1X, XFOCUSAREA2X, XFOCUSAREA3X

[ND:SEOLocation] (some sites)

Website Tokens

[ND:FocusArea1]

[ND:FOCUSAREA1], [ND:FOCUSAREA2], [ND:FOCUSAREA3]

Shortcuts/Tools/Tips/Tricks/Ideas/Resources

Collapsible Section - W3Schools Tryit Editor (thank you, Naomi!)

Clear Formatting Hotkeys - Hold Ctrl + Shift + V (thanks, Nissa!)

Turn on Clipboard History: Windows logo key + V

Discussion on SEO algorithm updates/news

Catch up on the March 2024 Update Here

Would it be beneficial to have a monthly meeting on this and or difficult cases?

Fun Bingo Card