Skip to content

SEO: update /graphing-libraries/ meta title and description #460

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

Open
chriddyp wants to merge 3 commits into
base: master
Choose a base branch
from
Open

SEO: update /graphing-libraries/ meta title and description #460

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
9264ea2
SEO: update /graphing-libraries/ meta title and description
chriddyp Aug 4, 2026
4d13477
SEO: update /javascript/ meta title and description
chriddyp Aug 4, 2026
1eb2357
Update /javascript/ home page copy and link affordances
chriddyp Aug 4, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
25 changes: 18 additions & 7 deletions _includes/layouts/seo.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,8 @@
{% capture title %}
{% if page.permalink == '/python/' or page.language == '/julia/' or page.language == '/r/' or page.language == '/ggplot2/' or page.language == '/f_sharp/' or page.language == '/matlab/' or page.language == '/javascript/' %}{{page.name}}
{% elsif page.name == '404' %} 404 Page Not Found
{% elsif page.permalink == '/api/' or page.permalink == '/graphing-libraries/' %} Plotly Open Source Graphing Libraries
{% elsif page.permalink == '/javascript/' %} Open Source JavaScript Graphing & Chart Library | Plotly
{% elsif page.permalink == '/api/' or page.permalink == '/graphing-libraries/' %} Open-Source Graphing Libraries for Python & JavaScript | Plotly
{% elsif page.name %} {{page.name | capitalize}} in {{language}}{% else %} Plotly Open Source Graphing Libraries{% endif %}
{% endcapture %}
<!-- Count number of plots on the page -->
Expand All @@ -23,7 +24,7 @@
{% if page.layout == 'langindex' %}
{% capture description %}{{page.description}}{% endcapture %}
{% elsif page.permalink == '/api/' or page.permalink == '/graphing-libraries/' %}
{% capture description %}"Interactive charts and maps for Python, R, Julia, Javascript, ggplot2, F#, MATLAB®, and Dash."{% endcapture %}
{% capture description %}"Access interactive charts and maps for Python, and Javascript, for use with Dash, Streamlit, Hex, Notebooks and LLMs. Graphing libraries for data analytics."{% endcapture %}
{% else %}
{% assign counter = 0 %}
{% for code_block in code_blocks %}
Expand All @@ -42,26 +43,36 @@
{% endif %}


<!-- Normalize the captured values before they go into attributes.
The capture blocks above are multi-line, so they arrive padded with
newlines/indentation, and some of them wrap their text in literal double
quotes to compensate for the content= attributes having been unquoted.
Strip both, then quote the attributes properly below: an unquoted
content= truncates the value at its first space, which is why every
langindex description used to render as a single word. -->
{% assign title = title | strip_newlines | strip | replace: '"', '' %}
{% assign description = description | strip_newlines | strip | replace: '"', '' %}

<!-- SEO Tags - title, meta_description -->
<title>{{title}}</title>
<meta name="description" content={{description}}>
<meta name="description" content="{{description}}">

<!-- Bing tags -->
<meta name="msvalidate.01" content="D319859A832F9F1D15A7646E2A42150A" />
<!-- Facebook tags -->
<meta property="og:title" content={{title}}/>
<meta property="og:title" content="{{title}}"/>
<meta property="og:type" content="website"/>
<meta property="og:image" content="{% if page.imageurl %}{{page.imageurl}}{% else %}{% if page.thumbnail%}{{site.imgurl}}{{page.thumbnail}}{%else%}https://help.plot.ly/images/twitter-default.png{% endif %}{% endif %}">
<meta property="og:description" content={{description}}/>
<meta property="og:description" content="{{description}}"/>
<meta property="og:url" />
<meta property="fb:admins" content="1123751525"/>
<meta property="fb:admins" content="22418"/>

<!-- twitter tags -->
<meta name="twitter:card" content="photo" />
<meta name="twitter:title" content={{title}}/>
<meta name="twitter:title" content="{{title}}"/>
<meta name="twitter:url" content="{% if page.permalink %}https://plotly.com/{{page.permalink}}{% endif %}"/>
<meta name="twitter:description" content={{description}}/>
<meta name="twitter:description" content="{{description}}"/>
<meta name="twitter:image" content="{% if page.imageurl %}{{page.imageurl}}{% else %}{% if page.thumbnail%}{{site.imgurl}}{{page.thumbnail}}{%else%}https://help.plot.ly/images/twitter-default.png{% endif %}{% endif %}">
<meta name="twitter:site" content="@plotlygraphs"/>

38 changes: 19 additions & 19 deletions _includes/posts/mainlang_documentation_eg.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@
{% if file_settings %}
<section class="--tutorial-section">
<header class="--section-header">
<a href="#fundamentals" name="fundamentals" id="fundamentals">Fundamentals</a>
<span name="fundamentals" id="fundamentals">Fundamentals</span>

{% assign forloop_idx = 0 %}
{%- for page in languagelist -%}
Expand Down Expand Up @@ -96,7 +96,7 @@
{% if chart_type %}
<section class="--tutorial-section">
<header class="--section-header">
<a href="#basic-charts" id="basic-charts">Basic Charts</a>
<span id="basic-charts">Basic Charts</span>

{% assign forloop_idx = 0 %}
{%- for page in languagelist -%}
Expand Down Expand Up @@ -135,7 +135,7 @@
{% if statistical %}
<section class="--tutorial-section">
<header class="--section-header">
<a href="#statistical-charts" id="statistical-charts">Statistical Charts</a>
<span id="statistical-charts">Statistical Charts</span>

{% assign forloop_idx = 0 %}
{%- for page in languagelist -%}
Expand Down Expand Up @@ -168,7 +168,7 @@
{% if scientific %}
<section class="--tutorial-section" id="scientific-charts">
<header class="--section-header">
<a href="#scientific-charts">Scientific Charts</a>
<span>Scientific Charts</span>

{% assign forloop_idx = 0 %}
{%- for page in languagelist -%}
Expand Down Expand Up @@ -201,7 +201,7 @@
{% if financial %}
<section class="--tutorial-section" id="financial-charts">
<header class="--section-header">
<a href="#financial-charts">Financial Charts</a>
<span>Financial Charts</span>

{% assign forloop_idx = 0 %}
{%- for page in languagelist -%}
Expand Down Expand Up @@ -234,7 +234,7 @@
{% if maps %}
<section class="--tutorial-section" id="maps">
<header class="--section-header">
<a href="#maps">Maps</a>
<span>Maps</span>

{% assign forloop_idx = 0 %}
{%- for page in languagelist -%}
Expand Down Expand Up @@ -267,7 +267,7 @@
{% if ai_ml %}
<section class="--tutorial-section">
<header class="--section-header">
<a href="#ai_ml" name="ai_ml" id="ai_ml">Artificial Intelligence and Machine Learning</a>
<span name="ai_ml" id="ai_ml">Artificial Intelligence and Machine Learning</span>

{% assign forloop_idx = 0 %}
{%- for page in languagelist -%}
Expand Down Expand Up @@ -301,7 +301,7 @@

{% if bio %}
<section class="--tutorial-section">
<header class="--section-header"><a href="#bio" name="bio" id="bio">Bioinformatics</a>
<header class="--section-header"><span name="bio" id="bio">Bioinformatics</span>
<a href="/{{language}}/bio/" class="langindexlink">More Bioinformatics &raquo;</a>
</header>
<section class="--grid">
Expand All @@ -321,7 +321,7 @@
{% if 3d_charts %}
<section class="--tutorial-section" id="3d-charts">
<header class="--section-header">
<a href="#3d-charts">3D Charts</a>
<span>3D Charts</span>

{% assign forloop_idx = 0 %}
{%- for page in languagelist -%}
Expand Down Expand Up @@ -354,7 +354,7 @@
{% if multiple_axes %}
<section class="--tutorial-section" id="multiple-axes-subplots-and-insets">
<header class="--section-header">
<a href="#subplot-charts" name="subplot-charts" id="subplot-charts">Subplots</a>
<span name="subplot-charts" id="subplot-charts">Subplots</span>

{% assign forloop_idx = 0 %}
{%- for page in languagelist -%}
Expand Down Expand Up @@ -387,7 +387,7 @@
{% if chart_events and page.language =="python" %}
<section class="--tutorial-section" id="chart-events">
<header class="--section-header">
<a href="#jupyter-widgets" id="jupyter-widgets">Jupyter Widgets Interaction</a>
<span id="jupyter-widgets">Jupyter Widgets Interaction</span>

{% assign forloop_idx = 0 %}
{%- for page in languagelist -%}
Expand Down Expand Up @@ -420,7 +420,7 @@
{% if chart_events and page.language =="r" %}
<section class="--tutorial-section" id="custom-interaction">
<header class="--section-header">
<a href="#custom-interaction">Custom Interaction With JavaScript</a>
<span>Custom Interaction With JavaScript</span>

{% assign forloop_idx = 0 %}
{%- for page in languagelist -%}
Expand Down Expand Up @@ -453,7 +453,7 @@
{% if chart_events and page.language == 'plotly_js' %}
<section class="--tutorial-section" id="custom-chart-events">
<header class="--section-header">
<a href="#custom-chart-events">Custom Chart Events</a>
<span>Custom Chart Events</span>

{% assign forloop_idx = 0 %}
{%- for page in languagelist -%}
Expand Down Expand Up @@ -486,7 +486,7 @@
{% if controls %}
<section class="--tutorial-section" id="controls">
<header class="--section-header">
<a href="#controls">Add Custom Controls</a>
<span>Add Custom Controls</span>

{% assign forloop_idx = 0 %}
{%- for page in languagelist -%}
Expand Down Expand Up @@ -519,7 +519,7 @@
{% if animations %}
<section class="--tutorial-section" id="animations">
<header class="--section-header">
<a href="#animations">Animations</a>
<span>Animations</span>

{% assign forloop_idx = 0 %}
{%- for page in languagelist -%}
Expand Down Expand Up @@ -552,7 +552,7 @@
{% if financial_analysis %}
<section class="--tutorial-section" id="financial-analysis">
<header class="--section-header">
<a href="#financial-analysis">Financial Analysis</a>
<span>Financial Analysis</span>

{% assign forloop_idx = 0 %}
{%- for page in languagelist -%}
Expand Down Expand Up @@ -585,7 +585,7 @@
{% if advanced_opt %}
<section class="--tutorial-section no-image" id="advanced-options">
<header class="--section-header">
<a href="#advanced-options">Advanced</a>
<span>Advanced</span>
</header>
<section class="--grid">
<ul class="--grid-list">
Expand All @@ -611,7 +611,7 @@
{% if style_options %}
<section class="--tutorial-section no-image" id="style-options">
<header class="--section-header">
<a href="#style-options">Style Options</a>
<span>Style Options</span>
</header>
<section class="--grid">
<ul class="--grid-list">
Expand All @@ -637,7 +637,7 @@
{% if layout_options %}
<section class="--tutorial-section no-image" id="layout-options">
<header class="--section-header">
<a href="#layout-options">Layout Options</a>
<span>Layout Options</span>
</header>
<section class="--grid">
<ul class="--grid-list">
Expand Down
31 changes: 14 additions & 17 deletions _posts/plotly_js/2015-04-05-plotly_js-index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
name: Plotly JavaScript Graphing Library
permalink: /javascript/
description: A free open source interactive javascript graphing library. Plotly.js is built on d3.js and webgl and supports over 20 types of interactive charts.
description: Build interactive JavaScript charts and graphs with Plotly's open-source JavaScript chart library. Explore over 40+ advanced JavaScript data visualizations.
language: plotly_js
layout: langindex
display_as: false
Expand All @@ -15,33 +15,33 @@
<div class="--title">

<div class="--body">
<h1>Plotly JavaScript Open Source Graphing Library</h1>
<h1>Open Source JavaScript Graphing &amp; Chart Library</h1>
<p>
Built on top of <a target="_blank" href="https://d3js.org/">d3.js</a> and <a target="_blank" href="https://github.com/stackgl">stack.gl</a>, Plotly.js is a high-level, declarative charting library. plotly.js ships with over 40 chart types, including 3D charts, statistical graphs, and SVG maps.
<br>plotly.js is <a href="/javascript/is-plotly-free">free and open source</a> and you can <a target="_blank" href="https://github.com/plotly/plotly.js">view the source, report issues or contribute on GitHub</a>.
Built on top of <a target="_blank" href="https://d3js.org/">d3.js</a> and <a target="_blank" href="https://github.com/stackgl">stack.gl</a>, Plotly.js is a high-level, declarative JavaScript charting library. plotly.js ships with over 40 chart types, including 3D charts, statistical graphs, and SVG maps.
<br>plotly.js is free and open source, and you can <a target="_blank" href="https://github.com/plotly/plotly.js">view the source, report issues, or contribute on GitHub</a>.
</p>
</div>
</div>
<div class="--title">
<div class="--body">
{% include layouts/dashplug.html %}
<br>
<details>
<summary>Read more about plotly.js features</summary>
<details class="js-splash--features">
<summary><span class="js-splash--features-title">plotly.js Features</span></summary>
<section class="tutorial-content --tutorial-index --base">

<div class="js-splash--feature-block">

<div class="block-title">
Sophisticated chart types
Sophisticated Chart Types
</div>
<div class="block-content">
<code>plotly.js</code> abstracts the types of statistical and scientific charts that you would find in packages like matplotlib, ggplot2, or MATLAB.
</div>

<!-- <div class="graph" style="height: 75vh" id="contour-plot"></div> -->
<div style="border: 1px solid #C2C2C2; width: 100%; text-align: center;">
<a class="image-link" style="display: inline-block;" href="https://plotly.com/~mdtusz/72.embed"><img style="width: 100%" src="{{site.imgurl}}images/turbulence-simulation.jpg"/></a>
<img style="width: 100%" src="{{site.imgurl}}images/turbulence-simulation.jpg"/>
</div>
<pre><code class="js-splash--code-block">d3.json('https://plotly.com/~DanielCarrera/13.json', function(figure){
var trace = {
Expand Down Expand Up @@ -82,7 +82,7 @@ <h1>Plotly JavaScript Open Source Graphing Library</h1>



<div class="block-title">Fully customizable</div>
<div class="block-title">Fully Customizable</div>
<div class="block-content">
<code>plotly.js</code> charts are described declaratively as JSON objects. Every aspect of the charts, such as colors, grid lines, and the legend, has a corresponding set of JSON attributes.
<div style=" padding-top: 15px; padding-bottom: 10px; text-align: right; height: 30px;">
Expand Down Expand Up @@ -132,35 +132,32 @@ <h1>Plotly JavaScript Open Source Graphing Library</h1>



<div class="block-title">High performance</div>
<div class="block-title">High Performance</div>
<div style="width: 100%" class="block-content">
<div class="js-splash--inline-text-header">
Most plotly graphs are drawn with SVG. This offers great compatibility across browsers and publication-quality vector image export. Unfortunately, there are inherent performance limitations with the number of SVG elements that you can draw in the DOM.<br><br>
<code>plotly.js</code> uses <a target="_blank" href="http://stack.gl">stack.gl</a> for high performance 2D and 3D charting.<br><br>
Most Plotly graphs are drawn with SVG. This offers great compatibility across browsers and publication-quality vector image export. Unfortunately, there are inherent performance limitations with the number of SVG elements that you can draw in the DOM.<br><br>
<code>plotly.js</code> uses <a target="_blank" href="http://stack.gl">stack.gl</a> for high performance 2D and 3D JavaScript charting.<br><br>
</div>
<div style="position: relative;" class="row">
<div class="js-splash--inline-image-left">
<a class="image-link" style="display: inline-block;" href="https://plotly.com/~chris/17389.embed"><img style="width: 100%" src="{{site.imgurl}}images/hue-value-vs.jpg"/></a>
<img style="width: 100%" src="{{site.imgurl}}images/hue-value-vs.jpg"/>
</div>
<div class="js-splash--inline-text-right">
This chart was drawn with the <code>plotly.js</code> chart type <code>scattergl</code>. <code>scattergl</code> charts render an order of magnitude faster than their SVG counterparts.<br>
</div>
</div>
<div style="position: relative; width: 100%" class="row">
<div class="js-splash--inline-image-right">
<a class="image-link" style="display: inline-block; width: 100%;" href="https://plotly.com/~chriddyp/1780.embed">
<img style="width: 100%;" src="{{site.imgurl}}images/surface-plot.jpg"/>
</a>
</div>
<div class="js-splash--inline-text-left">
All 3D charts in <code>plotly.js</code> are rendered with WebGL, leveraging the power of the GPU for fast interactivity.
<a class="js-splash--chart-link" target="_blank" href="https://plotly.com/~chris/17389.embed">view the interactive version</a>
</div>
</div>
</div>
<div class="block-title">Universal</div>
<div class="block-content">
By abstracting charts to a declarative JSON structure, <code>plotly.js</code> is used as a browser-based charting library for <a target="_blank" href="https://plotly.com/python/">Python</a>, <a target="_blank" href="https://plotly.com/r/">R</a>, <a target="_blank" href="https://plotly.com/matlab/">MATLAB</a>.
By abstracting charts to a declarative JSON structure, <code>plotly.js</code> is used as a browser-based charting library for <a target="_blank" href="https://plotly.com/python/">Python</a>, <a target="_blank" href="https://plotly.com/r/">R</a>, and <a target="_blank" href="https://plotly.com/matlab/">MATLAB</a>.
</div>

</div>
Expand Down
36 changes: 32 additions & 4 deletions all_static/css/improve.css
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Loading
Loading