Customizing Page Titles and Meta Tags

When working with pages visible to the public customizing the pages meta tags especially in a details page can be very helpful. 

First lets' understand what are meta tags?
Meta tags are snippets of text that describe a page's content; they don't appear on the page itself but only in the page's code. They help search engines understand the content of your web pages and determine how they should be indexed and displayed in search results. Key types of meta tags include the description, keywords, viewport settings, and Open Graph tags, which enhance how your content is shared on social media platforms. Proper use of meta tags can improve your site's SEO, visibility, and click-through rates.

What are page titles?
Page titles, also known as title tags, are HTML elements that specify the title of a web page. They are displayed on search engine results pages (SERPs) as the clickable headline for a given result and are also shown in the browser's title bar or tab. Page titles are critical for SEO as they give both search engines and users an idea of the content of the page. Well-crafted page titles are concise, descriptive, and include relevant keywords to help improve your page's search engine ranking and attract more clicks from users.

Why is helpful: 

Customizing meta tags is crucial for enhancing your website's visibility and performance on search engines and social media platforms. Meta tags, including Open Graph and Twitter Card tags, help define the content of your web pages, making it easier for search engines to index and rank them appropriately. They also ensure that when your content is shared on social media, it appears with optimized previews, including the correct title, description, and image, which can significantly boost engagement and click-through rates. Overall, well-crafted meta tags contribute to better SEO, improved user experience, and increased traffic to your site.

Meta Names vs. Meta Properties

• Meta Names: Meta names are typically used to specify metadata related to the page's content and structure. They include elements like "viewport," "keywords," and "description." Meta names are primarily used by search engines and web browsers to understand the content and provide relevant search results or display information in browser tabs.

• Meta Properties: Meta properties, on the other hand, are used to define metadata that is more focused on social media and sharing. They include elements like "og:title," "og:description," and "og:image." Meta properties are crucial for optimizing how a web page appears when shared on social media platforms like Facebook, Twitter, and LinkedIn. They control the title, description, and image that are displayed in social media previews.

In summary, meta names are mainly for search engines and browser behavior, while meta properties are specifically for enhancing the appearance and sharing of web pages on social media platforms. Both play essential roles in web development and user engagement.

Page titles and meta tags can be defined on 4 different levels. 

1. App Level
2. Domain Level
3. Parent Page
4. Child Page Level 

Customizing Meta tags on app level

You can add tags that will be applied to every page in your app with custom code. 

You can do so using the following steps; 

1. Navigate to the app settings
2. Click on Custom Header/Footer and add the meta tags directly into the Header of the app. 

Here's an example script that can be added: 

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Tadabase - No Code Database Web App Builder">
<meta name="twitter:description" content="Build and manage custom databases without coding. Tadabase helps 
    companies streamline their workflow with powerful no-code solutions.">
<meta name="twitter:image" content="https://yourwebsite.com/path/to/image.jpg">
<meta name="twitter:site" content="@YourTwitterHandle">
<meta name="twitter:creator" content="@YourTwitterHandle">

Domain Level Customization

Customizing Titles and Meta Tags on Domain Level means you can set a default Title, Prefix and Suffix for all pages on the app. This will be set as the default and if you customized titles in parent and child pages the defined value will be replaced. However, the prefix and suffix will remain. 

The prefix is helpful if you want all pages to start or end with a certain value. For example: 

• Prefix Example: Tadabase - My Dashboard
• Suffix Example: My Dashboard - Tadabase. 

Parent Page Level Customization

Parent page customization is another way to more deeply customize the tags and titles by setting custom values for each parent page. The Prefix and Suffix will be applied in addition to whatever is defined here. 

Child Level Customization

Child page customization works exactly like parent page with one helpful difference. You can pass values from the specific record as the value. 

For example, if you're working on a detail page about a certain job, instead of the meta tags being static it can be values from this very specific job or record. This same concept applies to the Page Title. 

The format is simply {pageField.Field Name} For example, if my field in the table is called "Facility Name" I can set the title to be: 
{pageField.Facility Name} 

Only basic fields are currently supported: 

• Text
• Long Text
• Radio
• Select
• Numbers

What's not supported: 

• Connection
• Attachments

Best Practices for Adding Titles and Meta Tags

Titles

1. Keep it Concise: Titles should ideally be between 50-60 characters to ensure they are fully displayed in search engine results.
2. Include Primary Keywords: Place your main keywords at the beginning of the title for better SEO impact.
3. Be Descriptive: Make sure the title accurately describes the page content.
4. Use Branding: Include your brand name at the end of the title for consistency and brand recognition.
5. Avoid Keyword Stuffing: Ensure the title reads naturally and avoid overloading it with keywords.

Meta Tags

1. Meta Descriptions:

   • Length: Keep meta descriptions between 150-160 characters to ensure they display properly in search results.
   • Engaging and Informative: Write compelling descriptions that accurately describe the page content and encourage users to click.
   • Include Keywords: Use relevant keywords naturally, but avoid keyword stuffing.

2. Meta Keywords:

   • Relevance: Include only relevant keywords and avoid stuffing with unnecessary terms. Note that many search engines no longer use this tag for ranking.

3. Viewport Settings:

   • Responsive Design: Use <meta name="viewport" content="width=device-width, initial-scale=1.0"> to ensure your site is mobile-friendly.

4. Open Graph Tags:

   • Accurate Representation: Ensure the Open Graph tags (e.g., og:title, og:description, og:image, og:url) accurately represent the content and image of the page to optimize social media sharing.

5. Twitter Cards:

   • Optimized for Sharing: Use Twitter Card tags (e.g., twitter:card, twitter:title, twitter:description, twitter:image) to control how your content appears when shared on Twitter.

6. Canonical Tags:

   • Avoid Duplicate Content: Use <link rel="canonical" href="https://yourwebsite.com/page"> to indicate the preferred version of a page to search engines, helping to avoid issues with duplicate content.

7. Robots Meta Tag:

   • Indexing Control: Use the robots meta tag (e.g., <meta name="robots" content="index, follow">) to control how search engines index your pages.

Best Steps to Verify How Tags and Titles Appear

1. Manual Inspection:

   • View Source Code: Open your webpage in a browser, right-click, and select "View Page Source" to check the HTML code for the presence and correctness of your meta tags and titles.
   • Browser Inspect Tool: Use the browser’s inspect tool (right-click on the page and select "Inspect" or "Inspect Element") to view the meta tags in the <head> section of the HTML.

2. Search Engine Preview Tools:

   • Google Search Console: Use the URL Inspection Tool in Google Search Console to see how Google views your page, including the title and meta description.
   • SEO Tools: Use online tools like Moz, Ahrefs, or SEMrush to analyze and preview how your titles and meta tags will appear in search engine results.

3. Social Media Preview Tools:

   • Facebook Sharing Debugger: Use the Facebook Sharing Debugger to see how your Open Graph tags will render when your content is shared on Facebook. It can also help identify and fix any issues.
   • Twitter Card Validator: Use the Twitter Card Validator to preview how your content will look when shared on Twitter. It can also highlight any errors in your Twitter Card meta tags.

4. Real-Time Testing:

   • Share Links on Social Media: Manually share links to your pages on Facebook, Twitter, LinkedIn, and other social media platforms to see how the titles, descriptions, and images are rendered.
   • Search Engine Results: Perform searches using relevant keywords on Google and other search engines to see how your titles and meta descriptions appear in the actual search results.

5. Browser Extensions and Plugins:

   • SEO Meta in 1 Click: Install browser extensions like "SEO Meta in 1 Click" for Chrome or Firefox to quickly view all the meta tags, titles, and other SEO-related information of any web page.
   • MozBar: Use the MozBar browser extension to view page title, meta description, and other SEO metrics directly from your browser.

6. Regular Monitoring and Updates:

   • Regular Checks: Periodically review your meta tags and titles to ensure they are still relevant and up-to-date. SEO guidelines and best practices can change, so staying current is crucial.
   • A/B Testing: Conduct A/B testing on different titles and meta descriptions to see which versions yield better engagement and click-through rates.

Step-by-Step Verification Example

1. Manual Inspection:

   • Open your web page in a browser.
   • Right-click and select "View Page Source" or press Ctrl + U (Windows) or Cmd + U (Mac).
   • Check the <head> section for your meta tags and title.

2. Using Google Search Console:

   • Log in to Google Search Console.
   • Use the URL Inspection Tool to enter your page URL.
   • Review the output to see how Google interprets your tags and titles.

3. Using Facebook Sharing Debugger:

   • Go to the Facebook Sharing Debugger.
   • Enter your page URL and click "Debug".
   • Review how your content appears when shared on Facebook.

4. Using Twitter Card Validator: 

5. • Go to the Twitter Card Validator.
   • Enter your page URL and click "Preview card".
   • Check the preview to see how your content appears on Twitter.

6. Using SEO Meta in 1 Click Extension:

   • Install the "SEO Meta in 1 Click" extension from the Chrome Web Store.
   • Open your web page in Chrome.
   • Click on the extension icon to view all meta tags and titles.