Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

SEO-optimization for new theme #869

Closed
Thorium opened this issue Nov 14, 2023 · 4 comments · Fixed by #888
Closed

SEO-optimization for new theme #869

Thorium opened this issue Nov 14, 2023 · 4 comments · Fixed by #888

Comments

@Thorium
Copy link
Member

Thorium commented Nov 14, 2023

The current documentation pages should win Google search by default, but GitHub and Nuget seems to go before that.
So... The HTML pages could have better parameters in the head of the page, for example:

<head>
<!-- ... current ones plus ... -->
<meta name="description" content="Library used for building custom analyzers for FSAC / F# editors.">
<!-- OGs are for social media sharing previews -->
<meta property="og:site_name" content="FSharp.Analyzers.SDK">
<meta property="og:image" content="http://ionide.io/FSharp.Analyzers.SDK/images/logo.png">
<meta property="og:image:secure_url" content="https://ionide.io/FSharp.Analyzers.SDK/images/logo.png">
<!-- match Twitter option with Some 
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@fsharp_analysers">
<meta name="twitter:image" content="http://ionide.io/FSharp.Analyzers.SDK/images/logo.png">
-->
<!-- This would be for your mother's phone: -->
<!--link rel="apple-touch-icon-precomposed" sizes="144x144" href="http://ionide.com/apple-touch-icon-144-precomposed.png"-->
</head>
@kMutagene
Copy link
Contributor

If i understand the current system correctly, there is no default _template.html file provided by the tool, and users are expected to create their own. I think a fsdocs init command that provides a html template that contains the seo tags would be nice, but to make this automated, a lot of parameters have to be supplied by the user.

Example:

This is how i try to do automatic seo tags for each documentation page on plotly.net:

    <meta charset="utf-8">
    <title>{{fsdocs-page-title}}</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="author" content="{{fsdocs-authors}}">
    <meta name="description" content="Plotly.NET is an Interactive charting library for .NET programming languages. This page contains the documentation for: {{fsdocs-page-title}}">

    <!-- Opengraph properties (https://ogp.me/) -->
    <meta property="og:title" content="Plotly.NET documentation for: {{fsdocs-page-title}}" />
    <meta property="og:url" content="{{root}}{{fsdocs-source-basename}}.html">
    <meta property="og:type" content="website" />
    <meta property="og:site_name" content="Plotly.NET" />
    <meta property="og:description" content="Plotly.NET is an Interactive charting library for .NET programming languages. This page contains the documentation for: {{fsdocs-page-title}}">
    <meta property="og:image" content="{{root}}img/logo_meta_tags.png">

    <!-- Twitter cards -->
    <meta name="twitter:card" content="summary_large_image">
    <meta property="twitter:domain" content="{{root}}{{fsdocs-source-basename}}.html">
    <meta property="twitter:url" content="https://plotly.net">
    <meta name="twitter:title" content="Plotly.NET documentation for: {{fsdocs-page-title}}">
    <meta name="twitter:description" content="Plotly.NET is an Interactive charting library for .NET programming languages. This page contains the documentation for: {{fsdocs-page-title}}">
    <meta name="twitter:image" content="{{root}}img/logo_meta_tags.png">

As you see, this is done via the substitution parameters, but if the user does not supply these, the meta tags are rubbish.

@nojaf
Copy link
Collaborator

nojaf commented Nov 17, 2023

If i understand the current system correctly, there is no default _template.html file provided by the tool, and users are expected to create their own.

That is incorrect if you don't create a _template.html file, https://github.com/fsprojects/FSharp.Formatting/blob/main/docs/_template.html will be used by the tool.

We could incorporate these SEO tags in the default template and add some more substitution parameters if necessary.

As for fsdocs init I do like that idea. It could scaffold the right files if you have absolutely nothing in your repository.

@kMutagene kMutagene mentioned this issue Nov 17, 2023
Open
@kMutagene
Copy link
Contributor

That is incorrect if you don't create a _template.html file

I see, sorry has been a long time since i did set up from scratch

We could incorporate these SEO tags in the default template and add some more substitution parameters if necessary.

These are always known to the tool right?

  • {{root}}
  • {{fsdocs-source-basename}}
  • {{fsdocs-page-title}}

If that is the case, most of the tags can be reliably created, while i think {{fsdocs-authors}} must be provided by the user, and therefore could just be left out of the template, preventing people from ending up with '{{fsdocs-authors}}' as their author tag.

@kMutagene kMutagene mentioned this issue Nov 17, 2023
Merged
@nojaf nojaf linked a pull request Dec 6, 2023 that will close this issue
Meta tags #888
Merged
@nojaf nojaf closed this as completed in #888 Dec 6, 2023
@nojaf
Copy link
Collaborator

nojaf commented Dec 6, 2023

Available in https://www.nuget.org/packages/fsdocs-tool/20.0.0-alpha-015

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Meta tags nojaf/FSharp.Formatting
3 participants
@Thorium @nojaf @kMutagene