Visual SEO Setup and Management

Request Summary:

To further the “visual” web development goals of Wappler and making it an even powerful and diverse, we request for full fledged visual (non-code) options to setup and manage SEO with dynamic data options.

Detailed feature request (an initiation as to what is expected)

1. Project Level SEO settings

this part can be added to the project setting window as a new tab.

a. meta data (reusable on page level and other places as well):

– site title
– site tag line
– site description
– site logo
– site favicon
– separator (common separator value like | or - to be used across the website on dynamic titles for consistency)

b. create/refresh sitemap and image sitemap

– i guess only XML sitemaps should suffice, HTML sitemaps are not needed, right?).
– a button to ping sitemap to google (https://www.google.com/ping?sitemap=<sitemap URL>).
– list all the pages of the project and allow for specifically exclude any page from sitemap. it can be auto-configured as well based on page level property of ‘noindex’.
– image sitemaps ref: https://support.google.com/webmasters/answer/114016

c. Google Knowledge Graph integration

– ref: https://developers.google.com/search/docs/guides/enhance-site
– setup site attributes for Google to read - corporate contact, site logo, social profile, etc. all of it please.
– special mention of JSON-LD breadcrumbs, please integrate support for this feature as well.
– all values including images should be dynamically linkable so that the developer can allow for the client to be able to change it post production. no dependency on the developer for that - get my point?

d. Analytics and Webmaster setup:

– option to enable and input ID/Key for popular analytics and search engines for one-click config via UI instead of adding these values from the code view. few samples:
– Google analytics tracking ID (there are lot more analytics tracking features which maybe added later, one step at a time :slight_smile:)
– Google Site Verification meta value (google search console)
– Bing Site Verification meta value (bing webmaster tools)
– Yandex Site Verification meta value (yandex webmaster tools)
– Pinterest Site Verification meta value

e. Local Business meta data

– ref: https://developers.google.com/search/docs/data-types/local-business
– some 10-12 variables that have to set which google reads along with store times.
– there are so many structured data stuff by google, i know, the reason i am suggesting this is because this is likely to be most widely used for clients.

f. enable/disable toggle for Dublin Core (dublincore.org)

– just simple enable or disable option, all values will be derived from the existing settings only, no separate need to create all the input boxes, etc. for all the meta data.

g. setup 404 redirection URL

– to a page within the project or a separate URL altogether.

2. Page Level SEO settings

this part can be added a new window (would prefer a panel alongside design panel but this is not as frequently used and that space is already kinda full!) with the button to open this window somewhere on the bar which has the responsive view buttons, what say?

a. meta data:

– meta title
– meta description
– page featured image (will also be used for social media thumbnails).

b. checkboxes for marking the page as: noindex, nofollow, etc.

– ref: https://support.google.com/webmasters/answer/79812?hl=en&ref_topic=4617741

c. custom breadcrumb name

– page title is the default breadcrumb name.
– in case the title name is too big and a different name is to be set as breadcrumb option to enter that value should be given on the page level SEO settings.
– ref: https://developers.google.com/search/docs/data-types/breadcrumb

d. redirection.

– a dropdown to select from reason codes: 301, 302, 307, 410, 451 and select a page corresponding to it or an option to enter a custom URL for redirection.

3. Facebook Open Graph and Twitter Card:

part of respective project/page level screens, summarising here separately just for clarity.

a. Project Level settings:

– Facebook Link Ownership ID <meta property=“fb:pages” content=“page ID”/>
– Facebook Admin ID <meta property=“fb:admins” content=“admins ID”/>
– Facebook App ID <meta property=“fb:app_id” content=“app ID”/>
– default Facebook image
– default Twitter image

b. Page Level settings

– default values for these would be the generic ones as defined in point 2 above, giving separate input boxes to manipulate different social media may seem overwhelming but it is just supercharging the whole thing:

c. ability to enable/disable these tags.

d. these settings can derive values directly from other project level and page level settings.

4. General Points

– ability to set all variables and images to dynamic values so that developer can enable client side manipulation of these data post-production.
– lot many things are under the hood like google analytics ID must be added on all the pages, not just the home page. these things will have to be integrated well by Wappler team - which would be the real value addition - by making developer’s life easier and the output robust and beautiful.
– z

inputs and feedback on this request invited from @wappler_ambassadors

Community Page
Last updated: