Writing HTML 'Title, Description' Meta Tags: Website Clinic Source Code Housekeeping Tips

Here're some tips about what HTML markup, or tags, to use where, and what content to place within them, both of which could have significant impact on users and how your website looks on the search results page.Before you deck the halls, deck out your <title> elements, which're critical in letting both Google and users […]

Here're some tips about what HTML markup, or tags, to use where, and what content to place within them, both of which could have significant impact on users and how your website looks on the search results page.

  • Before you deck the halls, deck out your <title> elements, which're critical in letting both Google and users know what's important to your website. Typically, a search engine will display ~60 characters from your title element. Ideally, a great <title> element will include the name of the organization, along with a descriptive tag line.

    If you don't specify a <title> tag, then Google will try to create a title for you. You can probably do better than best guess.

  • Description meta tags are often used to populate the two-line snippet provided to users in the search results page. With a solid snippet, you can get your potential readers excited and ready to learn more about your organization.

    If description meta tags are absent or not relevant, a snippet will be chosen from the page's content automatically. If you're lucky and have a good snippet auto-selected, keep in mind that search engines vary in the way that they select snippets, so it's better to keep things consistent and relevant by writing a solid description meta tag.

  • Keep your <h> elements in their place: Use <h1> tag for headers, and <h2> or <h3> for sub-titles on your posts, pages or sidebars. Take advantage of that <h1> tag! If you don't like how an <h1> tag is rendered visually, you can always alter its appearance in your CSS.
  • Use alt text for images properly, this attribute can:
    • Help Google understand what your image is
    • Allow users on text-only browsers, with accessibility problems, or on limited devices to understand your images
    • Keep in mind, rich and descriptive alt text is the key here.