SEO: individualized content previews for DVC pages

[MerlynMShelley]

Fixes #857

[rogermparent]

Hi @MerlynMShelley!

I see this is your first contribution: first, thanks for the fix! It looks good to me overall, but does need a few small changes.
I'd like to reformat this issue so it's more descriptive of what it contains and links the issue, however. No indictment on you, just that it'll make others have an easier time reading it.

Also, TypeScript lint is failing:

src/components/SEO/index.tsx:28:3 - error TS2339: Property 'site_name' does not exist on type 'PropsWithChildren<ISEOProps>'.

28   site_name,

Looks like you just have to add site_name to ISEOProps and that'll be solved.

[rogermparent]

The TS issue will have to be fixed before merge, but everything else looks fine on read.
I'll also test this out to confirm it works.

[MerlynMShelley]

Yes, it is my first contribution. Okay, I get it about reformating. Thank you for your support and guidance.

[shcheklein]

@MerlynMShelley thanks for the contribution! I don't see this fixing #857 though. We only added some additional meat attributes, right? I would say it partially addresses #1119 (not completely fixing it either).

Please, check some comments regarding var names, and it's not clear to me where do we get the value from, do we need some checks in place, etc

[shcheklein]

Please, check some comments from me.

[MerlynMShelley]

@shcheklein Thank you for the support and guidance; I will add the camelCase structure and also include the custom text+ logo as you mentioned to have a distinct preview on the slack channel. I was just curious to resolve the issue. I would refer to the links you mentioned by Matt to come up with the best solution. Thank you.

[jorgeorpinel]

Thanks for this @MerlynMShelley! Roger and Ivan are already reviewing so please follow their lead in this PR. I'll just watch. Some notes from me:

Per #1379 (comment) please don't use the special word "Fixes" in the description of this PR, so merging this doesn't close that issue. Maybe say "Partially addresses #1119". alternatively, if you go for completely addressing that other issue, you can then use a special word like "Close #1119".

I also deployed this to https://dvc-landing-fix-hash-85-w68hes.herokuapp.com/ to check stuff and indeed there are no special previews:

[jorgeorpinel]

Wait actually from my screenshot, the preview is indeed customized with the document's title, so this PR does seem to address #857 (as well as #1119 partially). Cc @shcheklein

So if it's possible to also customize the snippet and/or image (per #857 (comment)) then the description of this PR is accurate, I think.

[jorgeorpinel]

the preview is indeed customized with the document's title

BUT it's missing the 2nd half of the page title, "| Data Version Control . DVC", @MerlynMShelley:

[MerlynMShelley]

Hi Team, @jorge, yes I will work on #1119 and #857. Thank you for your support and guidance. I will follow up the above said points.

[shcheklein]

@MerlynMShelley a few questions:

1. I don't see twitter:siteName card here https://developer.twitter.com/en/docs/tweets/optimize-with-cards/guides/getting-started, neither I can't find the og:siteName. Could point us where did you find them?
2. Have you figured out what it the difference SEO vs DefaultSEO - it looks like site name is already defined in one of those. Could check one of the dvc.org pages? it might happen that we already site names there.
3. CircleCI is failing, it's something related to TS. Please, check it out and fix.

[MerlynMShelley]

I have referred this article on slack help,
https://slack.com/intl/en-in/help/articles/204399343-Share-links-and-set-preview-preferences

And I have performed site audit in these tools to find out what is missing in the site.

https://web.dev/measure/?gclid=CjwKCAjwztL2BRATEiwAvnALckrnPi64YihVniBJfNmlMZn-xnAHQ_VeOmYiHaGeeB4vXQsiHlqqcBoClh4QAvD_BwE

https://www.seoptimer.com/dvc.org#recommendation

https://seositecheckup.com/seo-audit/dvc.org

https://suite.seotesteronline.com/seo-checker/aHR0cDovL0R2Yy5vcmc=/content

Then I noticed that siteName was missing, also image alt text, schema.org structured test we're missing for rich media snippets.

So I started by including the meta tags.

Yes, I will check according to your guidance and fix the same. Thank you.

[jorgeorpinel]

@MerlynMShelley wrong Jorge 🙂

[MerlynMShelley]

Oh I am sorry.🙂. Will note that in future.

[jorgeorpinel]

@MerlynMShelley any updates on this? Thanks

[MerlynMShelley]

Yes, @jorgeorpinel.
#1379 (comment)
Four days ago I mentioned this, so after adding siteName, we should add Schema to get rich media snippets. But in coding, I don't know to which file I have to make the addition. I can only suggest the coding part. But as of documentation, I have performed complete SEO site audit through site analytics tools like Neil Patel, SEMRush; it says the text content is very less compared to that of the coding part. So my project proposal would be to add more elaboratory SEO contents with keywords and LSI keywords to attain higher rankings in SERP. Thanks for asking.

[jorgeorpinel]

@MerlynMShelley I meant I don't think you've addressed all of Ivan's feedback in #1379 (comment) which would be necessary to move this PR forward.

As for the SEO report and your idea, sounds interesting but kind o unrelated to this PR. Please open a separate issue with the report and your proposal idea again so we can follow up there.

we should add Schema to get rich media snippets. But in coding, I don't know to which file I have to make the addition. I can only suggest the coding part.

@rogermparent do you have any suggestions as for how this PR can be brought to a point were its mergeable, extracting the part Merlyn feels unable to contribute? Or perhaps provide specific guidance on what source code files to try editing? Thanks

[MerlynMShelley]

Ok, sure I follow what you have suggested @jorgeorpinel Thanks

[MerlynMShelley]

I don't find these Twitter card : creator and also thelabel/part1 in the source code. As per the API doc, twitter:site:id twitter:player yet to be added in the source code I hope. But I don't know the exact place to add these in the source code. Please refer here, https://developer.twitter.com/en/docs/tweets/optimize-with-cards/overview/markup

Card Validator,
https://cards-dev.twitter.com/validator
@jorgeorpinel @shcheklein
Thanks

[MerlynMShelley]

Please find the SEO report of DVC.org,
https://www.seoptimer.com/www.dvc.org

Thanks, @jorgeorpinel @ shcheklein

[MerlynMShelley]

@shcheklein I found og:siteName meta property here,
https://megatags.co/#generate-tags

Secondly, I am not pretty much sure about where the changes have to be made in the src code
Thirdly CircleCI and TS are not familiar, yet to know about them.

As I propose to work on the SEO project idea In GSoD '20, I find this issue to make my first contributions.

Thank you.

[MerlynMShelley]

@shcheklein please also check this for siteName tag
https://ogp.me/

[rogermparent]

Sorry guys, I've been busy on another project and haven't checked my GitHub notifications in a bit.

@rogermparent do you have any suggestions as for how this PR can be brought to a point were its mergeable, extracting the part Merlyn feels unable to contribute? Or perhaps provide specific guidance on what source code files to try editing? Thanks

By making the PR mergeable, do you mean just solving the CircleCI issue blocking merge or bringing the PR up to a standard of quality meant for merging?

for the former, here's the CI log:

$ tsc --noEmit --skipLibCheck && eslint --ext .json,.js,.ts,.tsx .
src/components/Page/DefaultSEO/index.tsx:21:29 - error TS2339: Property 'siteName' does not exist on type 'ISiteMeta'.

To fix this, siteName must be added to the ISiteMeta interface in src/components/Page/DefaultSEO/index.tsx

[shcheklein]

@MerlynMShelley

og:siteName does not exist on that page, did you mean og:site_name - you should fix the code them

twitter:siteName does not exist.

@MerlynMShelley I'm really sorry, we don't have capacity to iterate with that much involvement on this particular task :( I'm going to close this and if you are still interested in this ticket please try to make a new PR taking into account all the feedback I left, and suggestion @rogermparent put together.

[jorgeorpinel]

@MerlynMShelley thanks for this and sorry it became complicated. It had a great start.

Secondly, I am not pretty much sure about where the changes have to be made in the src code
Thirdly CircleCI and TS are not familiar, yet to know about them.

As I propose to work on the SEO project idea In GSoD '20, I find this issue to make my first contributions.

The general feedback I can give you is that the contribution should be complete, not just starting changes that require the team to finish them. So if you don't feel comfortable with the code base, please focus on content for now.

Feel free to contribute with research about SEO issues and add some info in the issues, but please try to make it digested, not raw screenshots of some schema reference without links — those are pretty difficult to figure out. Please try to be brief and specific. However, actual contributions (PRs) would be best so again, maybe check our issues labeled doc-content + good-first-issue for now. Thanks again!