Make a tabular interface for SEO settings

[sybrew]

The current interface works with meta boxes.

We should consider grouping those options under tabs, instead.

Thereunder, we can still use boxes to differentiate between settings sub-groups. We could implement it like the Extension Manager settings, or see if there's an alternative more akin to WordPress's design language.

[christophrado]

+1 for using the nav tabs design WordPress uses itself, e.g. on the network "edit site" screen (/wp-admin/network/site-info.php?id=1)

[sybrew]

Note that TSF v4.1.0 boasts 113 simple options, and 8 option generators (post-type/taxonomy robots/exclusion options). More generators are planned for post type archives and other content types (#20), among adding complexities as title/description syntax (#140). I believe TSF already has more options than WordPress--and that only for a mere 30 lines of metadata.

The goal is to make it easy for users to navigate through all those options and ease its intimidating look, preferably where veterans don't have to relearn TSF. Perhaps we should even group and separate the settings as "basic" and "advanced" and add a toggle that hides the advanced ones.

Gutenberg brought forth a new design language. I believe JetPack and WooCommerce are taking from that, and are pioneering the future of WordPress's interface. I think it'd be best to take hints from them.

[sybrew]

I just dug through all the settings. Below my comments, I've ordered the settings by type.

To summarize the scrutiny:

• We do not need to integrate a setup wizard. Frankly, only one option requires attention (homepage description). Perhaps we should display a notification that prompts the user to input the description. Yet, this is a discussion for another issue.
• Only a few dozen settings are simple (29). Almost half of those have zero impact on SEO/SSO (11).
• Too many settings require SEO knowledge (60+). Some of those can instantly drop your site's rankings (6).
• We added many settings because of WordPress API conflicts or to placate users with edge-cases (19). These, unfortunately, requires a perusing on-site developer, or otherwise support from our team.

Proposal:

1. We should simplify our plugin setup guide, and even display Call-to-Action notification right after installation (with modal for text input?).

   • The notification is tricky with multisite, where network admins may not want this displayed.

2. Since the settings are scattered all over the place, I think it's best to show two toggles or a dropdown that hide setting stacks neatly: "Display advanced settings. / Display developer settings." To make this actionable, we want the generator (#506) to mark each option with a "difficulty type", and have the settings and their tabs hide accordingly via JavaScript. I'm undecided on the default setting.

Display settings scrutiny (click me)

# Settings that require attention during first-time setup (1) - homepage_description Yup. Just one. That's it. Everything else is auto-generated well, or otherwise have no direct impact on ranking/sharing. Perhaps, we could add this one to this list (sharing impact): `social_image_fb_{url/id}`. But, not all users are expected to engage with social media, and fallbacks are generated well on most sites. # Preferential settings (89+) **These settings affect SEO and are expected to work on every site in the same manner.** ## Simple (29) **Simple means that users do not need to be taught using the settings without facing ramifications.** #### User interface (5)

View 5 settings

- display_seo_bar_tables - display_seo_bar_metabox - display_pixel_counter - display_character_counter - seo_bar_symbols

#### SEO output (5)

View 5 settings

- timestamps_format - title_separator - title_location - knowledge_logo`{_url/_id}?`

#### SSO output (9)

View 8 settings

- facebook_publisher - facebook_author - twitter_site - twitter_creator - social_title_rem_additions - multi_og_image - social_image_fb_`{url/id}` - theme_color

#### Sitemap styling (6)

View 6 settings

- sitemap_styles - sitemap_logo`{_url/_id}?` - sitemap_color_`{main/accent}`

#### Homepage as blog support (3)

View 3 settings

- homepage_description - homepage_social_image_`{url/id}`

## Advanced (60+) **Advanced means that users should be taught to recognize the SEO impact of these settings.** #### SEO output (26+)

View 26+ settings

- title_rem_additions - title_strip_tags - auto_description - author_`{$robots}` - date_`{$robots}` - search_`{$robots}` - site_`{$robots}` - `{$robots}`_post_types `(array)` - `{$robots}`_taxonomies `(array)` - advanced_query_protection - paged_noindex - home_paged_noindex - shortlink_tag - prev_next_posts - prev_next_archives - knowledge_type - ld_json_searchbox - ld_json_breadcrumbs

#### SSO output (9)

View 9 settings

- post_publish_time - post_modify_time - facebook_appid - twitter_card - oembed_remove_author - oembed_scripts - pint_verification - excerpt_the_feed - source_the_feed

#### Sitemap (4)

View 4 settings

- ping_google - ping_bing - sitemaps_modified - sitemaps_priority

#### Insights (connection keys) (4)

View 4 settings

- google_verification - bing_verification - yandex_verification - baidu_verification

#### Homepage as blog support (9)

View 9 settings

- homepage_title - homepage_tagline - homepage_title_tagline - home_title_location - home_paged_noindex - homepage_`{$robots}` - prev_next_frontpage`

#### Homepage as blog support (social) (4)

View 4 settings

- homepage_og_title - homepage_og_description - homepage_twitter_title - homepage_twitter_description

#### Copyright legislation (4)

View 4 settings

- set_copyright_directives - max_snippet_length - max_image_preview - max_video_preview

# Conflict resolution (19) **These settings affect the plugin's behavior, and should only be used when conflicts arise with WordPress, themes, plugins, or hosting.** #### WordPress being stupid (1)

View 1 setting

- title_strip_tags

Fun fact about `title_strip_tags`: I condemn this feature. It was added because themes didn't escape their output ([this was a security issue](https://core.trac.wordpress.org/ticket/1371)!)--and this somehow, eventually, became preferential, and a perfusing security mess. #### Google being stupid (1)

View 1 setting

- index_the_feed

#### Plugin & Theme (10)

View 10 settings

- disabled_post_types - disabled_taxonomies - og_tags - facebook_tags - twitter_tags - knowledge_output - sitemaps_output - alter_search_query - alter_archive_query - sitemaps_robots

#### Hosting (1)

View 1 setting

- canonical_scheme

#### Performance (6)

View 6 settings

- alter_archive_query_type - alter_search_query_type - cache_sitemap - cache_object - sitemap_query_limit - ping_use_cron

# Deprecated (9) **These settings are already phasing out of existence.** #### SEO output (1)

View 9 settings

- knowledge_`{$social_network}`